Можно ли заполнить пустое пространство?

Question

[Andrej Sharapov]

Как заполнить пустое пространство, т.е. разместить блок image и tasks в одну линию, если about не существует? Например, display: none;.

Накидал пример в песочницу:

Comments

[Рома Зварич]

Andrej Sharapov , думаю, никак.
Вы же жестко задали шаблон колонок и обозначили grid-области, а потом к этим областям привязали элементы.
Если рассматривать ситуацию исключительно в рамках приведенного Вами примера с 3 элементами, то здесь проще Flexbox использовать.
Получается вот так (можете попробовать задать элементу display:none):
https://codepen.io/hisbvdis/pen/eYOVGxy

Если у Вас ситуация не ограничивается этими элементами, то просьба подробнее описать её.

[Andrej Sharapov]

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

[Рома Зварич]

Andrej Sharapov, создал ответ. Если ответ помог, просьба пометить решением.

Answer 1

[Рома Зварич]

Думаю, никак.
Вы же жестко задали шаблон колонок и обозначили grid-области, а потом к этим областям привязали элементы.
Если рассматривать ситуацию исключительно в рамках приведенного Вами примера с 3 элементами, то здесь проще Flexbox использовать.
Получается вот так (можете попробовать задать элементу display:none):
https://codepen.io/hisbvdis/pen/eYOVGxy

Answer 2

[S-a-n-d-r-0]

Лучше это решить на стороне сервера. Если у вас есть и image, и tasks, и about, то сервер даст им одни css-классы, которые их расположат по первому варианту. Если есть image и tasks, но нет about, - то другие классы, которые расположат их по второму варианту.

Но можно и так:
https://codepen.io/s-a-n-d-r-0/pen/WNeMXeR