Задать вопрос
Madeas
@Madeas
UI / UX Designer, Frontend Developer
верстка

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

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

Накидал пример в песочницу:
  • Вопрос задан
  • 141 просмотр
3 комментария
Подписаться 2 Простой 3 комментария
Решения вопроса 1
hisbvdis
@hisbvdis
Думаю, никак.
Вы же жестко задали шаблон колонок и обозначили 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
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Frontend Vue & Capacitor Developer Middle++
Parasol Software
от 2 000 до 2 500 $
Frontend программист-разработчик
Максавит • Нижний Новгород
До 200 000 ₽
PHP-программист (SEO-правки)
Demis Group
от 50 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Сверстать 3 страницы для WebApp и 1 Web
25 апр. 2024, в 13:36
2000 руб./за проект
Интегрировать в flutter проект storekit external link (ios)
25 апр. 2024, в 13:21
5000 руб./за проект
Реализовать часть интерфейса для образовательных курсов на React
25 апр. 2024, в 13:13
5000 руб./за проект
Ещё заказы