CSS Grid Layout

Andrey Makarov

CSS Grid Layout

by Andrey Makarov

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

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

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

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

			.grid {
				display: grid;
			}
		

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

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

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

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

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

fr – fraction

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

:3

: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;
				}
			

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;
			}
		
Bill

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 примеров

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

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

@r3nya

📄 r3nya.ru/fr-fr

???

WAT?!1