CSS сетка — элементарное использование grid-верстки

Вы когда-то слышали про CSS Grid, но никогда не сталкивались с этим на реальных проектах? Что же, верстальщиков, подобных Вам, очень много, но вправе ли они называться верстальщиками, не попробовав технологию CSS сетки? Давайте разберемся.

Вы, возможно, могли слышать, как талантливые люди, такие как Рейчел Эндрю и Джен Симмонс (авторы работ по верстке) выступают за использование сетки CSS. Они очень много общаются в социальных сетях на layout-темы, которые бывает интересно почитать даже разработчикам со стажем.

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

Допустим, вы хотите шаблон в две колонки. Предположим, на макете это должно выглядеть так:

До сих пор Вы использовали хаки элементов Float (left/right) и даже модель Flexbox, чтобы реализовать этот макет. Как ни странно, но даже для этого решения использования технологии Flexbox будет не идеальным вариантом. Представим, что Вам потребуется для выполнения этой задачи. HTML код:

<div class="wrapper">
<section class="main-column">
Ваш блок для контента.
</section>

<aside class="sidebar">
Ваш сайдбар.
</aside>
</div>

И CSS будет что-то вроде этого:

.wrapper {
display: flex;
}

.main-column {
width: 70%;
/* Добавим отступы к левому блоку. */
padding-right: 2rem;
}

.sidebar {
width: 30%;
}

Такое никуда не годися. Для этого «раствора» нужно 10 строк кода, чтобы сверстать наш макет. Теперь давайте сделаем это с  помощью CSS Grid:

.wrapper {
  display: grid;
  grid-template-columns: 70% 30%;
  grid-gap: 2rem;
}

Вот теперь отлично. Код сетки выглядит устрашающе, но его простота и универсальность станет удивительным инструмент для Вас. Рекомендуем перестраховаться и использовать специальные флаги для браузеров, давайте перепишем это, как запасной вариант:

/* Если браузер поддерживает сетку, он будет использовать этот код */
@supports (display: grid) {
  .wrapper {
    display: grid;
    grid-template-columns: 70% 30%;
    grid-gap: 2rem;
  }
}

/* Если браузер не поддерживает сетку, он будет использовать этот код */
@supports not (display: grid) {
  .wrapper {
    display: flex;
  }

  .main-column {
    width: 70%;
    padding-right: 2rem;
  }

  .sidebar {
    width: 30%;
  }
}

Изящно, неправда ли? Без каких либо трудностей мы обеспечили 100% рабочую версию макета. Если Вас заинтересовал такой вариант — Вам обязательно необходимо ознакомиться со всеми свойствами CSS Grid. Удачи!

Источник: theboldreport.net