Как сделать такую сетку?

Question

[entenik]

Подскажите как сделать такую сетку на grid/flex? Нужно чтобы 3, 4 и 8 элементы были уже чем другие. Использовать отдельные контейнеры нельзя, нужно чтобы всё было в едином контейнере

Comments

[Ankhena]

Минимум - 5 колонок 2fr 1fr 2fr 1fr 2fr
Большим элементам span 2
Можно 8 колонок по 1fr.
Это на глаз. Нужно, конечно, проверить размеры по макету.

[toffi]

Сделайте с помощью grid 3 строки и 3 колонки. Размеры сделайте автоматическими. А у фотографий задавайте высоту и ширину. Таким образом, фото сами растянут grid-контейнеры.

[toffi]

https://cdpn.io/pen/debug/gbagbEm?authentication_h...

https://codepen.io/llyraxgz-the-sasster/pen/gbagbEm">

Приблизительно получилось с флексами. Но с высотой и шириной надо поработать, так как я в этом немного разбираюсь.

Answer 1

[xdevelx]

.grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 20px;
}

.grid > * {
  grid-column: span 3; /* по умолчанию все широкие */
}

.grid > :nth-child(9n + 3),
.grid > :nth-child(9n + 4),
.grid > :nth-child(9n + 8) {
  grid-column: span 2; /* узкие элементы */
}

Можете ещё попробовать 14 колоночную сетку, узкие - 4 колонки, широкие - 5. Или 11 колонок (4 и 3). А вообще такие вещи нужно брать из макета или уточнять у дизайнера, какими флюидами он прочувствовал такие пропорции?

Answer 2

[Уставшая Вишенка]

https://doka.guide/css/grid-template-areas/?ysclid...

Можно построить свою сетку и по этой сетке разложить блоки, и при адаптиве менять раскладку блоков если нужно
grid-template-areas - строим сетку
grid-template-columns - определяем ширину колонок
grid-template-rows - высоту блоков
gap - отступы

А так вообще макет сделан корректно тут сетка из 8 колонок
2 блока имеют 3 колонки в ширину и 1 блок 2 колонки в ширину
можно сделать 2 класса W-3 и W-2 им прописать ширину и просто добавлять нужный класс к нужному блоку
ширина 1 колонки в процентах 12,5%

Comments

[xdevelx]

Ага, а ширина всех 8 колонок 100% + 7 * gap. Это называется где то просчитался, но только вот где?

[Уставшая Вишенка]

xdevelx, ну это понятно что нужно добавить calc() тут расписан принцип а не готовый код

[xdevelx]

Уставшая Вишенка, зачем тут calc если для создания сетки используются fr? А принцип, что тут используется сетка скорее всего 8 колоночная, уже был дан в ответе.

[Уставшая Вишенка]

xdevelx, тут простая верстка ее можно и в % сверстать

[xdevelx]

Уставшая Вишенка, До сих пор не вижу ваш код простой верстки. Показывайте свой вариант с процентами.

[Уставшая Вишенка]

xdevelx, очень странно такое слышать от куратора тега так как верстка элементарная...
ну ладно....

[xdevelx]

Уставшая Вишенка, Эта верстка не элементарная - она очень хрупкая. Я в ваших стилях меняю gap и у меня вся верстка съезжает. А самый главный вопрос - зачем изобретать велосипед, если в css есть grid. Ваше решение как раз таки чрезмерно усложнено. Плюс для нормальной поддержки этого кода нужно все выносить в переменные и все рассчеты делать только с переменными. То что вы написали - это лишь набор магических чисел для усложнения поддержки.

gap в 21px специально подобрали, чтобы вычитать нужно было целое число? А если бы 20px? Еще более магическое число 13,3333333333 пришлось вычитать. И где тут простота и элементарность?

[Уставшая Вишенка]

xdevelx, сделал вам с 20 пикселями и без 13,3333333333

[xdevelx]

Уставшая Вишенка, Ещё один шаг вперёд. Осталось переменные завести, чтобы gap не менять сразу в трёх местах. Но так извращаться можно было когда ещё не было нормальных инструментов в верстке, которые упрощают жизнь. В гридах браузер все вычисления сделает самостоятельно под капотом.

[Уставшая Вишенка]

xdevelx, Вы просто тролль, решение очень просто, и куда лучше подставлять классы чем использовать позиционирование элементов, при измени и добавлении элементов придется лезть и все менять, если вы обратите внимание на изначальный пост гриды там тоже есть, если вас так коробят простые математические функции из первого класса, то я упростил все до безобразия, решение с классами куда лучше чем решение с позиционированием элемента в макете

[xdevelx]

Уставшая Вишенка,

решение с классами куда лучше чем решение с позиционированием элемента в макете

Такое ощущение, что я общаюсь с человеком слабо разбирающемся в верстке. О каком позиционировании элемента в макете вообще речь?

Но если все таки речь про то, какой селектор использовать: по классу или :nth-child, то все строго зависит от поставленной задачи. Если есть готовая верстка без доп классов, то выбор как бы очевиден.

Но вопрос здесь не в селекторах, которыми выбираются широкие и узкие элементы. Речь про то, что можно элементарно решить задачу гридом, а можно наворотить кучу вычислений, потратив время в никуда.

25% - 10px откуда эти цифры?
37.5% - 10px а это откуда?
как задать gap между элементами в вашей верстке?
Такой код в поддержке просто ужасен - не делайте так.

У вас очевидно совсем мало опыта в верстке, раз такие простые вещи доходят так долго.

[Уставшая Вишенка]

xdevelx, цифры взяты из головы вы можете поставить какие вам нравятся, у меня такое чувство что вы не читали все что я написал в вырвали кусок чтоб писать то что вы пишите, там с верху есть ссылка на гриды

Но если все таки речь про то, какой селектор использовать: по классу или :nth-child, то все строго зависит от поставленной задачи. Если есть готовая верстка без доп классов, то выбор как бы очевиден.

Это решение ужасно и в дальнейшем при работе оно вызовет проблемы нельзя так использовать :nth-child

[xdevelx]

Уставшая Вишенка,

Это решение ужасно и в дальнейшем при работе оно вызовет проблемы нельзя так использовать :nth-child

И никакой конкретики. Озвучьте проблемы.
Заодно объясните, как в вашей гениальной вёрстке gap между элементами задать.

[entenik]

xdevelx, ваш вариант подошёл спасибо. Спасибо также за предоставленные варианты, не ожидал что вопрос поднимет такую бурю! По макету gap 15 пикселей. Дополнительные классы не вариант использовать, так как наполнение идет через цикл php - соответственно должно быть единообразие объектов