css - 可变 CSS 网格布局

Question

我有这样的布局:

有时我的布局可能看起来像这样(没有 menu):

有时像这样(没有sidebar):

最后我的布局可能会变成这样(没有 menu 和 sidebar):

我使用 CSS 网格布局，当缺少一个 block 时，会出现空白区域。 如何删除这些空白区域？

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>