动态内容的 CSS 网格布局

Question

我想知道如何为可能是动态的内容设置（仅使用 CSS 网格）布局。

假设我有一个 Header、Body 和一个侧边栏。 侧边栏可以显示，也可以不显示。

如何在 CSS 网格中应用这种行为？

当.sidebar 不显示时，我希望标题和图表内容延伸到.sidebar 区域

// Comment OR uncomment the .sidebar HTML tag

html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
display: flex;
}

.wrapper {
background: #fed;
height: 100%;
display: grid;
grid-template-columns: auto  300px;
grid-template-rows: 80px  auto;
grid-auto-rows: 100px;
grid-template-areas:
  "header sidebar"
  "chart sidebar";

}
.header {
  background: hotpink;
  grid-column: 1/ 2;
  grid-row: 1 /1;
  overflow: auto;
}

.chart {
  background: lightblue;
  grid-column: 1/  2;
  grid-row: 2 /  2;
}

.sidebar {
  background: rgba(255, 209, 62, 0.7);
  grid-column: 2/ 2;
  grid-row: 1 /span  2;
}

<div class="wrapper">
  <div class="header"><div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio officiis deserunt cum, iusto veniam, perspiciatis atque dolore eum ab. Accusamus ratione repellat, laboriosam magnam exercitationem illum tempore quidem nam eveniet!</div>
  <div>Iste nobis eveniet quibusdam aspernatur necessitatibus dolore perspiciatis fuga, quaerat ipsum minus eum placeat iure quas! Adipisci optio fugit laudantium voluptatem maiores, reiciendis laboriosam cupiditate blanditiis, quia consequatur voluptas! Nihil.</div>
  <div>Nam dolorem atque, maxime ipsa aspernatur quo eveniet necessitatibus, dignissimos incidunt, sapiente quas eius tempore provident rem accusantium explicabo quia. Suscipit dolorem quo, voluptatum corporis. Enim minus repellat iure illum.</div>
  <div>Ad voluptas, hic a vitae recusandae sit dignissimos beatae nemo eaque iusto culpa repudiandae quas asperiores repellendus nesciunt mollitia atque pariatur, reprehenderit rerum. Perspiciatis quod blanditiis deserunt iure consectetur tempore.</div>
  <div>Placeat id, non quos incidunt rem, cumque, enim quidem consectetur obcaecati, dolor nihil beatae! Officiis necessitatibus nobis esse quaerat! Consectetur maiores praesentium libero hic at rem iste, assumenda vitae aperiam.</div>
  <div>Illo tenetur libero nemo perspiciatis, quisquam minima sequi voluptate, dignissimos maiores hic aliquam et nobis quo iure, doloribus inventore repudiandae assumenda. Ad labore, quas alias explicabo excepturi saepe ullam repellendus!</div>
  <div>Sint iure, hic quis eaque, deleniti asperiores quasi obcaecati cumque modi, iste laborum? Unde fugit quos itaque, molestias dolorum vero distinctio iste nisi ex repellat ut, voluptatem, ratione consectetur nihil?</div>
  <div>Laudantium veniam aliquam provident doloremque excepturi eveniet iste illo consequatur eaque aut, ad, quae fugiat molestiae vitae autem laboriosam nulla accusantium. Tempora necessitatibus natus adipisci ab non, nihil quasi corporis!</div>
  <div>Explicabo cumque unde tempore nihil, id. Nobis, iure veniam, dignissimos ullam nemo cumque voluptates voluptate atque eius unde tempora et, eos porro quo aut debitis. Consequatur neque, quaerat quae deleniti.</div>
  <div>Repellat doloribus ipsa officia, debitis aspernatur blanditiis sit dignissimos nesciunt cum. Perspiciatis molestiae distinctio quas magni similique, mollitia obcaecati modi est ab quasi, ut. Sit libero adipisci sint consectetur molestias.</div></div>
  <div class="chart">chart</div>
  <!-- Comment / uncomment the sidebar -->
  <div class="sidebar">sidebar</div>
</div>

Answer 1

无需为侧边栏定义区域。您可以将模板定义为一列，然后强制侧边栏位于第二列上，只有在侧边栏存在时才会创建该列（您将有一个隐式定义的网格）

// Comment OR uncomment the .sidebar HTML tag

body {
padding: 0;
margin: 0;
}

.wrapper {
background: #fed;
min-height: 100vh;
display: grid;
grid-template-rows: 80px  auto;
grid-auto-rows: 100px;

}
.header {
  background: hotpink;
  overflow: auto;
}

.chart {
  background: lightblue;
}

.sidebar {
  background: rgba(255, 209, 62, 0.7);
  grid-column: 2/ 2;
  grid-row: 1 /span  2;
  width:300px;
  
}

<div class="wrapper">
  <div class="header"><div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio officiis deserunt cum, iusto veniam, perspiciatis atque dolore eum ab. Accusamus ratione repellat, laboriosam magnam exercitationem illum tempore quidem nam eveniet!</div>
  <div>Iste nobis eveniet quibusdam aspernatur necessitatibus dolore perspiciatis fuga, quaerat ipsum minus eum placeat iure quas! Adipisci optio fugit laudantium voluptatem maiores, reiciendis laboriosam cupiditate blanditiis, quia consequatur voluptas! Nihil.</div>
  <div>Nam dolorem atque, maxime ipsa aspernatur quo eveniet necessitatibus, dignissimos incidunt, sapiente quas eius tempore provident rem accusantium explicabo quia. Suscipit dolorem quo, voluptatum corporis. Enim minus repellat iure illum.</div>
  <div>Ad voluptas, hic a vitae recusandae sit dignissimos beatae nemo eaque iusto culpa repudiandae quas asperiores repellendus nesciunt mollitia atque pariatur, reprehenderit rerum. Perspiciatis quod blanditiis deserunt iure consectetur tempore.</div>
  <div>Placeat id, non quos incidunt rem, cumque, enim quidem consectetur obcaecati, dolor nihil beatae! Officiis necessitatibus nobis esse quaerat! Consectetur maiores praesentium libero hic at rem iste, assumenda vitae aperiam.</div>
  <div>Illo tenetur libero nemo perspiciatis, quisquam minima sequi voluptate, dignissimos maiores hic aliquam et nobis quo iure, doloribus inventore repudiandae assumenda. Ad labore, quas alias explicabo excepturi saepe ullam repellendus!</div>
  <div>Sint iure, hic quis eaque, deleniti asperiores quasi obcaecati cumque modi, iste laborum? Unde fugit quos itaque, molestias dolorum vero distinctio iste nisi ex repellat ut, voluptatem, ratione consectetur nihil?</div>
  <div>Laudantium veniam aliquam provident doloremque excepturi eveniet iste illo consequatur eaque aut, ad, quae fugiat molestiae vitae autem laboriosam nulla accusantium. Tempora necessitatibus natus adipisci ab non, nihil quasi corporis!</div>
  <div>Explicabo cumque unde tempore nihil, id. Nobis, iure veniam, dignissimos ullam nemo cumque voluptates voluptate atque eius unde tempora et, eos porro quo aut debitis. Consequatur neque, quaerat quae deleniti.</div>
  <div>Repellat doloribus ipsa officia, debitis aspernatur blanditiis sit dignissimos nesciunt cum. Perspiciatis molestiae distinctio quas magni similique, mollitia obcaecati modi est ab quasi, ut. Sit libero adipisci sint consectetur molestias.</div></div>
  <div class="chart">chart</div>
  <!-- Comment / uncomment the sidebar --> 
  <div class="sidebar">sidebar</div>
</div>

没有侧边栏：

// Comment OR uncomment the .sidebar HTML tag

body {
padding: 0;
margin: 0;
}

.wrapper {
background: #fed;
min-height: 100vh;
display: grid;
grid-template-rows: 80px  auto;
grid-auto-rows: 100px;

}
.header {
  background: hotpink;
  overflow: auto;
}

.chart {
  background: lightblue;
}

.sidebar {
  background: rgba(255, 209, 62, 0.7);
  grid-column: 2/ 2;
  grid-row: 1 /span  2;
  width:300px;
  
}

<div class="wrapper">
  <div class="header"><div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio officiis deserunt cum, iusto veniam, perspiciatis atque dolore eum ab. Accusamus ratione repellat, laboriosam magnam exercitationem illum tempore quidem nam eveniet!</div>
  <div>Iste nobis eveniet quibusdam aspernatur necessitatibus dolore perspiciatis fuga, quaerat ipsum minus eum placeat iure quas! Adipisci optio fugit laudantium voluptatem maiores, reiciendis laboriosam cupiditate blanditiis, quia consequatur voluptas! Nihil.</div>
  <div>Nam dolorem atque, maxime ipsa aspernatur quo eveniet necessitatibus, dignissimos incidunt, sapiente quas eius tempore provident rem accusantium explicabo quia. Suscipit dolorem quo, voluptatum corporis. Enim minus repellat iure illum.</div>
  <div>Ad voluptas, hic a vitae recusandae sit dignissimos beatae nemo eaque iusto culpa repudiandae quas asperiores repellendus nesciunt mollitia atque pariatur, reprehenderit rerum. Perspiciatis quod blanditiis deserunt iure consectetur tempore.</div>
  <div>Placeat id, non quos incidunt rem, cumque, enim quidem consectetur obcaecati, dolor nihil beatae! Officiis necessitatibus nobis esse quaerat! Consectetur maiores praesentium libero hic at rem iste, assumenda vitae aperiam.</div>
  <div>Illo tenetur libero nemo perspiciatis, quisquam minima sequi voluptate, dignissimos maiores hic aliquam et nobis quo iure, doloribus inventore repudiandae assumenda. Ad labore, quas alias explicabo excepturi saepe ullam repellendus!</div>
  <div>Sint iure, hic quis eaque, deleniti asperiores quasi obcaecati cumque modi, iste laborum? Unde fugit quos itaque, molestias dolorum vero distinctio iste nisi ex repellat ut, voluptatem, ratione consectetur nihil?</div>
  <div>Laudantium veniam aliquam provident doloremque excepturi eveniet iste illo consequatur eaque aut, ad, quae fugiat molestiae vitae autem laboriosam nulla accusantium. Tempora necessitatibus natus adipisci ab non, nihil quasi corporis!</div>
  <div>Explicabo cumque unde tempore nihil, id. Nobis, iure veniam, dignissimos ullam nemo cumque voluptates voluptate atque eius unde tempora et, eos porro quo aut debitis. Consequatur neque, quaerat quae deleniti.</div>
  <div>Repellat doloribus ipsa officia, debitis aspernatur blanditiis sit dignissimos nesciunt cum. Perspiciatis molestiae distinctio quas magni similique, mollitia obcaecati modi est ab quasi, ut. Sit libero adipisci sint consectetur molestias.</div></div>
  <div class="chart">chart</div>
  <!-- Comment / uncomment the sidebar 
  <div class="sidebar">sidebar</div>
  --> 
</div>