Как сделать автозамещаемый Grid CSS?

Question

[stdio96]

Здравствуйте,

Не могу найти метода для реализации грида, который бы вытягивался на всю недостающую ширину блока, при удалении его соседа(ей) использую только чистый CSS



Как вариант, блоки 2 и 3 можно взять в отдельный блок, прописать ему display: grid и без всяких дополнительных стилей он блоки внутри него выстраиваются на недостающую высоту

Как сделать так же, чтобы при удалении блока 1 блок с блоками 2 и 3 (или они по отдельности) выставлялись на всю ширину?

Спасибо

Answer 1

[YavaDev]

Вот пример такой сетки - bootstrap-4.

Comments

[stdio96]

Спасибо, но там на флексах и только в один ряд. А интересует именно на гридах, как на скрине

[YavaDev]

stdio96, тогда как-то так https://codepen.io/YavaDev/pen/eYdeNJy

[stdio96]

Спасибо!

Этот вариант рассматривал, но нюанс в том, что первая колонка должна быть меньше, чем вторая. Если прописать стабильно width или изменить grid-template-columns, то уже не работает главное условие: удаление одного блока, должно сделать так, чтобы другие заняли его место (не передвинулись, а заполнили)

[YavaDev]

stdio96, обновил
https://codepen.io/YavaDev/pen/eYdeNJy

[stdio96]

YavaDev, спасибо, подошло!