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

У нас идёт цикл ста­тей о совре­мен­ном CSS: как на нём соби­рать шту­ки, о кото­рых рань­ше мы мог­ли толь­ко меч­тать. В про­шлый раз мы гово­ри­ли о CSS-сетке Grid. Сего­дня мы её будем настраивать.

Корот­ко глав­ное из пер­вой части:

  • В CSS есть мно­го спо­со­бов рас­ста­вить объ­ек­ты на стра­ни­це: по абсо­лют­ным коор­ди­на­там, отно­си­тель­но друг дру­га, закре­пив в каком-то месте стра­ни­цы и т. д. 
  • Один из полез­ных для веб-разработчика спо­со­бов — раз­де­лить стра­ни­цу на столб­цы и стро­ки, как буд­то это таб­ли­ца или сет­ка. И внут­ри этой сет­ки рас­ста­вить объекты.
  • Инстру­мент Grid как раз помо­га­ет нари­со­вать на стра­ни­це вооб­ра­жа­е­мую сет­ку и вырав­ни­вать объ­ек­ты по ней.
  • Grid доста­точ­но гиб­кий, что­бы учесть меня­ю­щу­ю­ся шири­ну экра­на и пред­ска­зу­е­мо управ­лять столб­ца­ми и строками.

Сего­дня пора­бо­та­ем с раз­ме­ром яче­ек сет­ки, что­бы в сле­ду­ю­щий раз собрать из них что-то дей­стви­тель­но полезное. 

Готовим шаблон

Нач­нём с пусто­го шаб­ло­на. Что­бы было нагляд­но вид­но, как в сет­ке рас­по­ла­га­ют­ся ячей­ки, сде­ла­ем так:

  1. Созда­дим общий класс, кото­рый будет отве­чать за сет­ку цели­ком. Пока не будем делать раз­бив­ку на стро­ки и столбцы.
  2. В нём сде­ла­ем види­мые внеш­ние гра­ни­цы — так мы пой­мём, како­го раз­ме­ра сет­ка у нас получается.
  3. Каж­дую ячей­ку закра­сим светло-оранжевым цве­том, что­бы видеть, где закан­чи­ва­ет­ся одна ячей­ка и начи­на­ет­ся другая.
  4. Доба­вим в оформ­ле­ние яче­ек отсту­пы и скруг­ле­ния для красоты.
  5. После это­го в теле стра­ни­цы созда­дим новый блок и при­ме­ним к нему наш стиль с сеткой.
  6. Доба­вим 10 новых эле­мен­тов в сет­ку и посмот­рим, что получится.

<!DOCTYPE html>
<html>

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

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

    /*общие настройки сетки*/
    .grid {
      /*рисуем зелёные рамки*/
      border: 5px solid #d1e231;
      /*подключаем сетку*/
      display: grid;
    } 

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

  </style>
</head>

<body>
  <!-- создаём контейнер, который будет отвечать за нашу сетку -->
  <div class="grid">
    <!-- и создаём 10 вложенных элементов -->
    <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>
</body>
</html>

Вот что у нас полу­ча­ет­ся, если у сет­ки не зада­вать ника­ких параметров:

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

Формируем строки и столбцы

Давай­те посмот­рим, как добав­ле­ние строк и столб­цов в сет­ку вли­я­ет на поло­же­ние и раз­мер ячеек. 

Сде­ла­ем в сет­ке три колон­ки по 150 пикселей:

grid-template-columns: 150px 150px 150px;

Сет­ка сра­зу умень­ши­лась по высо­те, под­стра­и­ва­ясь под коли­че­ство эле­мен­тов. Теперь ука­жем нуж­ную высо­ту для элементов:

grid-template-rows: 50px;

Смот­ри­те, высо­та поме­ня­лась толь­ко у пер­вой стро­ки. Осталь­ные оста­лись той же высо­ты, что и рань­ше, пото­му что мы ука­за­ли толь­ко один пара­метр в коман­де grid-template-rows. Сде­ла­ем 5 строк оди­на­ко­вой высоты:

grid-template-rows: 50px 50px 50px 50px 50px ;

Так как мы явно ука­за­ли, что нам в сет­ке нуж­но 5 строк, то у нас появи­лась пустая пятая стро­ка. В ней пока ника­ких эле­мен­тов, но сет­ка уже преду­смот­ре­ла для них сво­бод­ное место.

Что­бы не писать пять раз под­ряд раз­мер 50px, мож­но исполь­зо­вать такую команду:

grid-template-rows: repeat(5, 50px);

Она повто­ря­ет нуж­ный нам раз­мер (50 пик­се­лей) опре­де­лён­ное коли­че­ство раз — в нашем слу­чае это 5 раз. То же самое рабо­та­ет и с колон­ка­ми — сде­ла­ем 4 оди­на­ко­вые колон­ки исполь­зуя функ­цию repeat():

grid-template-columns: repeat(4, 150px);

Адаптивные размеры и автозаполнение

Теперь сде­ла­ем так:

  • поста­вим три стро­ки вме­сто пяти;
  • послед­нюю стро­ку рас­тя­нем вниз до кон­ца окна — исполь­зу­ем для это­го 1fr;
  • столб­цы сде­ла­ем оди­на­ко­вой ширины.

Запи­шем это в раз­де­ле со стилями:

grid-template-rows: 50px 1fr 50px;

grid-template-columns: repeat(4, 1fr);

Кажет­ся, что 1fr, кото­рый дол­жен был рас­тя­нуть вто­рую стро­ку на всё сво­бод­ное место, не рабо­та­ет. Но с ним всё в поряд­ке, ошиб­ки тут нет, смот­ри­те, что про­изо­шло на самом деле:

  1. Пер­вая стро­ка полу­чи­ла шири­ну 50 пикселей.
  2. Тре­тья стро­ка тоже полу­чи­ла 50 пикселей.
  3. После это­го бра­у­зер, гля­дя на 1fr, стал высчи­ты­вать, какую высо­ту сде­лать у вто­рой строки.
  4. Бра­у­зер зна­ет, что 1fr дол­жен запол­нить всё остав­ше­е­ся сво­бод­ное место в сет­ке, но у нас ниж­няя гра­ни­ца сет­ки при­ле­га­ет вплот­ную к послед­ней строке.
  5. Это зна­чит, что сво­бод­но­го места в сет­ке нет, поэто­му бра­у­зер учёл все внут­рен­ние отсту­пы из общих настро­ек ячей­ки и сде­лал вто­рую стро­ку мини­маль­ной высоты.

Что­бы это испра­вить, нам нуж­но явно задать общую высо­ту сет­ки — напри­мер в пикселях:

height: 300px;

Что­бы сет­ка рас­тя­ну­лась по высо­те на всё окно, исполь­зу­ют отно­си­тель­ные еди­ни­цы, напри­мер, vh — она ука­зы­ва­ет, сколь­ко про­цен­тов от высо­ты окна будет зани­мать эле­мент. Что­бы рас­тя­нуть сет­ку до края, напишем:

height: 100vh;

Поло­сы про­крут­ки появи­лись из-за того, что общий раз­мер сет­ки у нас боль­ше 100% высо­ты окна — к высо­те доба­ви­лись внеш­ние и внут­рен­ние отсту­пы сетки.

Если нам нуж­но сде­лать столб­цы и стро­ки в опре­де­лён­ных про­пор­ци­ях, так­же исполь­зу­ем fr — он под­го­нит всё под раз­мер окна:

height: 92vh;

grid-template-columns: 1fr 2fr 2fr 1fr ;

grid-template-rows: 50px 1fr 50px;

Теперь у нас полу­чил­ся кра­си­вый шаб­лон на 12 ячеек:

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

Исполь­зуя нуж­ные раз­ме­ры, авто­за­пол­не­ние и полез­ные функ­ции из нашей под­бор­ки совре­мен­ных CSS-команд, мож­но полу­чить любой шаб­лон для вёрст­ки страницы.

Что дальше

Ста­тья полу­чи­лась боль­шой, поэто­му про рабо­ту с ячей­ка­ми и обла­стя­ми сет­ки пого­во­рим в дру­гой раз. А потом свер­ста­ем на сет­ке пол­но­цен­ную страницу-портфолио.

Текст, код и скрин­шо­ты:
Миха­ил Полянин

Редак­тор:
Мак­сим Ильяхов

Худож­ник:
Даня Бер­ков­ский

Кор­рек­тор:
Ири­на Михеева

Вёрст­ка:
Лео­нид Долгов

Соц­се­ти:
Олег Веш­кур­цев