Madeas
@Madeas
UX/UI designer | Frontend developer

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

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

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

Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@S-a-n-d-r-0
Лучше это решить на стороне сервера. Если у вас есть и image, и tasks, и about, то сервер даст им одни css-классы, которые их расположат по первому варианту. Если есть image и tasks, но нет about, - то другие классы, которые расположат их по второму варианту.

Но можно и так:
https://codepen.io/s-a-n-d-r-0/pen/WNeMXeR
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы