Выравнивание контейнера Grid

8.1 Свойство justify-content

CSS Grid Layout предоставляет мощные инструменты для управления выравниванием всего контейнера сетки внутри доступного пространства. Свойства justify-content, align-content и place-content позволяют контролировать выравнивание строк и колонок внутри контейнера, обеспечивая гибкость и точность при создании макетов.

Свойство justify-content управляет горизонтальным выравниванием всей сетки внутри контейнера. Это свойство полезно, когда размер контейнера больше, чем необходимая ширина самой сетки.

Синтаксис:

    
      .grid-container {
        display: grid;
        justify-content: value;
      }
    
  

Где: value может принимать следующие значения:

• start: выровнять сетку по началу контейнера
• end: выровнять сетку по концу контейнера
• center: выровнять сетку по центру контейнера
• stretch: растянуть сетку, чтобы она заполнила весь контейнер
• space-around: разместить равное пространство вокруг каждого элемента
• space-between: разместить равное пространство между элементами
• space-evenly: разместить равное пространство между элементами и краями контейнера

Пример 1: Выравнивание по началу контейнера

В этом примере все содержимое будет выровнено по левому краю контейнера:

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 100px);
        justify-content: start; /* Выравнивает содержимое по левому краю контейнера */
      }
    
  

Пример 2: Центрирование содержимого

В этом примере все содержимое будет центрировано внутри контейнера:

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 100px);
        justify-content: center; /* Центрирует содержимое внутри контейнера */
      }
    
  

8.2 Свойство align-content

Свойство align-content определяет, как содержимое сетки выравнивается по вертикальной оси внутри grid-контейнера. Оно полезно, когда сетка не заполняет все доступное вертикальное пространство.

Синтаксис:

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

Где: value — значение, определяющее вертикальное выравнивание содержимого. Возможные значения:

• start: выравнивает содержимое по началу контейнера
• end: выравнивает содержимое по концу контейнера
• center: центрирует содержимое внутри контейнера
• space-between: размещает содержимое с равным расстоянием между элементами
• space-around: размещает содержимое с равным расстоянием вокруг каждого элемента
• space-evenly: размещает содержимое с равным расстоянием между элементами и краями контейнера
• stretch (по умолчанию): растягивает содержимое, чтобы заполнить все доступное пространство

Пример 1: Выравнивание по началу контейнера

В этом примере все содержимое будет выровнено по верхнему краю контейнера:

    
      .grid-container {
        display: grid;
        grid-template-rows: repeat(3, 100px);
        align-content: start; /* Выравнивает содержимое по верхнему краю контейнера */
      }
    
  

Пример 2: Центрирование содержимого

В этом примере все содержимое будет центрировано внутри контейнера:

    
      .grid-container {
        display: grid;
        grid-template-rows: repeat(3, 100px);
        align-content: center; /* Центрирует содержимое внутри контейнера */
      }
    
  

8.3 Свойство place-content

Свойство place-content является сокращенной записью для одновременного задания значений justify-content и align-content.

Синтаксис:

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

Где:

• justify-value: значение для горизонтального выравнивания (justify-content)
• align-value: значение для вертикального выравнивания (align-content)

Пример 1: Центрирование содержимого по горизонтали и вертикали

В этом примере все содержимое будет центрировано внутри контейнера как по горизонтали, так и по вертикали:

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 100px);
        grid-template-rows: repeat(3, 100px);
        place-content: center center; /* Центрирует содержимое как по горизонтали, так и по вертикали */
      }
    
  

Пример 2: Растяжение содержимого по ширине и выравнивание по верхнему краю

В этом примере содержимое будет растянуто по ширине контейнера и выровнено по верхнему краю:

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 100px);
        grid-template-rows: repeat(3, 100px);
        place-content: stretch start; /* Растягивает содержимое по ширине и выравнивает по верхнему краю */
      }
    
  

8.4 Пример полной реализации

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 100px); /* Три столбца фиксированной ширины */
        grid-template-rows: repeat(3, 100px); /* Три строки фиксированной высоты */
        gap: 10px;
        place-content: 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>Пример выравнивания контейнера 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-content для центрирования содержимого по горизонтали и вертикали
• .grid-item: определяет базовые стили для элементов сетки, такие как фоновый цвет, цвет текста, отступы, центрирование текста и граница

1

Задача

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

Недоступна

Контент растяжение

Контент растяжение

Открыть

1

Задача

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

Недоступна

Центрирование контента

Центрирование контента

Открыть