[分享]css两个不同的grid布局并列显示

CSS 中 grid 布局是一种强大的方式来对页面进行布局，特别是在响应式设计中。在这里，我们将介绍两种不同的 grid 布局，并将它们并列显示。 第一个 grid 布局是通过使用 gridtempl...

CSS 中 grid 布局是一种强大的方式来对页面进行布局，特别是在响应式设计中。在这里，我们将介绍两种不同的 grid 布局，并将它们并列显示。
第一个 grid 布局是通过使用 grid-template-columns 和 grid-auto-rows 属性创建的。这个布局将页面分成两个列，第一列宽度为 1fr，第二列宽度为 2fr。第一列中的每个行高度都是自动计算的，而第二列中的每个行高度都是 100px。
代码如下：

.container {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-auto-rows: auto 100px;
} 

第二个 grid 布局使用 grid-template-areas 属性创建。这个布局将页面分为三个部分，一个顶部导航区域，一个主要内容区域和一个侧边栏。顶部导航区域和侧边栏的宽度为 100px，主要内容区域的宽度为 1fr。每个区域的高度是自动计算的。
代码如下：

.container {
  display: grid;
  grid-template-columns: 100px 1fr 100px;
  grid-template-rows: auto;
  grid-template-areas:
    "header header header"
    ". main ."
    "sidebar main sidebar";
}
<br>
.header {
  grid-area: header;
}
<br>
.sidebar {
  grid-area: sidebar;
}
<br>
.main {
  grid-area: main;
} 

将这两个 grid 布局并列显示，可以使用以下代码：

<div class="container">
  <div class="grid1">
    <!-- 第一个 grid 布局代码 -->
  </div>
  <div class="grid2">
    <!-- 第二个 grid 布局代码 -->
  </div>
</div>
<br>
<style>
  .container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 20px;
  }
<br>
  .grid1, .grid2 {
    background-color: #f0f0f0;
    padding: 20px;
  }
</style> 

使用这个代码，我们可以将两个 grid 布局并排显示。你可以自己尝试更改这两个 grid 布局的属性来达到你想要的效果。