Взялся за новый макет. Распаковал, вырезал картинки, раздумываю: как же расположить блоки? Приходит мысль в голову: разбить макет на колонки попиксельно при помощи 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.
Учил гриды тут Вопрос: как сделать подобную сетку адаптивной?