Как удалить пробел для CSS-сетки с высотой: 0 элементов

#html #css #css-grid

Вопрос:

Я недавно начал использовать CSS-сетку. Мне нужно установить пустой div элемент в качестве одного из элементов сетки, чтобы при необходимости я мог вставлять содержимое с помощью javascript. Проблема в том, что пробел применяется к этому элементу, который пуст и height: 0 . Как я могу избежать применения gap только тогда, когда элемент пуст для сетки CSS.

 <div class="container"> <!-- gap: 20px; -->
    <div class="grid-element--1">
        <h2>title</h2>
        <p>Text Text Text Text Text Text Text Text Text Text </p>
    </div>
    <div class="grid-element--2">
        <h2>title</h2>
        <p>Text Text Text Text Text Text Text Text Text Text </p>
    </div>
    
    <div class="grid-element--3"></div> <!-- Need to appliy gap: 20px only when this element is not empty -->
    
    <div class="grid-element--4">
        <h2>title</h2>
        <p>Text Text Text Text Text Text Text Text Text Text </p>
    </div>
</div>

1. замените его на поле внизу

2. Вам нужно скрыть его высотой 0 или вы можете использовать отображение без отображения? Если это динамический компонент, можно ли использовать js для изменения стилей в зависимости от содержимого?

3. @AsyncAwaitFetch Спасибо за комментарий. Я буду использовать display: в этом случае нет.

Ответ №1:

Свойство gap применяется к контейнеру. Вы не можете установить определенный промежуток для дочернего div, потому что это свойство его родителя.

Что я бы посоветовал, так это установить пустой div со свойством display:none. И как только вы добавите в него контент с помощью javascript, установите для его отображения значение «блокировать», «гибкий» или любое другое свойство отображения, которое он использует, когда он виден.

Другим решением было бы заменить «пробел» на поле или заполнение снизу для детей. И поскольку это свойство дочерних компонентов, вы сможете делать отдельные исключения.

1. Спасибо вам за ответ. Я буду использовать display: none и изменять свойство отображения, когда мне нужно сделать его видимым. В этом случае, чтобы было легко установить согласованный интервал, я буду придерживаться gap, но полезно знать и другой вариант 🙂