Создайте CSS-сетку, которая меняется в зависимости от размера экрана. Используйте CSS-переменные для задания отступов и ширины колонок, чтобы легко настраивать и менять их для разных разрешений экрана.
➡️ Пример: Создайте сетку с тремя колонками для больших экранов, двумя колонками для средних и одной колонкой для мобильных.
Решение задачи🔽
:root {
--column-gap: 20px;
--row-gap: 20px;
--column-count: 3;
}
.container {
display: grid;
grid-template-columns: repeat(var(--column-count), 1fr);
gap: var(--row-gap) var(--column-gap);
}
@media (max-width: 768px) {
:root {
--column-count: 2;
}
}
@media (max-width: 480px) {
:root {
--column-count: 1;
}
}