Вирівнювання елементів у Grid

7.1 Властивість justify-items

CSS Grid Layout надає ефективні інструменти для керування вирівнюванням елементів всередині сітки. Властивості justify-items, align-items і place-items дозволяють точно налаштувати, як grid-елементи розташовуються всередині своїх комірок по горизонталі і вертикалі. Розглянемо ці властивості детальніше.

Властивість justify-items визначає горизонтальне вирівнювання всіх grid-елементів всередині їх комірок по всій сітці.

Синтаксис:

    
      .grid-container {
        justify-items: value;
      }
    
  

Де:

• value: значення, що визначає горизонтальне вирівнювання елементів. Можливі значення:
  • start: вирівнює елементи по початку комірки
  • end: вирівнює елементи по кінцю комірки
  • center: центрує елементи всередині комірки
  • stretch (за замовчуванням): розтягує елементи, щоб вони заповнили всю ширину комірки

Приклад 1: Вирівнювання по початку комірки

У цьому прикладі всі елементи будуть вирівняні по лівому краю своїх комірок:

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        justify-items: start; /* Усі елементи вирівнюються по початку комірки */
      }
    
  

Приклад 2: Центрування елементів

У цьому прикладі всі елементи будуть центровані всередині своїх комірок:

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        justify-items: center; /* Усі елементи центруються всередині комірки */
      }
    
  

7.2 Властивість align-items

Властивість align-items визначає вертикальне вирівнювання всіх grid-елементів всередині їх комірок по всій сітці.

Синтаксис:

    
      .grid-container {
        align-items: value;
      }
    
  

Де:

• value: значення, що визначає вертикальне вирівнювання елементів. Можливі значення:
  • start: вирівнює елементи по початку комірки
  • end: вирівнює елементи по кінцю комірки
  • center: центрує елементи всередині комірки по вертикалі
  • stretch (за замовчуванням): розтягує елементи, щоб вони заповнили всю висоту комірки

Приклад 1: Вирівнювання по початку комірки

У цьому прикладі всі елементи будуть вирівняні по верхньому краю своїх комірок:

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(3, 100px);
        align-items: start; /* Усі елементи вирівнюються по верхньому краю комірки */
      }
    
  

Приклад 2: Центрування елементів по вертикалі

У цьому прикладі всі елементи будуть центровані по вертикалі всередині своїх комірок:

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(3, 100px);
        align-items: center; /* Усі елементи центруються по вертикалі всередині комірки */
      }
    
  

7.3 Властивість place-items

Властивість place-items це скорочений запис для одночасного завдання значень align-items та justify-items.

Синтаксис:

    
      .grid-container {
        place-items: align-value justify-value;
      }
    
  

Де:

• align-value: значення для вертикального вирівнювання всередині комірки (align-items)
• justify-value: значення для горизонтального вирівнювання всередині комірки (justify-items)

У разі вказування одного значення для властивості place-items, наприклад, place-items: stretch, елементи будуть вирівняні по обох напрямках.

Приклад 1: Центрування елементів по вертикалі та горизонталі

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

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(3, 100px);
        place-items: center; /* Елементи центруються як по горизонталі, так і по вертикалі */
      }
    
  

Приклад 2: Розтяжка елементів по висоті та вирівнювання по лівому верхньому краю

У цьому прикладі всі елементи будуть розтягнуті по висоті та вирівняні по лівому верхньому краю своїх комірок:

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(3, 100px);
        place-items: stretch start; /* Елементи розтягуються на всю висоту комірки і вирівнюються по лівому верхньому краю */
      }
    
  

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

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

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr); /* Три стовпці однакової ширини */
        grid-template-rows: repeat(3, 100px); /* Три рядки фіксованої висоти */
        gap: 10px;
        place-items: center center; /* Центрування елементів як по горизонталі, так і по вертикалі */
      }

      .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 item1">Елемент 1</div>
            <div class="grid-item item2">Елемент 2</div>
            <div class="grid-item item3">Елемент 3</div>
            <div class="grid-item item4">Елемент 4</div>
            <div class="grid-item item5">Елемент 5</div>
            <div class="grid-item item6">Елемент 6</div>
          </div>
        </body>
      </html>
    
  

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

• .grid-container: створює контейнер Grid з трьома стовпцями однакової ширини і трьома рядками фіксованої висоти. Використовує властивість place-items для центровання елементів як по горизонталі, так і по вертикалі
• .grid-item: визначає базові стилі для елементів сітки, такі як фон, колір тексту, відступи, центровання тексту і рамка