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

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

Илья Лесик

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

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

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

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. Создайте контейнер
2. Добавьте к нему display: flex
3. В сложных случаях используйте display: grid
4. Настройка растягивания и выравнивания элементов

Селектор * + *

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.

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

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.

Ссылки