Flexbox и Grid: кейсы из реальной жизни

Илья Лесик

Flexbox и Grid: кейсы из реальной жизни

Илья Лесик

VK @ilialesik
Telegram @ilialesik
Twitter @ilialesik

Верстка раньше

Набор хаков

Верстка сейчас

Декларативность

Адаптируемая шапка

Десктоп:

Планшет:

Телефон:

Контейнер с элементами

See the Pen 1. Header without layout by ilia (@ilialesik) on CodePen.

Добавим display: flex;

See the Pen 2. Header without layout + flex by ilia (@ilialesik) on CodePen.

Добавим flex-grow, flex-shrink

See the Pen 3. Header without layout + flex: 1 by ilia (@ilialesik) on CodePen.

Планшет

See the Pen 4. Header + tablet by ilia (@ilialesik) on CodePen.

Телефон

See the Pen 5. Header + phone by ilia (@ilialesik) on CodePen.

Переделаем на гриды

See the Pen 5. Header + grid by ilia (@ilialesik) on CodePen.

Планшет

See the Pen 6. Header + grid+ tablet by ilia (@ilialesik) on CodePen.

Телефон

See the Pen 7. Header + grid+ phone by ilia (@ilialesik) on CodePen.

Как сверстать лейаут

  1. Создайте контейнер

Gap между блоками

Селектор * + *

See the Pen Fixed space between flexbox items by ilia (@ilialesik) on CodePen.

grid-auto-flow

See the Pen Equal size between items (grid) by ilia (@ilialesik) on CodePen.

Firefox >= 63 поддерживает [grid-][row-/column-]gap для display: flex;

See the Pen Equal size between items (grid) by ilia (@ilialesik) on CodePen.

Типичный кейс для гридов

Сразу берем гриды

See the Pen 3 columns, filter, pagination with content by ilia (@ilialesik) on CodePen.

Кейс: шаблон для блога

margin: auto

See the Pen Blog template (margin auto) by ilia (@ilialesik) on CodePen.

...переделаем на гриды

See the Pen Blog template (grid) by ilia (@ilialesik) on CodePen.

...и получим более гибкий лейаут

See the Pen Blog template+help (grid) by ilia (@ilialesik) on CodePen.

Высокоуровневость спецификации

Набор хаков

Flexbox

Grid

Grid + grid-area

?

Свойства элементов

Свойства контейнера

Где определяется лейаут?

Есть раскладки, которые нельзя сделать без JavaScript

Pinterest (Masonry layout)

See the Pen CSS Grid Masonry (Step 10) by Andy Barefoot (@andybarefoot) on CodePen.

Splitter

See the Pen Resizable Splitter Panels by ilia (@ilialesik) on CodePen.

Ссылки

Tver.io Flex Grid - a Collection by Ilia Lesik on CodePen
A Complete Guide to Flexbox | CSS-Tricks
A Complete Guide to Grid | CSS-Tricks
Gap properties working in Flexbox at FirefoxNightly
Breaking out with CSS Grid explained
CSS Layout cookbook