CSS Grid Layout

by Andrey Makarov

Системы построения сетки

Bootstrap / Foundation
Основаны на Flexbox (Flex Grid Framework, Flexbox Grid, и т.д.)
Основаны на PostCSS – LostGrid
@mdo/table-grid

Хочу попробовать

Chrome: chrome://flags/#enable-experimental-web-platform-features
Opera: opera://flags/#enable-experimental-web-platform-features
Firefox: about:config — layout.css.grid.enabled

CSS Grid Polyfill

Создаём grid-контейнер

			.grid {
				display: grid;
			}

Создаём колонки

Делим пополам

			.grid {
				display: grid;
				grid-template-columns: 1fr 1fr;
			}

А теперь на три…

			.grid {
				display: grid;
				grid-template-columns: 1fr 1fr 1fr;
			}

fr – fraction

Доля оставшегося пространства

:3

			.grid { grid-template-columns: repeat(6, 1fr); }

Фиксированный размер и всё остальное

			.grid {
				display: grid;
				grid-template-columns: 80px 1fr 80px;
				grid-template-rows: 80px 1fr 80px;
			}

			.grid {
				display: grid; grid: 60px 1fr 80px / repeat(3, 1fr);
			}

Разметка вручную 🕶

Грид-линии

				.element {
					grid-column-start: 3;
					grid-column-end: 4;
					grid-row-start: 2;
					grid-row-end: 4;
				}

Грид-линии

				.element {
					grid-column: 3 / 4;
					grid-row: 2 / 4;
				}

Грид-линии

				.element {
					grid-column: 3 / 4;
					grid-row: 2 / span 2;
				}

Грид-линии

				.element {
				  grid-area: 2 / 3 / 4 / 4;
				}

grid-row-start
grid-column-start
grid-row-end
grid-column-end

3 колонки

			.grid {
				display: grid;
				grid-template-columns: repeat(3, 1fr);
			}

Добавляем шапку и подвал

			.grid :nth-child(1) {
				grid-column: 1 / 4;
			}
			.grid :nth-child(5) {
				grid-column: 1 / 4;
			}

ASCII

			.grid {
				grid-template-areas:
					'a a a a'
					'b c c d' /* Шаблон области */
					'e e e e';
			}

a b c d e

			.grid :nth-child(1) { grid-area: a; }
			.grid :nth-child(2) { grid-area: b; }
			.grid :nth-child(3) { grid-area: c; }
			.grid :nth-child(4) { grid-area: d; }
			.grid :nth-child(5) { grid-area: e; }

ASCII

			.grid {
				grid-template-areas:
					'a a a a'
					'b c c d'
					'b c c d'
					'e e e e';
			}

			.grid {
				grid-template-areas:
					'🐷 🐷 🐷 🐷'
					'🐸 🤖 🤖 🔫'
					'🐵 🐵 🐵 🐵';
				}
			}

Рисуем виртуальную сетку

			.grid-container {
				display: grid;
				grid-template-columns: 250px 1fr 150px;
				grid-template-rows: repeat(3, 100px);
			}

			.element { grid-column: 1; grid-row: 1; }

			.element { grid-column: 2/4; grid-row: 2/4; }

Перекрытие блоков

Выравнивание блоков

Грид-контейнер	Грид-элемент
`align-items`	`align-self`
`justify-items`	`justify-self`

Отступы

Авто	Вручную
`align-content`	`grid-row-gap`
`justify-content`	`grid-column-gap`

MOAR примеров

Чтиво на ночь … 🌙

Что посмотреть … 🖥

(EN) Start using CSS Grid Layout – Rachel Andrew
(EN) CSS Grid Layout from the inside out – Manuel Rego, Igalia
(RU) Можно вообще всё. Раскладка по гриду – Вадим Макеев
(RU) CSS Grid Layout. Готовность номер один — Наталья Короткова

@r3nya

📄 r3nya.ru/fr-fr

???