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

Posted 2023-03-05

【中文标题】如何使用 CSS 网格制作侧边栏和部分？

【英文标题】：How to make sidebar and sections with CSS grid?

【发布时间】：2021-04-09 15:33:38

【问题描述】：

我正在尝试制作这样的布局：

这是我的代码：

.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”但是这些都没有以侧边栏部分为中心，我不知道如何减少部分之间的间隙。如何修复我的代码，使其看起来更像我的模型中的布局？

【问题讨论】：

不可能使用 css-grid，因为它在类似布局的表格中工作。您可以使用 flexbox 来实现，或者您需要制作一个模板网格，将页面分成 2 个独立的列，然后手动将 div/section 放入列中。

@tacoshy 等待 CSS 网格无法实现的布局？非常感谢您让我知道。

【参考方案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