Визначення рядків і стовпців

3.1 Властивість grid-template-columns

CSS Grid Layout дозволяє створювати складні макети веб-сторінок з використанням рядків і стовпців. Дві ключові властивості для визначення структури сітки — grid-template-rows і grid-template-columns. Ці властивості дозволяють задавати кількість і розміри рядків і стовпців у контейнері Grid, що дає розробникам повний контроль над компоновкою елементів.

Властивість grid-template-columns визначає кількість і розміри стовпців у сітці. Воно приймає одне або кілька значень, які можуть бути вказані в різних одиницях вимірювання, таких як пікселі (px), відсотки (%), одиниці гнучкості (fr), і інші.

Приклад 1: Завдання фіксованих розмірів стовпців

У цьому прикладі сітка буде складатися з трьох стовпців. Перший стовпець шириною 100px, другий стовпець шириною 200px, третій стовпець шириною 100px:

    
      .grid-container {
        display: grid;
        grid-template-columns: 100px 200px 100px; /* Три стовпці з фіксованими розмірами */
      }
    
  

Приклад 2: Використання одиниць гнучкості (fr)

У цьому прикладі сітка буде складатися з трьох стовпців. Перший і третій стовпці займуть рівну кількість простору, а другий стовпець буде вдвічі ширший кожного з них:

    
      .grid-container {
        display: grid;
        grid-template-columns: 1fr 2fr 1fr; /* Три стовпці з гнучкими розмірами */
      }
    
  

Приклад 3: Використання повторення (repeat)

У цьому прикладі використовується функція repeat, яка дозволяє спростити запис. Сітка буде складатися з трьох стовпців однакової ширини:

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr); /* Три рівних стовпці */
      }
    
  

Приклад 4: Завдання мінімальних і максимальних розмірів (minmax)

У цьому прикладі кожен із трьох стовпців буде мати мінімальну ширину 100px і гнучкий розмір, який може збільшуватися до 1fr залежно від доступного простору:

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, minmax(100px, 1fr)); /* Три стовпці з мінімальною шириною 100px і гнучкими розмірами */
      }
    
  

3.2 Властивість grid-template-rows

Властивість grid-template-rows аналогічна grid-template-columns, але вона визначає кількість і розміри рядків у сітці. Воно також приймає одне або кілька значень, які можуть бути вказані в різних одиницях вимірювання.

Приклад 1: Завдання фіксованих розмірів рядків

У цьому прикладі сітка буде складатися з трьох рядків. Перший рядок висотою 50px, другий рядок висотою 100px, третій рядок висотою 50px:

    
      .grid-container {
        display: grid;
        grid-template-rows: 50px 100px 50px; /* Три рядки з фіксованими розмірами */
      }
    
  

Приклад 2: Використання одиниць гнучкості (fr)

У цьому прикладі сітка буде складатися з трьох рядків. Перший і третій рядки займуть рівну кількість простору, а другий рядок буде вдвічі вищий кожного з них:

    
      .grid-container {
        display: grid;
        grid-template-rows: 1fr 2fr 1fr; /* Три рядки з гнучкими розмірами */
      }
    
  

Приклад 3: Використання повторення (repeat)

У цьому прикладі використовується функція repeat, яка дозволяє спростити запис. Сітка буде складатися з трьох рядків однакової висоти:

    
      .grid-container {
        display: grid;
        grid-template-rows: repeat(3, 1fr); /* Три рівні рядки */
      }
    
  

Приклад 4: Завдання мінімальних і максимальних розмірів (minmax)

У цьому прикладі кожен із трьох рядків буде мати мінімальну висоту 50px і гнучкий розмір, який може збільшуватися до 1fr залежно від доступного простору:

    
      .grid-container {
        display: grid;
        grid-template-rows: repeat(3, minmax(50px, 1fr)); /* Три рядки з мінімальною висотою 50px і гнучкими розмірами */
      }
    
  

3.3 Комбінування властивостей

Комбінування властивостей grid-template-rows і grid-template-columns

Ці властивості можуть використовуватися разом для створення складних сіток із різними розмірами рядків і стовпців.

У цьому прикладі сітка буде складатися з двох стовпців: перший стовпець займе 1 частину доступного простору, а другий стовпець — 2 частини. Сітка також буде складатися з двох рядків: перший рядок висотою 100px, другий рядок висотою 200px.

    
      .grid-container {
        display: grid;
        grid-template-columns: 1fr 2fr;
        grid-template-rows: 100px 200px;
      }
    
  

Приклад повної реалізації:

    
      .grid-container {
        display: grid;
        grid-template-columns: 1fr 2fr;
        grid-template-rows: 100px 200px;
        gap: 10px;
      }

      .grid-item {
        background-color: #3498db;
        color: white;
        padding: 20px;
        text-align: center;
        border: 1px solid #fff;
      }
    
  

    
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Приклад CSS Grid</title>
          <link rel="stylesheet" href="styles.css">
        </head>
        <body>
          <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>
        </body>
      </html>
    
  

Пояснення коду:

• .grid-container: визначає контейнер як grid-контейнер із двома стовпцями і двома рядками. Проміжки між елементами задаються за допомогою властивості gap
• .grid-item: визначає базові стилі для елементів сітки, такі як фоновий колір, колір тексту, відступи, центрування тексту і межа