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

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

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

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

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

grid верстка css3

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

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

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

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

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

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

В поисках шаблона для сайта?