CSS Grid Layout

CSS4 не будет
CSS2017

CSS Grid Layout Module Level 1

.container {
    display: grid;
}

Профит

Разметка любой сложности

на нативном CSS

Описывается в стилях

Адаптация с помощью media-запросов

Порядок следования элементов в разметке любой

Выравнивание

как у флексов

(Box Alignment Module)

Grid vs Flex

Grid + Flex

Flexbox

• раскладка только в одном направлении
• дополнительные контейнеры-обёртки
• подстраивается под контент, а не наоборот

Закодим

github.com/meuwka/dev-talks-css-grid

youtube.com/watch?v=hG8avHeD9fs

Когда начинать использовать?

caniuse.com/#feat=css-grid

Vote!

meyerweb.com/eric/thoughts/2016/12/05/css-grid/

• фолбек через @supports — двойная работа
• возможны недоработки и баги
• подсеток в первых релизах не будет

Why not

• (EN) Grid by Example
• (EN) A Complete Guide to Grid
• (RU, video) Можно вообще всё. Раскладка по гриду