Что вы узнаете:

  1. Как построить CSS-сетку, поддерживаемую браузерами.
  2. Как подключить Grid Layout.
  3. Разберетесь в основах строк и столбцов сетки.
  4. Познакомитесь с новой дробной единицей (fr).
  5. Поработаете со вложенными сетками.

ДА! Пора начинать!

Если вы, вдруг, не знаете, что такое CSS Grid, то, в двух словах, это относительно новый стандарт для создания сеток в CSS.

Шаг 1. Построить CSS-сетку, поддерживаемую браузерами

На момент написания этой статьи (9.04.2017) поддержку браузерами CSS Grid нельзя назвать впечатляющей. Тем не менее, это не повод, не пытаться разобраться с ней уже сейчас.

CSS Grid Layout: Простой старт в два шага – хорошее объяснение

Поддержка технологии браузерами

Действие: Обновите ваш Chrome, Firefox, Safari или Opera браузер, или просто скачайте последний Firefox или Chrome.

Шаг 2. Изучить основы Grid Layout

Как и во всем в этой жизни, знание основ поможет вам избежать большого количества головной боли.
Действие: Чтение и написание кода
Взгляните на этот код:

<body>
 
  <aside></aside>
 
  <main></main>
 
</body>

Простой макет страницы. Ничего сложного. Пока что.
Для наглядности (и просто потому что никто не любит уродливые примеры) добавьте элементу body немного цвета:

body {
 
  background-color: rgba(26,188,156 ,1);
 
}

Вот наш результат:

CSS Grid Layout: Простой старт в два шага – хорошее объяснение

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

Добавим немного контента в aside и main.

<body>
 
  <aside>
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
 
  </aside>
 
  <main>
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
 
    <p>Interdum varius sit amet mattis. Amet mattis vulputate enim
nulla aliquet porttitor lacus luctus accumsan. Mattis aliquam faucibus
purus in massa tempor nec feugiat. Neque egestas congue quisque
egestas diam in arcu cursus.</p> 
 
    <p>Pulvinar neque laoreet suspendisse interdum consectetur
libero id faucibus. Quam id leo in vitae turpis.
Blandit libero volutpat sed cras. Tellus at urna condimentum mattis
pellentesque. Mollis nunc sed id semper. Volutpat commodo sed egestas
egestas fringilla phasellus faucibus. Commodo odio aenean sed adipiscing
diam donec adipiscing. Faucibus et molestie ac feugiat sed.
Turpis nunc eget lorem dolor sed viverra ipsum nunc aliquet.</p>
 
<p>Auctor eu augue ut lectus arcu bibendum at varius.
Scelerisque eu ultrices vitae auctor eu augue ut lectus arcu.
Augue interdum velit euismod in. Arcu felis bibendum ut tristique.
Ullamcorper a lacus vestibulum sed arcu.  Maecenas sed enim ut sem.
Eu turpis egestas pretium aenean pharetra.
Condimentum lacinia quis vel eros donec ac.</p>
 
  </main>
 
</body>

 

Main имеет несколько больше текста, чем aside.
Добавим стилей

aside, 
 
main {
 
  background-color: #fff;
 
  padding: 10px;
 
};

Вот, что мы получим:

CSS Grid Layout: Простой старт в два шага – хорошее объяснение

Все как мы и ожидали увидеть

Первое, что нужно знать: Подключение Grid Layout

Как и Флексбокс, Grid Layout начинается с установки grid-container. Забудьте про сложные профессиональные термины, все делается легче легкого

body {
 
  display: grid;
 
}

Элемент body стал родительским контейнером для aside и для main

CSS Grid Layout: Простой старт в два шага – хорошее объяснение

Вид body вообще никак не изменился

Второе, что нужно знать: строки и столбцы сетки

В самом простом случае сетка включает в себя столбцы и строки. Чтобы получить какую-то практическую выгоду от использования Grid layout вы должны определить как строки и столбцы будут располагаться.
Давайте сделаем так, чтобы aside и main шли бок о бок, в две колонки

body {
 
  grid-template-columns: 20% 80%;
 
}
CSS Grid Layout: Простой старт в два шага – хорошее объяснение

Простая сетка в два столбца

grid-template-columns – это свойство сетки. Я не жду, что вы сразу поймете, что это такое.
grid-template-columns определяет, как будут располагаться столбцы сетки, какой ширины или насколько пропорциональны они должны быть. В этом примере первая колонка будет шириной 20%, а вторая – 80%.
Для удобочитаемости добавим немного пространства между колонками

body {
 
  grid-column-gap: 15px;
 
}
CSS Grid Layout: Простой старт в два шага – хорошее объяснение

Очень просто – и никаких margin

grid-column-gap – еще одно новое свойство, с которым вы, возможно, раньше не сталкивались. Оно определяет расстояние между столбцами.
Если вы были внимательны, то заметили что-то странное. Aside имеет ширину 20%, main – 80%. В сумме это дает 100%. grid-column-gap добавляет еще 15px – лишних 15px. Новая ширина сетки теперь превышает 100% (20% + 80% + 15px). Из-за этого один из блоков куда-то сдвинулся и появился горизонтальный скролл, чтобы увидеть эти дополнительные 15px контента.
Это стоит исправить.

Третье, что нужно знать: Дробные единицы

Дробные единицы fr новые для CSS. В отличие от других единиц измерений CSS, они играют важную роль в построении сеток.
Проблема, которую мы упомянули выше, легко решается при помощи дробных единиц

body {
 
  grid-template-columns: 1fr 4fr;
 
  grid-column-gap: 15px;
 
}

Вместо того, чтобы использовать значения 20% и 80%, я использовал 1fr и 4fr соответственно.
Итак, что теперь у нас происходит?
grid-column-gap все еще занимает ширину в 15px. Оставшееся свободное пространство внутри контейнера разделяется в пропорциях 1:4, благодаря дробным единицам (fr).

Ничего страшного, если вы немного запутались. Глубоко вдохните, перечитайте этот раздел еще раз и вы лучше поймете, как это работает.

Четвертое, что нужно знать: Вложенные сетки

Сетки, кстати, могут быть вложенными.
Удалите из main весь контент и заполните его пустыми параграфами

<main>
 
    <p></p>
 
    <p></p>
 
    <p></p>
 
    <p></p>
 
  </main>

А теперь сделайте main грид-контейнером

main {
 
  display: grid;
 
}

Довольно легко.
Распределите место для строк и столбцов. Как насчет двух колонок?

main {
 
  grid-template-columns: 1fr 1fr;
 
  grid-gap: 20px;
 
}

Код выше создал две колонки одинаковой ширины и задал между ними расстояние в 20px

CSS Grid Layout: Простой старт в два шага – хорошее объяснение

Вложенные сетки

Кстати, у aside и main еще установлены padding-и в 10px.
Еще вы можете задавать размеры строк

main {
 
  grid-template-rows: 100px 150px;
 
}
CSS Grid Layout: Простой старт в два шага – хорошее объяснение

Первая строка 100px и вторая 150px

Надеюсь, для первого раза это было не чересчур. Зато теперь вы знаете основы!

Рубрики: CSS