Как сделать такую верстку на гридах?

Question

[wilfridhoover]

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

Как это реализовать на гридах, не могу въехать и всё, уйму времени потратил.

Вот как это должно быть:



А вот как у меня:



Первая карточка 435px, вторая на всю оставшуюся длину, а начиная с 3 по 50%. И само главное чтоб друг под друга выравнивались, без пустоты между блоками сверху.

Comments

[Ankhena]

Видимо, забыли указать, что МИКРОСКОП должен занять 2 ряда. И ТОМОГРАФ тоже.

grid-row: span2
Высоту строкам лучше вообще не задавайте, иначе при переполнении всё улетит.

[wilfridhoover]

Ankhena, Спасибо, выше мой пример на флексах. Я 2 года на верстал и забыл, что у флексов есть данная проблема.

Answer 1

[imko]

А че там делать то
https://codepen.io/herr-imko/pen/mdgKwpK
размеры столбцов и рядов подкорректируй как надо

Comments

[wilfridhoover]

честно не вдупляю))

Как сделать a 435px, второй блок b тянется на всю оставшуюся длину, а c e занимает по 50% ширины, как и d f

[imko]

wilfridhoover, grid-template-columns: 435px 1fr 50%;
поменял песочницу

[wilfridhoover]

imko, Спасибо большое. Именно это и нужно!

[imko]

wilfridhoover, я бы только не советовал фиксировать ширину)

[wilfridhoover]

imko, grid-template-rows: min-content; вот, что мне понадобилось))

Answer 2

[Nik Faraday]

Скорее всего, если смотреть на блоках, тут два блока "верхнего уровня". Первый блок (ZOOM 4, Стоматологическая установка) размещены в ряд, тут проблем нет. Второй блок (E&Q MASTER, Микроскоп, 3D томограф, Пьезотом) может разделяться на две колонки. Соответственно, там придётся делать "замеры" не по ширине, а по высоте

Comments

[wilfridhoover]

Я изначально так и думал, но думал, что есть более простой изящный способ.

Мало ли заказчик скажет, а как мы будем натягивать ведь всё в разных блоках. Типо мало ли они одним запросом и циклом хотели выводить потом карточки.

Спасибо.