如何使用CSS网格布局制作侧边栏和部分内容？

Question

我尝试制作这样的布局： 这是我的代码：

.grid{
  display: grid;
  background: gray;
  grid-gap: 15px;
  justify-content: center
  align-items: center;
  grid-template-columns: repeat(2, auto);
  grid-auto-rows: minmax(50px, auto);
}

.sidebar{
  grid-column: 1/2;
  background-color: white;
  align-items: center;
  justify-content: center;
  width: 300px;
}

.navbar{
    grid-column: 2/3;
  background-color: white;
  height: 50px;

}
.section2{
    grid-column: 2/3;
  background-color: white;
  height: 300px;

}
.section4{
    grid-column: 2/3;
  background-color: white;
    height: 300px;
}

.section3{
  grid-column: 1/2;
  background-color: white;
  height: 200px;
    align-items: center;
  width: 300px;
}

.section5{
  grid-column: 1/2;
  background-color: white;
    height: 100px;
  align-items: center;
  width: 300px;

}

<div class="grid">
  <div class="sidebar">sidebar</div>
  <div class="navbar">navbar</div>
  <div class="section2">section2</div>  
  <div class="section3">section3</div>
  <div class="section4">section4</div>
  <div class="section5">section5</div>
</div>

这里显示了输出：

我用红色标出了一些大问题，我的页面中存在巨大的间隙，并且我的列没有在网格中居中显示。我尝试添加"justify-content:center"和"align-items:center"，但是这些都没有让侧边栏部分居中显示，而且我也不知道如何减少各个部分之间的间隙。我该如何修复代码以使其看起来更像我的草图中的布局？

- Johnny Robertson

---

不可能使用CSS网格来实现，因为它的工作方式类似于表格布局。您可以尝试使用flexbox来实现，或者需要创建一个模板网格，将页面分成两个独立的列，并手动将div/section放置到这些列中。 - tacoshy

@tacoshy 等等，我的布局用 CSS Grid 不可能实现？哎呀，谢谢你告诉我。 - Johnny Robertson

Answer 1

由于CSS Grid具有网格布局的特性，这使得它变得更加复杂...

对于您的布局，您必须将它们分成两个部分，如下图所示：

<div class="grid">
    <div class="left">
        <aside class="sidebar">sidebar</aside>
        <section class="section2">section2</section>
        <section class="section4">section4</section>
   </div>
   <div class="right">
        <nav class="navbar">navbar</nav>
        <section class="section3">section3</section>
        <section class="section5">section5</section>
   </div>
</div>

https://codepen.io/tasmim-concept/pen/mdrxLOR

- Amina