24. Grid и выравнивание

CSS Grid и Выравнивание

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

Что такое CSS Grid?

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

Основные свойства Grid-контейнера:

display: grid; - Объявляет элемент Grid-контейнером.
grid-template-columns: - Определяет количество и ширину столбцов.
grid-template-rows: - Определяет количество и высоту строк.
grid-gap: - Определяет расстояние между ячейками сетки.

Пример:

<div class="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

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

Здесь fr - это fractional unit, доля доступного пространства. auto позволяет браузеру автоматически определять высоту строки.

Выравнивание в Grid

CSS Grid предоставляет множество свойств для выравнивания элементов внутри ячеек сетки.

Выравнивание элементов внутри ячейки:

justify-items: - Выравнивает элементы по горизонтали внутри ячейки (start, end, center, stretch). Применяется к Grid-контейнеру.
align-items: - Выравнивает элементы по вертикали внутри ячейки (start, end, center, stretch). Применяется к Grid-контейнеру.
justify-content: - Выравнивает Grid-контейнер по горизонтали, если общее пространство Grid-элементов меньше, чем Grid-контейнер (start, end, center, space-around, space-between, space-evenly). Применяется к Grid-контейнеру.
align-content: - Выравнивает Grid-контейнер по вертикали, если общее пространство Grid-элементов меньше, чем Grid-контейнер (start, end, center, space-around, space-between, space-evenly). Применяется к Grid-контейнеру.
justify-self: - Выравнивает конкретный Grid-элемент по горизонтали внутри ячейки (start, end, center, stretch). Применяется к Grid-элементу.
align-self: - Выравнивает конкретный Grid-элемент по вертикали внутри ячейки (start, end, center, stretch). Применяется к Grid-элементу.

Пример:

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 100px 100px;
  justify-items: center; /* Выравнивание по горизонтали по центру */
  align-items: center; /* Выравнивание по вертикали по центру */
}

.container div:first-child {
  align-self: start; /* Переопределение выравнивания для первого элемента */
  justify-self: end;
}

Жизненный пример

CSS Grid активно используется в современных веб-фреймворках и библиотеках, таких как Bootstrap и Materialize, для создания адаптивных макетов. Многие сайты используют Grid для верстки сложных страниц, например, страницы новостей с разными блоками контента, или страницы товаров в интернет-магазине.

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

Ключевые моменты

CSS Grid предоставляет мощные инструменты для двумерной верстки.
grid-template-columns и grid-template-rows определяют структуру сетки.
justify-items, align-items, justify-content, align-content, justify-self, align-self позволяют управлять выравниванием элементов внутри Grid-контейнера.
Grid широко используется в современных веб-проектах для создания адаптивных макетов.