Что такое CSS Grid?

CSS Grid Layout (или просто CSS Grid) — это двумерная система раскладки в CSS. Она позволяет управлять размещением элементов как по строкам (горизонтально), так и по колонкам (вертикально), создавая сложные сеточные структуры для построения интерфейсов.

Основные концепции CSS Grid включают:

• Grid Container: Элемент, к которому применяется свойство display: grid или display: inline-grid. descendants этого элемента становятся Grid Items.
• Grid Items: Прямые потомки Grid Container'а.
• Grid Lines: Разделительные линии, образующие сетку. Могут быть названы или иметь числовой индекс.
• Grid Tracks: Пространство между двумя линиями сетки — это либо столбец (column), либо строка (row).
• Grid Cells: Наименьшая единица сетки, образованная пересечением строки и столбца.
• Grid Areas: Прямоугольная область сетки, занимающая одну или несколько ячеек.

Ключевые свойства для работы с CSS Grid включают:

Для контейнера:

• display: grid | inline-grid;
• grid-template-columns: Задает столбцы сетки.
• grid-template-rows: Задает строки сетки.
• grid-template-areas: Задает именованные области сетки.
• gap | row-gap | column-gap: Задает промежутки между ячейками.
• justify-items | align-items | place-items: Выравнивание содержимого внутри ячеек вдоль главной и поперечной осей.
• justify-content | align-content | place-content: Выравнивание дорожек сетки внутри контейнера.

Для элементов (Grid Items):

• grid-column-start | grid-column-end | grid-column: Определяет, какие линии столбцов занимает элемент.
• grid-row-start | grid-row-end | grid-row: Определяет, какие линии строк занимает элемент.
• grid-area: Назначает элемент именованной области сетки или определяет его положение с помощью линий.
• justify-self | align-self | place-self: Выравнивание самого элемента внутри его ячейки.

CSS Grid предоставляет мощные средства для создания адаптивных и сложных макетов, значительно упрощая задачи, которые ранее требовали использования float, inline-block или абсолютного позиционирования.

.container {
  display: grid; /* Делаем элемент Grid контейнером */
  grid-template-columns: 1fr 1fr 1fr; /* Создаем 3 столбца одинаковой ширины */
  grid-template-rows: auto auto; /* Создаем 2 строки с автоматической высотой */
  gap: 10px; /* Добавляем промежутки между ячейками */
}

.item {
  /* Элементы внутри контейнера автоматически становятся Grid Items */
  background-color: lightblue;
  padding: 20px;
  text-align: center;
}

.item:nth-child(1) {
  grid-column: 1 / 3; /* Первый элемент занимает столбцы с 1 по 3 */
}