Переменная CSS Grid Layout

Question

У меня есть такой макет:

иногда мой макет может выглядеть так (без menu):

иногда так (без sidebar):

и, наконец, мой макет может преобразоваться в это (без menu и sidebar):

Я использую CSS Grid layout, и когда блок отсутствует, появляются пустые области. Как убрать эту пустую область?

https://codepen.io/perevezencev/pen/ywRrEz

Answer 1

Вы можете grid-column / grid-row разместить свои элементы вместо областей, как показано ниже:

div, aside, main {
  border: 1px solid black;
}

.layout {
  display: grid;
  grid-template-rows: 75px auto 1fr;
  grid-template-columns: 260px 1fr;

}

.header {
  display: contents;
}

.menu {
  grid-column:1/-1;
  grid-row:2;
  min-height:75px;
}

.sidebar {
  grid-column:1 / -2;
}

.main{
  grid-column:1 / -1;
}
/*when there is a sidebar "main" will take only the last column*/
.sidebar ~ .main{
  grid-column:2 / -1;
}

<div class="layout">
  <header class="header">
    <div class="brand">brand</div>
    <div class="appbar">appbar</div>
  </header>
  <aside class="sidebar">sidebar</aside>
  <div class="menu">menu</div>
  <main class="main">main</main>
</div>

<hr />

<div class="layout">
  <header class="header">
    <div class="brand">brand</div>
    <div class="appbar">appbar</div>
  </header>
  <aside class="sidebar">sidebar</aside>
  <main class="main">main</main>
</div>

<hr />

<div class="layout">
  <header class="header">
    <div class="brand">brand</div>
    <div class="appbar">appbar</div>
  </header>
  <div class="menu">menu</div>
  <main class="main">main</main>
</div>

<hr />

<div class="layout">
  <header class="header">
    <div class="brand">brand</div>
    <div class="appbar">appbar</div>
  </header>
  <main class="main">main</main>
</div>