Выравнивание элементов в 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: start stretch;
      }
    
  

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: определяет базовые стили для элементов сетки, такие как фоновый цвет, цвет текста, отступы, центрирование текста и граница

1

Задача

Модуль 1: Web Core, 14 уровень, 6 лекция

Недоступна

Вертикальное центрирование

Вертикальное центрирование

Открыть

1

Задача

Модуль 1: Web Core, 14 уровень, 6 лекция

Недоступна

Растяжение и выравнивание

Растяжение и выравнивание

Открыть