Верстаем в сетке
Прокачиваем навыки CSS: GRID Создаём CSS-сетку нужного размера
Верстаем в сетке

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

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

Теперь пого­во­рим о том, как раз­ме­щать кон­тент в ячей­ках сет­ки и что для это­го нуж­но. Исполь­зу­ем для это­го сет­ку 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;

    }

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

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

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

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

Текст, иллю­стра­ции и редак­ту­ра:
Миха­ил Полянин
Облож­ка:
Даня Бер­ков­ский
Вёрст­ка:
Мария Дро­но­ва
Кор­рек­тор:
Ири­на Михеева
Соц­се­ти:
Олег Веш­кур­цев

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