Вы начнете верстать на Grid Layout уже сегодня. Спорим?

3 min readMar 19, 2018

Гриды! Гриды! ГРИДЫ! Кажется, они повсюду! Тем не менее, часто слышу, что верстать на них пока не пробовали: “Только разобрался с флексами, а тут опять с чем-то новым ковыряться”.

Хватит планировать, давайте делать! Для того, чтобы начать верстать с использованием гридов, не надо долго и мучительно изучать спецификации. Я покажу простой пример, как собрать несложный лэйаут на гридах, и вы сами увидите, как все просто. Погнали!

CSS Grid Layout — это инструмент для манипулирования элементами в двухмерной системе, то есть позволяющий управлять сразу и строками, и столбцами (в отличие от Flexbox, которые, как правило, являются системой одномерной ). Grid Layout — мощная и гибкая штука. Я соберу классический Holy Grail Layout сначала на флексбоксах, а затем на гридах, чтобы показать, как просто решаются основные проблемы верстки лэйаута без танцев с бубнами.

Наш макет будет состоять из шапки, футера и трехколоночного контента. Вот пример с использованием флексбоксов:

Flexbox example

Футер должен быть прижат книзу, поэтому понадобится обертка, которая займет всю высоту вьюпорта. Внутрь нее мы положим header, content и footer.

<div class="page-wrapper">
  <div class="header">Header</div>
  <div class="content">
    <div class="column column_pos_left">Left</div>
    <div class="column column_pos_center">Center</div>
    <div class="column column_pos_right">Right</div>
  </div>
</div>
<div class="footer"></div>

CSS для этой разметки:

html, body {
  height: 100%;
}.page-wrapper {
  min-height: 100%;
}.header {
  height: 50px;
}.footer {
  height: 100px;
}.content {
  display: flex;
}.column_pos_left,
.column_pos_right {
  width: 20%;
}.column_pos_center {
  width: 60%;
}

Чтобы футер встал на место, подтянем его наверх отрицательным margin-ом, равным по величине его высоте:

.page-wrapper {
  min-height: 100%;
  margin-bottom: -100px;
}

Остается последний момент: если контента будет много, футер “залезет” на него, т.к. мы использовали отрицательный margin. Победить это можно с помощью помещения внутрь content-wrapper буффера, равного по высоте футеру.

<div class="page-wrapper">
  ...
  
  <div class="footer-buffer"></div>
  
</div><div class="footer">Footer</div>/**/.footer-buffer {
  height: 100px;
}

Теперь соберем тот же лэйаут на гридах.

Grid Layout example

Тут никакой дополнительной обертки не понадобится. Просто перечисляем все необходимые элементы внутри grid.

<div class="grid">
  <div class="grid-item header">header</div>
  <div class="grid-item main">main</div>
  <div class="grid-item nav">nav</div>
  <div class="grid-item aside">aside</div>
  <div class="grid-item footer">footer</div>
</div>

Так же, как и в предыдущем примере, растянем сетку на всю высоту вьюпорта.

html,
body {
  height: 100%;
}.grid {
  min-height: 100%;
  display: grid;
}

А дальше начинаем колдовать :)

Я не буду здесь знакомить вас с основными понятиями Grid Layout, все это можно посмотреть в соответствующих гайдах.

Определим области нашего grid layout при помощи свойства grid-template-areas и дадим им названия: header, nav (левая колонка), main (центральная колонка), aside (правая колонка), footer.

.grid {
  grid-template-areas: 'header header header' 'nav main aside' 'footer footer footer';
}

Теперь определяем размеры сетки:

.grid {
  grid-template-columns: 1fr 3fr 1fr;
}.grid {
  grid-template-rows: 50px auto 100px;
}

Здесь у нас появилась новая единица измерения — fr (fraction — доля, дробьная часть). Эта новая единица — лучшая альтернатива использованию %, когда нужно задать относительные размеры элементам сетки. В частности, она позволяет избежать вычислений с использованиям calc, когда надо зафиксировать какую-либо колонку. Подробнее об этом можно прочитать здесь.

И зададим отступы между колонками / строками (для красоты).

.grid {
  grid-column-gap: 10px;
  grid-row-gap: 15px;
}

Итак, мы с вами сделали простой лэйаут на гридах. Так проще? Думаю, да. Конечно, этот пример — только вершина айсберга. Но он нацелен на то, чтобы показать, что начать использовать гриды совсем не страшно. Оговорюсь, что в этом посте я не рассматриваю вопрос кроссбраузерности. Я рассматриваю гриды в разрезе того, насколько просто начать взаимодействовать с этой технологией, и хочу показать, что она достойна того, чтобы потратить немного времени на ее изучение. Дерзайте! :)

Вы начнете верстать на Grid Layout уже сегодня. Спорим?

Written by Liudmila Mzhachikh