Какие свойства CSS Grid используются (grid-template, gap и др.)?

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

Ключевые свойства контейнера

• grid-template-rows и grid-template-columns: Определяют размеры строк и столбцов сетки. Можно использовать фиксированные значения (px), проценты, гибкие единицы (fr) и функции вроде repeat().
• grid-template-areas: Позволяет задать именованные области сетки с помощью текстовых строк, что делает код более наглядным.
• gap (ранее grid-gap): Устанавливает промежутки между строками (row-gap) и столбцами (column-gap). Это современная замена устаревшим margin-подходам.
• grid-auto-rows и grid-auto-columns: Определяют размер автоматически создаваемых строк или столбцов, если элементов больше, чем явно задано в шаблоне.
• justify-items и align-items: Управляют выравниванием содержимого внутри ячеек по горизонтали и вертикали соответственно.

Пример базовой сетки

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr; /* Три колонки */
  grid-template-rows: 100px auto 50px; /* Три строки */
  gap: 20px;
  grid-template-areas:
    "header header header"
    "sidebar main aside"
    "footer footer footer";
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.aside { grid-area: aside; }
.footer { grid-area: footer; }

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

Итог: Свойства CSS Grid, такие как grid-template, gap и grid-area, являются фундаментальными для построения современных, структурированных веб-макетов. Их стоит применять, когда требуется точный контроль над расположением элементов в двух измерениях, особенно для сложных и адаптивных дизайнов.