Создание адаптивной сетки, используя всего 3 свойства CSS

Просто контейнер и div, соответствующие статьям, а также header + footer:

	<div class="container">
	  <div class="header">Header</div>
	  <div class="art first">Article 1</div>
	  <div class="art second">Article 2</div>
	  <div class="art third">Article 3</div>
	  <div class="footer">Footer</div>
	</div>

Во-первых, нам нужно указать, что наш контейнер является CSS сеткой (grid) и добавить небольшой промежуток между ячейками:

	.container {
		 display: grid;
		 grid-gap: 10px;
	}

Самая важная часть состоит из определения фактической сетки. Если бы мы поместили этот макет в таблицу Excell, он бы выглядел так:

Это можно перевести на CSS с помощью свойства grid-template-areas:

	.header { grid-area: h; }
	.art.first { grid-area: a1; }
	.art.second { grid-area: a2; }
	.art.third { grid-area: a3; }
	.footer { grid-area: f; }

Делаем CSS-сетку адаптивной

Чтобы сделать CSS-сетку адаптивной, мы можем просто изменить внешний вид таблицы:

Таким образом, нам поможет медиа-запрос и снова свойство grid-template-areas.

@media only screen and (max-width: 600px) {
	  .container {
		grid-template-areas: 
			"h"
			"a1"
			"a2"
			"a3"
			"f";
	  }
	}

Мы могли бы использовать display:block, но наша задача показать каким гибким и полезным может быть свойство grid-template-areas при использовании его при верстке макета.

И это все, ребята! Всего 3 свойства (grid-area, grid-gap и grid-template-area) для создания полностью адаптивного макета на основе CSS-сетки (grid).

Ниже вы можете увидеть полный рабочий код для этого примера. Ура!

Демо: https://codepen.io/js-craft/pen/xjEZVX

Оригинал статьи: Making a responsive CSS grid layout with just 3 properties

Перевод: Земсков Матвей