Можно вообще всё. Раскладка по гриду

Template Layout

Grid Layout

Включаем

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

Линия

Полоса

Ячейка

Область

Термины

• grid container — грид-контейнер
• grid item — грид-элемент
• grid track — грид-полоса
• grid cell — грид-ячейка
• grid line — грид-линия
• grid area — грид-область

Подробнее в словаре терминов по фронтенду.

Автоматика

Заготовка

			<div class="sample">
				<div class="sample__item"></div>
				<div class="sample__item"></div>
				<div class="sample__item"></div>
				<div class="sample__item"></div>
				<div class="sample__item"></div>
			</div>
		

Заготовка

			.sample { /* Пока пусто */ }
			.sample__item {
				background: #0175A7;
				}
			.sample__item:first-child { background: #090 }
			.sample__item:last-child { background: #C00 }
			.sample__item::before { content: counter(list) }
		

			.sample {
				display: grid;
				}
		

Колонки

Пополам

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

На три

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

1fr ☛ 1 часть

фыр-фыр-фыр

Пропорционально

			.sample {
				grid-template-columns: 1fr 2fr 3fr;
				}
		

Фикс и остальное

			.sample {
				grid-template-columns: 250px 1fr 250px;
				}
		

Строки

Фикс и остальное

			.sample {
				grid-template-columns: 150px 1fr 150px;
				grid-template-rows:	150px 1fr 150px;
				}
		

Ручник

Три колонки

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

Шапка и подвал

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

Подвал и шапка

			.sample :nth-child(1) {
				grid-row: 3 / 4;
				}
			.sample :nth-child(5) {
				grid-row: 1 / 2;
				}
		

Подвал и шапка

			.sample :nth-child(1) {
				grid-area: 3 / 1 / 4 / 4;
				}
			.sample :nth-child(5) {
				grid-area: 1 / 1 / 2 / 4;
				}
		

ASCII

ASCII

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

A B C D E

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

B A E C D

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

ASCII

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

ASCII

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

			.sample {
				grid-template-areas:
					'🐷 🐷 🐷 🐷'
					'🐸 🐼 🐼 🐤'
					'🐵 🐵 🐵 🐵';
				}
		

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

• display
• grid-template-columns
• grid-template-rows
• grid-template-areas
• grid-template
• grid-column-gap
• grid-row-gap
• grid-gap
• justify-items
• align-items
• justify-content
• align-content
• grid-auto-columns
• grid-auto-rows
• grid-auto-flow
• grid

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

• grid-column-start
• grid-column-end
• grid-row-start
• grid-row-end
• grid-column
• grid-row
• grid-area
• justify-self
• align-self

A Complete Guide to CSS Grid Layout

Так флексы или гриды?

Ещё? Ещё!

• Статьи CSS Live
• Grid by Example
• CSS Grid Layout Examples
• A Complete Guide to Grid
• CSS Grid Polyfill

sokr.me/grl

@pepelsbey

Shower

Вопросы?