Гриды «на пальцах»

Вкратце напомню о гридах. Гриды — это набор свойств для раскладки элементов на странице или в отдельном элементе. Чтобы включить гриды, нужно задать элементу display: grid и сетку: количество строк и столбцов, размеры и расстояния между ними. Элемент станет грид‑контейнером, а все вложенные в него элементы станут грид‑элементами и займут получившиеся ячейки.

Гриды «на пальцах»

По умолчанию элементы в грид‑контейнере последовательно заполняют его ячейкой за ячейкой, двигаясь слева‑направо и сверху‑вниз. Чтобы переставить или растянуть элемент на несколько ячеек, используют 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>

Meet Dynamic Island

48MP Main camera

The mastermind behind it all

A battery that’s all in, all day.

Film like a Pro.

Shaky shots, stable video

Always‑On display

Tougher than any smartphone glass

Water resistance

Emergency SOS via satellite

A camera in a class by itselfie.

P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.

Веб‑разработка
Отправить
Поделиться
Запинить

Рекомендуем другие советы