CSS Grid: верстаем в сетке

Продолжаем сагу о сетках в CSS. Что мы уже знаем:

Сетка (grid) — это один из современных приёмов вёрстки в CSS.
Сетку можно поделить на строки и столбцы и задать им любой размер.
Можно выделить любую область ячеек, объединить их в один класс и управлять ими как одним целым.
Элементами сетки может быть что угодно — текст, фото, видео или любой другой HTML-блок.
Сетку можно сделать адаптивной, чтобы страница хорошо смотрелась на экранах любого размера.

На стиле — подборка интересных CSS-свойств

Теперь поговорим о том, как размещать контент в ячейках сетки и что для этого нужно. Используем для этого сетку 4 × 4 — каждая ячейка пусть будет по 150 пикселей в высоту и ширину.

<!DOCTYPE html>
<html>

<head>
  <title>Grid</title>
  <style>

    body{
      /*настраиваем шрифт*/
      font-family: Arial, Helvetica, sans-serif;
    }

    /*общие настройки сетки*/
    .grid {
      /*рисуем зелёные рамки*/
      border: 5px solid #d1e231;
      /*подключаем сетку*/
      display: grid;
      /*формируем по 4 одинаковых строки и столбца*/
      grid-template-columns: repeat(4, 150px);
      grid-template-rows: repeat(4, 150px);
    } 

    /*внешний вид ячеек*/
    .grid > * {
      /*фоновый цвет*/
      background-color: #ffbf94;
      /*скругление углов*/
      border-radius: 5px;
      /*расстояние от одной границы ячейки до другой*/
      margin: 1px;
    }

  </style>
</head>

<body>
  <!-- создаём контейнер, который будет отвечать за нашу сетку -->
  <div class="grid">
    <!-- и создаём 16 вложенных элементов -->
    <div>Элемент 1</div>
    <div>Элемент 2</div>
    <div>Элемент 3</div>
    <div>Элемент 4</div>
    <div>Элемент 5</div>
    <div>Элемент 6</div>
    <div>Элемент 7</div>
    <div>Элемент 8</div>
    <div>Элемент 9</div>
    <div>Элемент 10</div>
    <div>Элемент 11</div>
    <div>Элемент 12</div>
    <div>Элемент 13</div>
    <div>Элемент 14</div>
    <div>Элемент 15</div>
    <div>Элемент 16</div>
  </div>
</body>
</html>

Заполнение блоков по очереди

Самый простой способ добавить что-то в сетку — прописать в блоке <div>, что нам нужно. Например, можем заполнить часть нашей сетки текстом, а часть — картинками:

<!DOCTYPE html>
<html>

<head>
  <title>Grid</title>
  <style>

    body{
      /*настраиваем шрифт*/
      font-family: Arial, Helvetica, sans-serif;
    }

    /*общие настройки сетки*/
    .grid {
      /*рисуем зелёные рамки*/
      border: 5px solid #d1e231;
      /*подключаем сетку*/
      display: grid;
      /*формируем по 4 одинаковых строки и столбца*/
      grid-template-columns: repeat(4, 150px);
      grid-template-rows: repeat(4, 150px);
    } 

    /*внешний вид ячеек*/
    .grid > * {
      /*фоновый цвет*/
      background-color: #ffbf94;
      /*скругление углов*/
      border-radius: 5px;
      /*расстояние от одной границы ячейки до другой*/
      margin: 1px;
    }

    img{
      border-radius: 5px;
      width: 100%;
      height: 100%;
      object-fit: cover;

    }

    p{
      padding-left: 5px;
      padding-right: 5px;
    }

  </style>
</head>

<body>
  <!-- создаём контейнер, который будет отвечать за нашу сетку -->
  <div class="grid">
    <!-- и создаём 16 вложенных элементов -->
    <div><p>Привет, это журнал «Код!»</p></div>
    <div> <img src="https://images.unsplash.com/photo-1576662712957-9c79ae1280f8?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxzZWFyY2h8M3x8Y29tcHV0ZXJzfGVufDB8MnwwfA%3D%3D&auto=format&fit=crop&w=600&q=60"> </div>
    <div> <img src="https://images.unsplash.com/photo-1606248897732-2c5ffe759c04?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxzZWFyY2h8NHx8Y29tcHV0ZXJzfGVufDB8MnwwfA%3D%3D&auto=format&fit=crop&w=600&q=60"></div>
    <div>Элемент 4</div>
    <div> <img src="https://images.unsplash.com/photo-1571126770586-00abdc935bd7?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxzZWFyY2h8MjB8fGNvbXB1dGVyc3xlbnwwfDJ8MHw%3D&auto=format&fit=crop&w=600&q=60"></div>
    <div>Элемент 5</div>
    <div>Элемент 6</div>
    <div> <img src="https://images.unsplash.com/photo-1606018742629-dc27dee20e28?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxzZWFyY2h8OXx8Y29tcHV0ZXJzfGVufDB8MnwwfA%3D%3D&auto=format&fit=crop&w=600&q=60"></div>
    <div> <img src="https://images.unsplash.com/photo-1493119508027-2b584f234d6c?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxzZWFyY2h8N3x8Y29tcHV0ZXJzfGVufDB8MnwwfA%3D%3D&auto=format&fit=crop&w=600&q=60"></div>
    <div>Элемент 10</div>
    <div><p>Сейчас все привыкли к тому, что в телефонах много памяти — от 128 гигабайт и выше.</p></div>
    <div><p>Если телефон поддерживает карты памяти большой ёмкости, то можно вставить туда microSD-карточку </p></div>
    <div><p>и получить дополнительно хоть терабайт.</p></div>
    <div> <img src="https://images.unsplash.com/photo-1587653915936-5623ea0b949a?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxzZWFyY2h8MTR8fGNvbXB1dGVyc3xlbnwwfDJ8MHw%3D&auto=format&fit=crop&w=600&q=60"></div>
    <div> <img src="https://images.unsplash.com/photo-1586244346400-7ec57cda0c8b?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxzZWFyY2h8MjF8fGNvbXB1dGVyc3xlbnwwfDJ8MHw%3D&auto=format&fit=crop&w=600&q=60"></div>
    <div><p> Но вы видели те карточки? Они же невероятно малы!</p></div>
  </div>
</body>
</html>

Чтобы картинки у нас подгонялись точно под размер сетки, мы использовали свойство object-fit: cover — оно увеличивает или уменьшает размер картинки так, чтобы она подгонялась под нужное место.

Ещё мы добавили отдельный стиль для абзацев с текстом и сделали в нём отступы слева и справа, чтобы текст не прилипал к границам ячеек. Там, где мы не использовали тег <p> (элементы 4,5,6 и 10), текст прижался к краям и выглядит неопрятно.

Работаем с областью

Область — это одна или несколько соседних ячеек в сетке. Чтобы управлять областью в сетке, нужно сначала прописать для неё отдельный класс, а потом указать его в одном из блоков.

Допустим, нам нужно, чтобы самая первая фотография в нашем последнем примере занимала не одну ячейку, а четыре — по две с каждой стороны. Для этого сделаем новую область:

.oblast-1 {

  grid-column: span 2;

  grid-row: span 2;

}

Теперь применим этот класс к нашей картинке:

<div class="oblast-1"> <img  src="https://images.unsplash.com/photo-1576662712957-9c79ae1280f8? ixlib=rb- 1.2.1&ixid=MXwxMjA3fDB8MHxzZWFyY2h8M3x8Y29tcHV0ZXJzfGVufDB8M nwwfA%3D%3D&auto=format&fit=crop&w=600&q=60"> </div>

Сетка автоматически передвинула остальные блоки на другие места, потому что у нас появилась новая большая область. Но если мы в HTML-коде переставим эту строку вниз, то и картинка тоже уедет вниз. Вот что произойдёт, если мы передвинем этот блок с картинкой на три строки ниже:

Элементы сетки снова перетасовались, потому что большой блок уехал ниже. Если нам нужно, чтобы эта большая картинка всё время стояла наверху, как в предыдущем варианте, то при создании области нужно прямо указать, где она должна стоять:

.oblast-2 {

      grid-row-start: 1;

      grid-row-end: 3;

      grid-column-start: 2;

      grid-column-end: 4;

    }

Здесь мы говорим браузеру, что область oblast-2 занимает расстояние от первой до третьей линии по горизонтали и от второй до четвёртой по вертикали. Если с линиями пока сложно — почитайте наш вводный материал по сетке, мы там подробно разбираем, что это за линии и откуда они берутся.

После этого мы можем переместить наш блок в любое место в коде, даже опустить в самый низ, и картинка всё равно останется на своём месте:

<!-- создаём контейнер, который будет отвечать за нашу сетку -->
<div class="grid">


<!-- и создаём 16 вложенных элементов -->
  <div><p>Привет, это журнал «Код!»</p></div>
  <div> <img src="https://images.unsplash.com/photo-1606248897732-2c5ffe759c04?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxzZWFyY2h8NHx8Y29tcHV0ZXJzfGVufDB8MnwwfA%3D%3D&auto=format&fit=crop&w=600&q=60"></div>
  <div>Элемент 4</div>
  <div> <img src="https://images.unsplash.com/photo-1571126770586-00abdc935bd7?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxzZWFyY2h8MjB8fGNvbXB1dGVyc3xlbnwwfDJ8MHw%3D&auto=format&fit=crop&w=600&q=60"></div>
  <div>Элемент 5</div>

  <div>Элемент 6</div>
  <div > <img src="https://images.unsplash.com/photo-1606018742629-dc27dee20e28?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxzZWFyY2h8OXx8Y29tcHV0ZXJzfGVufDB8MnwwfA%3D%3D&auto=format&fit=crop&w=600&q=60"></div>
  <div> <img src="https://images.unsplash.com/photo-1493119508027-2b584f234d6c?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxzZWFyY2h8N3x8Y29tcHV0ZXJzfGVufDB8MnwwfA%3D%3D&auto=format&fit=crop&w=600&q=60"></div>
  <div>Элемент 10</div>
  <div><p>Сейчас все привыкли к тому, что в телефонах много памяти — от 128 гигабайт и выше.</p></div>
  <div><p>Если телефон поддерживает карты памяти большой ёмкости, то можно вставить туда microSD-карточку </p></div>
  <div><p>и получить дополнительно хоть терабайт.</p></div>
  <div> <img src="https://images.unsplash.com/photo-1587653915936-5623ea0b949a?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxzZWFyY2h8MTR8fGNvbXB1dGVyc3xlbnwwfDJ8MHw%3D&auto=format&fit=crop&w=600&q=60"></div>
  <div> <img src="https://images.unsplash.com/photo-1586244346400-7ec57cda0c8b?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxzZWFyY2h8MjF8fGNvbXB1dGVyc3xlbnwwfDJ8MHw%3D&auto=format&fit=crop&w=600&q=60"></div>
  <div><p> Но вы видели те карточки? Они же невероятно малы!</p></div>


  <div class="oblast-2"> <img src="https://images.unsplash.com/photo-1576662712957-9c79ae1280f8?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxzZWFyY2h8M3x8Y29tcHV0ZXJzfGVufDB8MnwwfA%3D%3D&auto=format&fit=crop&w=600&q=60"> </div>

</div>

Блок с картинкой стоит в самом конце кода, а сама картинка в сетке — на нужном месте.

А ещё можно сделать один большой блок на всю ширину сетки: объединить 4 ячейки подряд — получится шапка сайта:

.oblast-2 {

      grid-row-start: 1;

      grid-row-end: 2;

      grid-column-start: 1;

      grid-column-end: 5;

    }

Как управлять отдельной ячейкой

Ячейка — это самая маленькая доступная область в сетке. Для этого нужно создать новую область, куда будет входить только эта ячейка, например, так:

.oblast-3 {

      grid-row-start: 2;

      grid-row-end: 3;

      grid-column-start: 2;

      grid-column-end: 3;

    }

Сетка — это универсальный инструмент

В ней можно заверстать что угодно:

текст в несколько колонок;
галерею с картинками;
картинки с поясняющим текстом;
видео вперемешку с текстом;
рекламные баннеры;
полноценный сайт с шапкой, подвалом и боковым меню;
что угодно ещё.

В финальной статье про сетку мы покажем, как с её помощью можно сделать свой полноценный сайт-портфолио — с навигацией, разделами и красивыми фотографиями.

Текст, иллюстрации и редактура

Михаил Полянин

Обложка

Даня Берковский

Вёрстка

Мария Дронова

Корректор

Ирина Михеева

Соцсети

Олег Вешкурцев

Во имя порядка на страницах.

Вы фронтендер? Гляньте сюда ↓