CSS Grid — это мощная система макетов, позволяющая с легкостью создавать сложные адаптивные проекты. Одной из распространенных проблем является центрирование последнего ряда элементов сетки, чего может быть сложно достичь без правильных методов. В этой статье мы рассмотрим различные методы центрирования последней строки в CSS Grid, дополненные разговорными объяснениями и примерами кода. Давайте погрузимся!

Метод 1: Выравнивание Flexbox
Один простой способ центрировать последнюю строку элементов сетки — объединить CSS Grid с Flexbox. Вот как это можно сделать:

по центру;
align-items: по центру;

Метод 2: автоматическое размещение в сетке.
В этом методе мы используем свойство grid-auto-flowдля автоматического размещения элементов в сетке, а затем центрируем последнюю строку с помощью justify-selfсвойство.

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px;
  grid-auto-flow: dense; /* Allows for automatic item placement */
}
.grid-item:last-child:nth-last-child(-n+3) {
  justify-self: center; /* Centers the last row */
}

Метод 3: Взлом псевдоэлемента
Этот метод предполагает использование псевдоэлемента для создания дополнительного элемента сетки, который охватывает оставшиеся столбцы в последней строке. При центрировании этого псевдоэлемента элементы последней строки будут располагаться по центру.

Метод 4: решение на основе JavaScript
Если вы предпочитаете решение на основе JavaScript, вы можете подсчитать количество элементов в последней строке и динамически регулировать их выравнивание.

const gridItems = document.querySelectorAll('.grid-item');
const itemsPerRow = 3; // Adjust according to your grid
window.addEventListener('resize', centerLastRow);
function centerLastRow() {
  const numRows = Math.ceil(gridItems.length / itemsPerRow);
  const lastRowItems = Array.from(gridItems).slice(-itemsPerRow);
  if (lastRowItems.length === itemsPerRow) {
    lastRowItems.forEach(item => {
      item.style.marginLeft = `${((itemsPerRow - 1) / 2) * 100 / itemsPerRow}%`;
      item.style.marginRight = `${((itemsPerRow - 1) / 2) * 100 / itemsPerRow}%`;
    });
  }
}
// Call the function initially
centerLastRow();

В этой статье мы рассмотрели несколько методов центрирования последней строки элементов сетки в CSS Grid. От использования выравнивания Flexbox и автоматического размещения сетки до хаков псевдоэлементов и решений JavaScript — теперь в вашем распоряжении множество методов. Поэкспериментируйте с этими методами, чтобы добиться желаемого макета для ваших проектов CSS Grid. Приятного кодирования!