Grid Layout
Мощная система сеток, доступная в CSS, которая позволяет гибко управлять макетом веб-страниц, организуя элементы в строки и столбцы. Она была разработана для создания более сложных, но при этом гибких и адаптивных макетов, не прибегая к хакам с float или позиционированием.
В предыдущих уроках у нас уже была тема сеток. Там мы выстраивали сетку за счет свойства inline-block, но для практики будет полезно знать и другие возможности решения задач с сетками.
Основные концепции Grid Layout:
- Контейнер сетки (Grid Container): Элементы, к которым применяется свойство
display: grid;
, становятся контейнером сетки. Все дочерние элементы внутри этого контейнера автоматически становятся элементами сетки (grid items).
Код скопирован в буфер обмена
- Строки и столбцы (Grid Rows and Columns): Сетка состоит из горизонтальных строк и вертикальных столбцов. Для их настройки используется свойство
grid-template-rows
(для строк) и
grid-template-columns
(для столбцов). Например создадим три столбца по 200px и две строки по 100px.:
Код скопирован в буфер обмена
.grid_container {
display: grid;
grid-template-columns: 200px 200px 200px; /* Три столбца фиксированной ширины */
grid-template-rows: 100px 100px; /* Две строки фиксированной высоты */
- Фракции (Fraction units): Единица измерения
fr
— это особая единица в Grid Layout, которая позволяет делить свободное пространство. Например, если указать
1fr 2fr
, первый столбец займет 1 часть пространства, а второй — 2 части.
Код скопирован в буфер обмена
.grid_container {
display: grid;
grid-template-columns: 1fr 2fr; /* Второй столбец будет в два раза шире первого */
- Автоматическая расстановка строк и столбцов (auto): Вместо указания фиксированных размеров можно использовать
auto
, чтобы браузер сам определил размер строк и столбцов в зависимости от содержимого:
Код скопирован в буфер обмена
.grid_container {
display: grid;
grid-template-columns: 200px auto; /* Второй столбец займет оставшееся пространство */
- Разрыв сетки (Grid Gap): Чтобы добавить расстояние между строками и столбцами, используется свойство
gap
. Например:
Код скопирован в буфер обмена
.grid_container {
display: grid;
grid-template-columns: 1fr 2fr;
grid-gap: 20px; /* Пробел между строками и столбцами */
- Расположение элементов (Grid Item Placement): Элементы внутри контейнера сетки можно явно размещать в нужных местах. Например, с помощью свойств
grid-column
и
grid-row
можно задать, какие ячейки сетки будут занимать элементы.
Код скопирован в буфер обмена
.grid_item {
grid-column: 1 / 3; /* Элемент растянется с 1-го по 3-й столбец */
grid-row: 2 / 4; /* Элемент будет охватывать 2-ю и 3-ю строки */
- Автоматическое размещение (Auto Placement): Если не указано явное позиционирование, Grid Layout автоматически разместит элементы сетки в первой доступной ячейке.
- Повторяющиеся строки или столбцы (repeat): Функция
repeat ( )
помогает легко создавать повторяющиеся строки или столбцы:
Код скопирован в буфер обмена
.grid_container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* Три столбца одинаковой ширины */
Пример сетки Grid Layout
-
grid-template-columns: repeat(3, 1fr);
— три столбца одинаковой ширины. Единица измерения
1fr
означает, что каждый столбец займет равную часть доступного пространства.
-
grid-gap: 10px;
— расстояние между элементами сетки составляет 10px.
Grid Layout значительно упрощает создание сложных макетов страниц, поддерживая гибкость и адаптивность. Это мощный инструмент для веб-разработки, особенно для построения многострочных и многоколоночных макетов.
Практика
Ссылка на макет сайта: www.figma.com/design
В этом уроке мы сделаем Каталог товаров на сайте, но сделаем мы только его визуальную часть. Интерактив будем добавлять позже.
Первым делом анализируем блок: из каких элементов он состоит, какие теги применять и как позиционировать элементы относительно друг-друга.
- Заголовок второго уровня;
- Группа карточек товаров и тут мы уже знаем, что повторяющиеся блоки можно оформлять списком;
- Кнопка.
Базовая структура с контентом:
Код скопирован в буфер обмена
<main>
<article>
<h2> </h2>
<ul>
li*8
</ul>
<button> </button>
</article>
</main>
Сверяемся с сайтом:
Начинаем оформлять стили. Создаём классы и пишем CSS код.
Код скопирован в буфер обмена
<main>
<article class="flex catalog">
<h2 class="second_heading"> </h2>
<ul class="list_reset catalog_list">
li*8
</ul>
<button class="btn_reset catalog_btn"> </button>
</article>
</main>
Для начала поставим весь контент этого блока по центру. Так как свойство flex-блоков и сброс настроек списка и кнопки у нас уже определено, на сайте мы видим только два текста:
Сейчас покажу последовательность вёрстки:
- устанавливаем ограничение по ширине блока согласно макету:
Код скопирован в буфер обмена
.catalog {
max-width: 1236px;
}
- ставим весь блок по центру относительно родительского контейнера (всей страницы) и назначаем нижний отступ:
Код скопирован в буфер обмена
.catalog {
max-width: 1236px;
margin: 0 auto;
margin-bottom: 55px;
}
- выставляем контент в колонну и по центру:
Код скопирован в буфер обмена
.catalog {
max-width: 1236px;
margin: 0 auto;
margin-bottom: 55px;
flex-direction: column;
align-items: center;
}