CSS网格布局简介

网格布局使得创建网站布局比传统方法更容易，而且不会影响 HTML 元素的结构。它特别适合具有垂直轴和水平轴的网格状布局，而使用 Flexbox 很难创建这种布局。

创建常用布局时了解网格布局的基础知识

<div class="container">
  <header class="header">header</header>
  <main   class="main"  >main</main>
  <aside  class="aside" >aside</aside>
  <nav    class="nav"   >nav</nav>
  <footer class="footer">footer</footer>
</div>

使用 Flexbox 创建时

使用 Flexbox 创建此布局时，通过用标签等包围要水平对齐的元素（aside、main、div、nav）来创建 Flex 容器div，并将要水平对齐的元素作为 Flex 项目放置。

必须添加标签，这增加了一个额外的元素。

使用网格布局创建时

网格布局指定布局周围的容器元素（在我们的示例中.container）如何排列其子元素。与 Flexbox 不同，不需要准备用作排列元素的行/列容器的元素。

我们将在解释网格布局的容器和项目的同时，使用 CSS 创建布局。

网格容器

创建网格容器以在网格布局中排列元素。指定一个元素display: grid使其成为网格容器。（当将其视为内联元素时display: inline-grid指定）

.container {
  display: grid;
}

这仍然只是排列元素。因此，指定将网格容器划分为多个网格容器。

垂直和水平分割网格容器。垂直划分的每列的大小由grid-template-columns水平划分的每行的大小grid-template-rows指定。

让我们指定列宽。在此布局中，左侧边栏宽度为 180 像素，右侧边栏宽度为 160 像素。中央主区域的宽度是可变的，即父元素的宽度减去左右侧边栏的宽度。

在这里，fr我们将使用该单位来指定主要区域的宽度。fr是一个单位，可用于指定划分网格容器的大小。从总宽度中减去指定的fr单位（px例如），并将剩余宽度fr分配给指定的列。flex-grow该图像类似于Flexbox属性。这次我想通过从整体宽度中减去左右侧边栏的宽度（180px、160px）来分配主区域的宽度，所以写如下。

.container {
  display: grid;
  /* 从第一列开始 180px 1fr 160px  */
  grid-template-columns: 180px 1fr 160px;
}

以同样的方式指定每行的高度。

.container {
  display: grid;
  /* 从第一列开始 180px 1fr 160px  */
  grid-template-columns: 180px 1fr 160px;
  /* 从第一行开始 60px 1fr 90px  */
  grid-template-rows: 60px 1fr 90px;
}

此时的列和行称为网格轨道。划分列和行的线称为网格线。

微信截图_20241218222001.png

设置每个元素所占格子

放置网格项目。网格容器正下方的子元素称为网格项。在这种情况下，标题、主要内容、左右侧边栏和页脚都是网格项。

划分网格轨道的网格线从第一行开始自动编号为 1、2、3 等。指定网格项将从哪一列放置到哪一条grid-column-start网格线grid-column-end。

同样，grid-row-start使用grid-row-end和指定从哪条网格线到哪条网格线放置。

.header {
  /* 列的第一条到第四条网格线 */
  grid-column-start: 1;
  grid-column-end: 4;
  /* 行的第一条到第二条网格线 */
  grid-row-start: 1;
  grid-row-end: 2;
}

此时，如果grid-column-end指定，则会被放置在从每个指定grid-row-end的网格线到下一个网格线的范围内。

.header {
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: auto;
}
.main {
  grid-column-start: 2;
  grid-column-end: auto;
  grid-row-start: 2;
  grid-row-end: auto;
}
.aside {
  grid-column-start: 1;
  grid-column-end: auto;
  grid-row-start: 2;
  grid-row-end: auto;
}
.nav {
  grid-column-start: 3;
  grid-column-end: auto;
  grid-row-start: 2;
  grid-row-end: auto;
}
.footer {
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 3;
  grid-row-end: auto;
}

grid-column-start可以使用简写grid-column-end property来指定grid-column。在这种情况下，可以省略。

//如果以指定 相邻格子的起点  可以设置该属性为 auto 
.header {
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: auto;
}
//简写
.header {
  grid-column: 1 / 4;
  grid-row: 1;
}

网格布局平铺元素

微信截图_20241218222606.png
虽然可以使用 float 或 Flexbox 创建这种布局，但使用 Grid Layout 更方便的点

.container {
  display: grid;
  /* 重复 最小100px、最大1fr 列 */
  grid-template-columns: repeat(
    auto-fill,
    minmax(100px, 1fr)
  );
  column-gap: 10px;
  row-gap: 10px;
}