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

Question

CSS Grid позволяет создавать гибкие макеты с помощью свойств, таких как grid-template-columns, grid-template-rows и grid-template-areas. Эти свойства помогают управлять размещением элементов и адаптировать макет для разных экранов с использованием медиазапросов.

YeaHub · Accepted Answer

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;
	}
}Таким образом, макет будет перестраиваться в зависимости от размера экрана, обеспечивая адаптивность страницы.