Exemplu: 6 blocuri într-un Grid cu 3 coloane

1
2
3
4
5
6

Codul sursă (Setați font-size la 14px):

<!DOCTYPE html>
<html lang="ro">
<head>
  <meta charset="UTF-8">
  <title>Exemplu CSS Grid</title>
  <style>
    body {
      font-family: Calibri, sans-serif;
      font-size: 14px;
      background-color: #FFF3CD;
      padding: 20px;
    }

    .grid-container {
      display: grid;
      grid-template-columns: repeat(3, 1fr); /* 3 coloane egale */
      gap: 20px; /* spațiu între elemente */
      background-color: #f0f0f0;
      padding: 20px;
    }

    .grid-item {
      background-color: #CC0000;
      color: white;
      padding: 20px;
      font-weight: bold;
      border-radius: 10px;
      text-align: center;
    }
  </style>
</head>
<body>

  <h2>Exemplu: 6 blocuri într-un Grid cu 3 coloane</h2>

  <div class="grid-container">
    <div class="grid-item">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>
    <div class="grid-item">4</div>
    <div class="grid-item">5</div>
    <div class="grid-item">6</div>
  </div>

</body>
</html>