Гриды «на пальцах»
Ключевое слово auto
Вкратце напомню о гридах. Гриды — это набор свойств для раскладки элементов на странице или в отдельном элементе. Чтобы включить гриды, нужно задать элементу display: grid и сетку: количество строк и столбцов, размеры и расстояния между ними. Элемент станет грид‑контейнером, а все вложенные в него элементы станут грид‑элементами и займут получившиеся ячейки.
Гриды «на пальцах»
Ключевое слово auto
По умолчанию элементы в грид‑контейнере последовательно заполняют его ячейкой за ячейкой, двигаясь слева‑направо и сверху‑вниз. Чтобы переставить или растянуть элемент на несколько ячеек, используют grid-column и grid-row:
.one {
/* Займи колонки от первой до третьей направляющей */
grid-column: 1 / 3;
/* Встань в первый ряд */
grid-row: 1;
}Если в качестве значений grid‑column или grid‑row задать auto, браузер сам решит, что делать с элементом и его позицией: элементы разместятся в том же порядке, что и в коде, занимая по одной ячейке. Но если использовать auto / span N, то элемент займёт N колонок или строк, начиная с текущего места. Так можно получить «плиточную вёрстку», в которой порядок и размеры элементов определяются их разметкой. Например, как на промостраницах Эпла:
Чтобы сверстать похожий этаж, включим гриды, зададим направляющие и введём четыре вариации плиток:
.grid {
display: grid; /* Включаем раскладку гридами */
grid-template-columns: 1.85fr 1fr 1.85fr; /* Задаём резиновые направляющие для колонок: первая и третья в 1,85 раза больше центральной */
grid-auto-rows: 320px; /* Задаём автоматические направляющие для строк: каждые 320 пикселей */
gap: 20px; /* Задаём межстрочник и межколонник в 20 пк */
background: #161617;
}
.tile {
padding: 15px;
border-radius: 15px;
background: #000;
color: #ffb6ff;
}
/* «Плитка» на одну ячейку */
.tile-1-cols-1-rows {
grid-column: auto / span 1;
grid-row: auto / span 1;
}
/* Плитка на одну колонку и две строки */
.tile-1-cols-2-rows {
grid-column: auto / span 1;
grid-row: auto / span 2;
}
/* Плитка на две колонки и одну строку */
.tile-2-cols-1-rows {
grid-column: auto / span 2;
grid-row: auto / span 1;
}
/* Плитка на 2 колонки и 2 строки */
.tile-2-cols-2-rows {
grid-column: auto / span 2;
grid-row: auto / span 2;
}<div class="grid">
<div class="tile tile-2-cols-2-rows">
<h2>Meet Dynamic Island</h2>
</div>
<div class="tile tile-1-cols-1-rows">
<h2>48MP Main camera</h2>
</div>
<div class="tile tile-1-cols-1-rows">
<h2>The mastermind behind it all</h2>
</div>
<div class="tile tile-1-cols-1-rows">
<p>A battery that’s all in, all day.</p>
</div>
<div class="tile tile-2-cols-1-rows">
<p>Film like a Pro.</p>
</div>
<div class="tile tile-1-cols-2-rows">
<p>Shaky shots, stable video</p>
</div>
<div class="tile tile-2-cols-2-rows">
<h2>Always-On display</h2>
</div>
<div class="tile tile-2-cols-2-rows">
<h2>Tougher than any smartphone glass</h2>
</div>
<div class="tile tile-1-cols-1-rows">
<h2>Water resistance</h2>
</div>
<div class="tile tile-1-cols-2-rows">
<h2>Emergency SOS via satellite</h2>
</div>
<div class="tile tile-2-cols-1-rows">
<p>A camera in a class by itselfie.</p>
</div>
</div>P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.