Как использовать CSS grid для создания сеток, которые адаптируются под разные размеры экранов?

CSS Grid предоставляет мощные возможности для создания сеток. Свойство grid-template-areas позволяет задавать именованные области, которые можно использовать для размещения элементов. Например:

.container {
	display: grid;
	grid-template-areas: 
		"header header"
		"sidebar content"
		"footer footer";
	grid-template-columns: 1fr 2fr;
	grid-template-rows: auto;
}
.header {
	grid-area: header;
}
.sidebar {
	grid-area: sidebar;
}
.content {
	grid-area: content;
}
.footer {
	grid-area: footer;
}

Этот код создает сетку, где header занимает всю ширину, sidebar и content находятся рядом, а footer — внизу.

Для адаптации под разные экраны можно использовать медиазапросы:

@media (max-width: 768px) {
	.container {
		grid-template-areas: 
			"header"
			"content"
			"sidebar"
			"footer";
		grid-template-columns: 1fr;
	}
}

Таким образом, макет будет перестраиваться в зависимости от размера экрана, обеспечивая адаптивность страницы.