Гриды «на пальцах»
Раскладка
Вкратце напомню о гридах. Гриды — это набор свойств для раскладки элементов на странице или в отдельном элементе. Чтобы включить гриды, нужно задать элементу display: grid и сетку: количество строк и столбцов, размеры и расстояния между ними. Элемент станет грид‑контейнером, а все вложенные в него элементы станут грид‑элементами и встанут по направляющим:
Гриды «на пальцах»
Раскладка
<div class="columns">
<div>Первая колонка</div>
<div>Вторая колонка</div>
<div>Первая колонка</div>
<div>Вторая колонка</div>
</div>
<style>
.columns {
/* Включаем гриды */
display: grid;
/* Задаём две колонки, два ряда
и отступ между ними */
grid-template-columns: 100px 150px;
grid-template-rows: 100px 150px;
gap: 18px;
}
</style>По умолчанию элементы в грид‑контейнере последовательно заполняют его ячейкой за ячейкой, двигаясь слева‑направо и сверху‑вниз. Чтобы растянуть элемент на несколько ячеек, используют grid-column и grid-row. С помощью них мы указываем начальную и конечную направляющие, соответственно, всё пространство между ними отдаётся элементу:
.grid {
display: grid;
/* Три колонки, равномерно делящие пространство */
grid-template-columns: repeat(3, 1fr);
/* Пять строк с минимальной высотой в 100 пк */
grid-template-rows: repeat(5, minmax(100px, auto));
gap: 18px;
}
.one {
/* Займи колонки от первой до третьей направляющей */
grid-column: 1 / 3;
/* Встань в первый ряд */
grid-row: 1;
}
.two {
/* Займи две колонки, начиная со второй направляющей */
grid-column: 2 / span 2;
/* Займе два ряда, начиная со второй направляющей */
grid-row: 1 / span 2;
}
.three {
/* Встань в первую колонку */
grid-column: 1;
/* Займи строки от второй до пятой направляющей */
grid-row: 2 / 5;
}
.four {
grid-column: 3;
grid-row: 3 / span 2;
}
.five {
grid-column: 2;
grid-row: 4 / span 2;
}
.six {
grid-column: 1;
grid-row: 5;
}
Чтобы не путаться в цифрах, можно задать именованные области и использовать их:
article {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 50px 1fr 5px;
gap: 18px;
}
article header {
grid-column: 1 / span 3;
grid-row: 1;
}
article main {
grid-column: 1 / span 2;
grid-row: 2;
}
article aside {
grid-column: 3;
grid-row: 2;
}
article footer {
grid-column: 1 / span 3;
grid-row: 3;
}article {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 50px minmax(100px, 1fr) 50px;
grid-template-areas:
"header header header"
"main main aside"
"footer footer footer";
gap: 18px;
}
article header {
grid-area: header;
}
article main {
grid-area: main;
}
article aside {
grid-area: aside;
}
article footer {
grid-area: footer;
}headermainЧто запомнить
По умолчанию грид‑элементы последовательно заполняют контейнер ячейку за ячейкой.
Чтобы растянуть элемент на несколько колонок, используем grid-column, на несколько строк — grid-row
Чтобы не мучаться с номерами направляющих, можно использовать именованные области: задать их с помощью grid-template-areas, использовать — с помощью grid-area
Ещё по теме
P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.