Как сделать это адаптивно?

Взялся за новый макет. Распаковал, вырезал картинки, раздумываю: как же расположить блоки? Приходит мысль в голову: разбить макет на колонки попиксельно при помощи CSS Grid Layout. И вот, что получилось.
.container {
	display: grid;
	grid-template-columns: repeat(1920, 1px);
	grid-template-rows: repeat(2280, 1px);	
}

Делаю набросок. Всё работает. И никаких половых связей с позиционированием блоков, какие были у меня раньше.

Как уже догадались мой макет шириной в 1920px, а высотой - 2280px.
Блоки .article-one, two, three, four , конечно, можно облечь в <div class="article">, затем задать width: 25%каждому и justify-content: space-around + wrap для адаптивности.
Если можно избежать кучи проблем с расположением блоков, то почему нельзя использовать такую сетку?

P.S.
Да, я в курсе, что жалкие ~37% веба это мало для того, чтобы в полную меру использовать все возможности CSS Grid Layout.
Учил гриды тут

Вопрос: как сделать подобную сетку адаптивной?
  • Вопрос задан
  • 312 просмотров
Пригласить эксперта
Ответы на вопрос 1
HeavenlyWaltz
@HeavenlyWaltz
не определился в жизни.
Оптимально и быстро %
мучится долго calc()
мучится еще @media ( )

хоть вот я представить не-могу как будет смотреться, сжатая сетка из 1920 на телефоне при 480 например )))
по любому столбцы смещать придется. а то представ те, был контент 480 а стал 120.

по шаманьте с @media может что хорошего выйдет.
Ответ написан
Комментировать
Ваш ответ на вопрос

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

Похожие вопросы