Свернуть диапазон содержимого или сетку, если столбец сетки пуст

Question

У меня очень простой макет с двумя боковыми панелями. Я хочу удалить боковую панель из сетки и позволить остальному содержимому занять его пространство, если оно пусто.

HTML:

<div class="content container">
    <aside id="left-sidebar" class="secondary" itemtype="https://schema.org/WPSideBar" itemscope="itemscope">
        <div id="left-sidebar-container" class="sidebar-container"></div>
    </aside>
    <main class="primary"></main>
    <aside id="right-sidebar" class="secondary" itemtype="https://schema.org/WPSideBar" itemscope="itemscope">
        <div id="right-sidebar-container" class="sidebar-container"></div>
    </aside>
</div>

CSS:

.content {
    display: grid;
    grid-template-columns: minmax(0,.5fr) minmax(0,1fr) minmax(0,.5fr);
    grid-column-gap: 2.5%;
    grid-row-gap: var(--margin-bottom)
}

Я пробовал использовать grid-template-columns: minmax(0, auto) minmax(0,1fr) minmax(0,auto), но grid-column-gap этого столбца не go. Могу ли я добиться желаемого с помощью чистого css? Или мне нужно использовать вместо него js?

Answer 1

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

Вы можете проверить, пуст ли текст left-sidebar-content, используя условное === ''. Если он пуст, установите отображение вашего класса left sidebar на none. Когда в left-sidebar-container есть контент, он будет отображать css, изначально определенный как display: grid.

let left = document.getElementById('left-sidebar-container'); //<-- get the left-sidebar-container with its id
let leftSB = document.getElementById('left-sidebar'); //<-- get the left-sidebar with its id
let content = document.querySelectorAll('.content'); //<-- get the .content element using it class
let check = left.textContent; //<-- save the textContent inside a variable
if(check === ''){ //<-- conditional if statement to see if the textContent is set to '' or empty
  leftSB.style.display = 'none'; //<-- set the display of the left-sidebar to none
}

.content {
    display: grid;
    grid-template-columns: minmax(0,.5fr) minmax(0,1fr) minmax(0,.5fr);
    grid-column-gap: 2.5%;
    grid-row-gap: var(--margin-bottom)
}

<h2>Nothing in left hand sidebar</h2>
<div class="content container">
    <aside id="left-sidebar" class="secondary" itemtype="https://schema.org/WPSideBar" itemscope="itemscope">
        <div id="left-sidebar-container" class="sidebar-container"></div>
    </aside>
    <main class="primary">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</main>
    <aside id="right-sidebar" class="secondary" itemtype="https://schema.org/WPSideBar" itemscope="itemscope">
        <div id="right-sidebar-container" class="sidebar-container">Right side bar</div>
    </aside>
</div>

<h2>Something in left hand sidebar</h2>
<div class="content container">
    <aside id="left-sidebar" class="secondary" itemtype="https://schema.org/WPSideBar" itemscope="itemscope">
        <div id="left-sidebar-container" class="sidebar-container">Left side bar</div>
    </aside>
    <main class="primary">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</main>
    <aside id="right-sidebar" class="secondary" itemtype="https://schema.org/WPSideBar" itemscope="itemscope">
        <div id="right-sidebar-container" class="sidebar-container">right side bar</div>
    </aside>
</div>