Центрирование элементов в последнем ряду CSS Grid

Быстрый ответ

Еффективный способ центрирования элементов в последнем ряду CSS Grid – введение в игру псевдоэлемента, заданного свойству grid-column: 1 / -1;. Так создаем невидимый элемент, помогающий располагать элементы последнего ряда по центру, если их количество меньше общего числа колонок в сетке:

.grid-container::after {
  content: '';
  grid-column: 1 / -1; // "Теневой помощник" для центрирования
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); // Три колонки — основные игроки
}

.grid-item:last-child {
  justify-self: center; // Ключевой элемент, находящийся в центре
}

<div class="grid-container">
  <!-- ... здесь могут находиться другие элементы ... -->
  <div class="grid-item">Last</div> <!-- Вот она, ключевая фигура -->
</div>

Представленное решение надежно справляется с центрированием последнего ряда элементов, независимо от их количества.

Flexbox: Альтернативный подход

Гибкое расположение элементов в последнем ряду

Flexbox при позиционировании одномерных массивов превосходит CSS Grid благодаря своим возможностям по детальному контролю над выравниванием. Комбинирование свойств justify-content: center с flex-wrap: wrap позволяет элементам последнего ряда стать центром внимания, не потеряв при этом гибкости и отзывчивости.

Подробнее об этом расскажет наш спикер на видео

Управление пространством с помощью маржинов и функции calc()

Как бывает в флюсезон, элементы иногда предпочитают сохранить личное пространство. В этом случае пригодится flex: 0 0 calc(16.66% – 20px). Применение этого подхода помогает поддерживать равные расстояния между элементами, сохраняя при этом их одинаковую ширину. Дополнительное свойство box-sizing: border-box учитывает поля и границы элементов, не нарушая общую компоновку.

Отношение к отдельным элементам

Ни один разумный разработчик не оставит элементы последнего ряда без внимания. Псевдоклассы, такие как :nth-child и :nth-last-child, используются для особого ухода за теми, кто оказался одинок. Это дает возможность стилистическии корректировки и выравнивания их в центр своего мира.

Заключение по отзывчивости

С Flexbox нам больше не нужно задавать фиксированную ширину дочерним элементам, что делает нашу верстку более гибкой и современной. В отличие от CSS Grid, где структура определяется на основе размеров вьюпорта или контента, Flexbox дает элементам больше "дыхательного пространства". Поэтому выбор между Flexbox и CSS Grid следует основывать на целях и задачах, определенных дизайном.