grid.html - master - Da11oS/css_styles_examples

grid.html
74 строки2 KB
Da11oS
init
09 июл 2025, 22:31
09 июл 2025, 22:31f3aeeea
<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>CSS Grid</title>
  <style>
    .grid-container {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
      background-color: #bdc3c7;
      padding: 10px;
    }

    .grid-item {
      background-color: #e67e22;
      color: white;
      text-align: center;
      padding: 30px;
      font-size: 20px;
    }

    /* Grid Area */
    .grid-area-container {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      grid-template-rows: 1fr 1fr;
      gap: 10px;
      background-color: #ecf0f1;
    }

    .grid-area-1 {
      grid-area: 1 / 1 / 2 / 3; /* Строка 1, столбец 1 → строка 2, столбец 3 */
      background-color: #2ecc71;
    }

    .grid-area-2 {
      grid-area: 1 / 3 / 3 / 4; /* Строка 1, столбец 3 → строка 3, столбец 4 */
      background-color: #3498db;
    }

    .grid-area-3 {
      grid-area: 2 / 1 / 3 / 2; /* Строка 2, столбец 1 → строка 3, столбец 2 */
      background-color: #f1c40f;
    }

    .grid-area-4 {
      grid-area: 2 / 2 / 3 / 3; /* Строка 2, столбец 2 → строка 3, столбец 3 */
      background-color: #e74c3c;
    }
  </style>
</head>
<body>
  <h2>CSS Grid Примеры</h2>

  <!-- Обычный Grid -->
  <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>

  <!-- Grid Area -->
  <div class="grid-area-container">
    <div class="grid-area-1">Area 1</div>
    <div class="grid-area-2">Area 2</div>
    <div class="grid-area-3">Area 3</div>
    <div class="grid-area-4">Area 4</div>
  </div>
</body>
</html>