Ivseti
@Ivseti
Фронтенд HTML, CSS и немного JS с PHP

Как на плитках Grid добиться нужного адаптива?

Доброе утро коллеги! Делаю адаптивные блоки плиточкой с помощью грида. Нужны советы, как сделать правильно.

Вот это мне нужно сделать: https://skr.sh/sB7q5K1QR0P?a

Мой вариант: https://dk-web.site/

Все получилось так и нужно, но как теперь грамотно адаптировать блоки. Мне нужно, что бы планшетах и мобильных item 7 и item 8, а также те блоки которые под ними 5 и 6, переносились тоже на новую строку. Должно получится примерно так https://skr.sh/sB7ZCYD0yGf?a для планшета и моб. Что бы блоки по ширине и высоте правильно уменьшались. Пока из вариантов использовать media, пробую, но пока что-то не получается.

Буду очень благодарен, кто поможет.
  • Вопрос задан
  • 102 просмотра
Пригласить эксперта
Ответы на вопрос 1
Pavel-ww
@Pavel-ww
Только начали с гридами знакомиться? Нет ничего плохого в использовании media. Пользуйтесь этим, единственное что, нет смысла задавать диапазон. Если ваш подход desktop first используйте max-width и всё.
@media (max-width: 1199px) {
	/* Код для экранов уже 1200px */
}
@media (max-width: 991px) {
	/* Код для экранов уже 992px */
}
@media (max-width: 768px) {
	/* Код для экранов уже 767px */
}
@media (max-width: 576px) {
	/* Код для экранов уже 575px */
}

По моему субъективному мнению grid-area стоит использовать только для лайоута всего сайта/страницы - распределить с помощью этого header, sidebar, main, footer. В контексте отдельного блока, особенно такого как у вас это не удобно и не гибко.

Вместо этого используйте grid-column, grid-row для того чтобы задать положение блоков в нужных ячейках.
И grid-template-columns конфликтует с grid-area. Вы уменьшаете количество колонок, но grid-area создает их все так же 4 помещая последнюю в область не явной сетки.
То есть на ширине меньше 1024px у вас должно быть 3 колонки судя по этому grid-template-columns: 0.5fr 0.4fr 0.4fr; а по факту их 4.

Конечно зависит от контекста проекта, но в общем container не должен быть grid так как обычно он используется для ограничения контентной области всей страницы или он может быть grid но не для этого блока, а для всего контента, с другими параметрами. Обычно контейнеру задают какую то max-width разную в разных точках остановки и margin: 0 auto для центрирования. И это можно так же заменить на grid.
Например grid-template-columns: minmax(0, 1fr) minmax(0, 1200px) minmax(0, 1fr); что сделает тоже самое но гридом.

То есть правильным было бы внутрь контейнера поместить родительский grid блок со всеми айтемами. А у контейнера совершенно другая задача.

В общем сейчас нечего корректировать, надо переделать, чтобы с этим можно было работать при адаптации
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы