Полный гайд по CSS Grid: адаптивная верстка сайтов

Полный гайд по CSS Grid: адаптивная верстка сайтов

Сетки CSS это новый подход к созданию адаптивных сайтов с множеством блоков, расположенных в любых местах сайта. Помимо CSS Grid существует также технология FlexBox, которая очень схожа с сетками. Разбираться в мельчайших различиях между ними мы не будем, так как на это понадобиться отдельная статья, но вкратце опишем основные отличия.


CSS Grid можно назвать более крутой и улучшенной версией FlexBox, ведь FlexBox позволяет работать лишь в одной плоскости: либо создавать столбцы, либо создавать ряды.



Сетки CSS позволяют делать больше, так как они работают в обеих плоскостях одновременно. Таким образом, создание адаптивных блоков сайта происходит намного проще, а возможности для расстановки   объектов как вам вздумается - просто безграничны.


Предлагаем вам посмотреть полноценное видео по изучению сеток CSS, чтобы моментально вникнуть в суть CSS Grid:



Полезные ссылки из видео:

  • Урок по FlexBox;
  • Плагин Emmet.


В ходе урока было создано три страницы, код каждой страницы вы можете скопировать ниже.

Первый файл

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>CSS Grid</title>
	<style>
		* {padding: 0; margin: 0}

		.wrapper {
			display: grid;
			grid-template-columns: 70% 30%;
			/* grid-column-gap: 1em;
			grid-row-gap: 1em; */

			grid-gap: 1em;
		 }

		.wrapper > div{
			padding: 1em;
			background-color: #ee6375;
		}

		.wrapper > div.light {
			padding: 1em;
			background-color: #ecc6cb;
		}
	</style>
</head>
<body>
	<div >
		<div>
			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima animi, tempore. Vitae consectetur voluptate inventore soluta totam iste dicta neque nesciunt a! Incidunt aliquid quae eveniet blanditiis, laudantium assumenda natus doloribus, fuga mollitia debitis dolorem, soluta asperiores accusamus. Qui, necessitatibus autem doloremque corporis eligendi dolorum natus, eius aperiam consequatur aliquid, quaerat excepturi sequi repellendus, tempora cum sed velit. A voluptates laboriosam quibusdam consequatur quas harum unde sint minus, molestiae quo?
		</div>
		<div >
 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit, nostrum animi, aliquid consequuntur iusto esse nulla accusamus commodi perferendis deserunt ipsa quidem, illo quam minima aspernatur vero natus?
		</div>
		<div>
			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima animi, tempore. Vitae consectetur voluptate inventore soluta totam iste dicta neque nesciunt a! Incidunt aliquid quae eveniet blanditiis, laudantium assumenda natus doloribus, fuga mollitia debitis dolorem, soluta asperiores accusamus. Qui, necessitatibus autem doloremque corporis eligendi dolorum natus, eius aperiam consequatur aliquid, quaerat excepturi sequi repellendus, tempora cum sed velit. A voluptates laboriosam quibusdam consequatur quas harum unde sint minus, molestiae quo?
		</div>
		<div >
			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit, nostrum animi, aliquid consequuntur iusto esse nulla accusamus commodi perferendis deserunt ipsa quidem, illo quam minima aspernatur vero natus?
		</div>
	</div>
</body>
</html>

Второй файл

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>CSS Grid</title>
	<style>
		* {padding: 0; margin: 0}

		.wrapper {
			display: grid;
			grid-template-columns:repeat(3, 1fr);
			grid-gap: 1em;
			/* grid-auto-rows: 150px; */
			grid-auto-rows: minmax(100px, auto);
		}

		.included {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			grid-gap: 1em;
			grid-auto-rows: 80px;
		}

		.wrapper > div{
			padding: 1em;
			background-color: #e7a158;
		}

		.wrapper > div.light {
			padding: 1em;
			background-color: #f4c3a0;
		}

		.included > div {
			background-color: #d07a09;
		}
	</style>
</head>
<body>
	<div >
		<div>
			Lorem ipsum dolor sit amet, consectetur adipisicing elit.
		</div>
		<div >
			Lorem ipsum dolor sit amet, consectetur adipisicing elit.
		</div>
		<div>
			<div >
				<div>Lorem ipsum.</div>
				<div>Lorem ipsum.</div>
				<div>Lorem ipsum.</div>
				<div>Lorem ipsum.</div>
			</div>
		</div>
		<div >
			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus magni atque nostrum deleniti magnam unde ad, expedita perferendis laborum aut, pariatur delectus. Deleniti dolores consequuntur sed iure ratione, laudantium exercitationem perferendis reprehenderit delectus aperiam fugiat rerum earum quidem facere aspernatur ipsam harum. Minus alias sequi inventore aspernatur expedita, odio nemo corporis consectetur labore, voluptas quasi.
		</div>
		<div>
			Lorem ipsum dolor sit amet, consectetur adipisicing elit.
		</div>
		<div >
			Lorem ipsum dolor sit amet, consectetur adipisicing elit.
		</div>
		<div>
			Lorem ipsum dolor sit amet, consectetur adipisicing elit.
		</div>
		<div >
			Lorem ipsum dolor sit amet, consectetur adipisicing elit.
		</div>
	</div>
</body>
</html>

Третий файл

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>CSS Grid</title>
	<style>
		* {padding: 0; margin: 0}

		.wrapper {
			display: grid;
			grid-template-columns: 1fr 2fr 1fr;
			grid-auto-rows: minmax(100px, auto);
			grid-gap: 1em;
			justify-items: stretch;
			align-items: stretch;
		}

		.wrapper > div{
			padding: 1em;
			background-color: #e7a158;
		}

		.wrapper > div.light {
			padding: 1em;
			background-color: #f4c3a0;
		}
 
		.box1 {
			align-self: start;
			justify-self: end;
			grid-column: 1/3;
			grid-row: 1/3;
		}

		.box2 {
			align-self: end;
			grid-column: 3;
			grid-row: 1/3;
		}

		.box3 {
			justify-self: center;
			grid-column: 2/4;
			grid-row: 3;
		}

		.box4 {
			grid-column: 1;
			grid-row: 2/4;
		}
	</style>
</head>
<body>
	<div >
		<div >Box 1</div>
		<div >Box 2</div>
		<div >Box 3</div>
		<div >Box 4</div>
		<div >Box 5</div>
		<div >Box 6</div>
	</div>
</body>
</html>

Принцип работы

Работа с сетками очень проста. Алгоритм действий здесь следующий:

  1. Создаем один основной блок и помещаем в него другие блоки (секции);
  2. Добавляем к основному блоку свойство display: grid;
  3. Ко всем элементам основного блока теперь можно применять свойства сеток CSS;
  4. Добавляем различные свойства. Документацию по всем возможным свойствам вы можете прочитать здесь;


Каждому блоку можно устанавливать ширину, высоту, его расположение. Блоки, которые создаются на основе сеток сразу имеют адаптивный дизайн, который подстраивает блоки под различные разрешения экранов. 


Таким образом, вы можете писать меньше, а получать больше. Что еще может быть круче? Делитесь своим опытом использования сеток в своих проектах в комментариях к этой статье ⇣

()
Количество показов: 379
25 июля 2018

Возврат к списку

Войти Регистрация
Корзина0 позиций на сумму 0 руб.