Адаптивная сетка через CSS гриды без медиазапросов

Современный CSS Grid Layout позволяет создавать адаптивные сетки без использования медиазапросов. Комбинация функций auto-fit и minmax дает мощный инструмент для автоматического размещения элементов.

Давайте создадим сетку, которая автоматически подстраивается под ширину экрана. В этом нам поможет комбинация трех команд:

.grid-container {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 20px;
}

Здесь auto-fit автоматически подбирает количество колонок, minmax задает минимальную ширину 250px и максимальную 1fr, а gap задает промежутки между элементами.

Давайте напишем полный пример и посмотрим, как это работает в браузере:

<div class="grid-container">
	<div class="grid-item">1</div>
	<div class="grid-item">2</div>
	<div class="grid-item">3</div>
	<div class="grid-item">4</div>
	<div class="grid-item">5</div>
	<div class="grid-item">6</div>
</div>

.grid-container {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 20px;
	padding: 20px;
}

.grid-item {
	background: #f0f0f0;
	padding: 20px;
	border-radius: 5px;
}