Web-it-blog/09.07.17

Сетка на CSS: изучаем css grid layout на примере

Наконец-то, с недавних пор, а точнее с весны 2017 года, CSS Grid Layout стала поддерживаться всеми браузерами более-менее. Поэтому, лучше всего будет начать изучать CSS Grid Layout прямо сейчас, так что приступим.

Шаблон.

Самое крутое в CSS Grid Layout является то, что его синтаксис очень гибкий, т.е. одну и туже задачу мы можем решить различными способами. Для того чтобы это показать, мы возьмем вот такой шаблончик. У него есть несколько секций: header - шапка; aside - меню с боку; main - главная секция; footer - подвал.

HTML выглядит следующим образом:

<div class="grid-wrapper">
	<header><p>Header</p></header>
	<aside><p>Aside</p></aside>
	<main><p>Main</p></main>
	<footer><p>Footer</p></footer>
</div>

CSS Grid Layout - Пример 1.

Для начала пропишем родительскому элементу .grid-wrapper display: grid, а также 3 столбца(grid-template-columns) и 2 ряда(grid-template-rows). Все элементы отделим друг от друга 20px(grid-gap).

.grid-wrapper {
	display: grid;
	grid-template-columns: 20% 40%;
	grid-template-rows: repeat(3, 200px);
	grid-gap: 20px;
	justify-content: center;
}

Далее мы прописываем каждому элементу свойства, в которых указываем номер начала ряда (grid-row) и номера начала и конца столбца(grid-column).

header {
	grid-row: 1;
	grid-column: 1 / 4;
}
aside {
	grid-row: 2;
	grid-column: 1 / 2;
}
main {
	grid-row: 2;
	grid-column: 2 / 4;
}
footer {
	grid-row: 3;
	grid-column: 1 / 4;
}

И вуаля, наш шаблон готов. Здесь вы можете посмотреть как он работает - пример 1.

CSS Grid Layout - Пример 2.

Теперь давайте попробуем сверстать тот же шаблон, но уже другим способом. Для этого воспользуемся свойством grid-area и grid-template-areas. С помощью grid-area мы даем имена нашим элементам, а с помощью grid-template-areas мы размещаем эти элементы внутри родителя, т.е. .grid-wrapper.

header {
	grid-area: header;
}
aside {
	grid-area: aside;
}
main {
	grid-area: main;
}
footer {
	grid-area: footer;
}
.grid-wrapper {
	display: grid;
	grid-template-columns: 20% 40%;
	grid-template-rows: repeat(3, 200px);
	grid-gap: 20px;
	grid-template-areas: "header header header"
							 "aside main main"
							 "footer footer footer";
	justify-content: center;
}

Вот и все. Наш шаблон готов - пример 2. Как вы можете видеть, CSS Grid Layout очень гибкий, с помощью которого очень просто решать такие проблемы и в этом плане он куда удобнее float.