重温一下 CSS Grid网格布局

CSS Grid布局是一个强大的工具，可以用来创建复杂且响应式的网页布局。它提供了二维的布局能力，即可以同时控制行和列。本文将介绍CSS Grid布局的基本概念、常用属性及高级用法，并通过具体实例展示其强大之处。

1. 基本概念

CSS Grid主要由两个部分组成：网格容器（Grid Container）和网格项目（Grid Items）

fr（fraction）单位表示可用空间的比例分配。

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;  /*平均分成3列*/
  gap: 10px; /*每个格子之间间隔 10px*/
}

.grid-item {
  background-color: #ccc;
  padding: 20px;
  text-align: center;
}

运行效果

2. 定义网格

你可以使用grid-template-columns和grid-template-rows来定义列和行的大小。

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: 200px 600px; /* 总共分成2列 第一列宽100px 第二列宽 600px*/
  grid-template-rows: 100px 200px; /*第一行高 100px  第二行 高200px*/
  gap: 10px;
}

.grid-item {
  background-color: #ccc;
  
  text-align: center;
}

3.网格项目的对齐

使用align-items和justify-items可以对齐网格项目。和flex 布局有点像

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
 
</div>

.grid-container {
  height: 300px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 10px;
  align-items: center; /* 垂直对齐 */
  justify-items: center; /* 水平对齐 */
}

.grid-item {
   width: 40px;
   height: 40px;
   display: block;
   text-align: center;
  background-color: #ccc;
  
}

可以看到内部元素 grid-item 在各自的内部空间上下左右对齐了

4. 网格项目的跨行和跨列

使用grid-column和grid-row可以让网格项目跨越多行或多列。感觉有点像表格合并。

 <div class="grid-container">
  <div class="grid-item item1">1</div>
  <div class="grid-item item2">2</div>
  <div class="grid-item item3">3</div>
  <div class="grid-item item4" style="height:60px">4 </div>
 
</div>

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 10px;
}

.item1 {
  background-color: #ccc;
  grid-column: span 2; /* 跨两列 */
}

.item2 {
  background-color: #ddd;
  grid-row: span 2; /* 跨两行 */
}

.item3, .item4 {
  background-color: #eee;
}

5. 多行和多列间隙

设置不同的行间隙和列间隙 column-gap 列间隙 row-gap 行间隙

  <div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  column-gap: 20px; /* 列间隙 */
  row-gap: 10px; /* 行间隙 */
}

.grid-item {
  background-color: #ccc;
  padding: 20px;
  text-align: center;
}

6.自动填充和自动适应

使用repeat和auto-fill、auto-fit可以创建自适应网格。

这里用到了 minmax 是CSS Grid布局中的一个函数 ，用于定义网格容器中网格轨道的大小范围。它接受两个参数，第一个参数表示网格轨道的最小大小，第二个参数表示网格轨道的最大大小。

• 自动填充网格 auto-fill 在轨道重复过程中，尽可能多的根据元素创建轨道，如果创建的轨道数量是小数比如6.5，那么0.5就被称为剩余空间，剩余的空间不够一个轨道了，就相当于每个轨道1fr进行分配这个0.5的剩余空间，没有元素填充的空轨道不会折叠依然保留。

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); 
  /*
  //grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  */ 
  gap: 10px;
}

.grid-item {
  background-color: #ccc;
  padding: 20px;
  text-align: center;
}

宽度为100px 的时候 （相当于留了空白） 宽度为200px 的时候

• 自动适应网格 auto-fit 在轨道重复过程中，尽可能多的根据元素创建轨道，并均分不到一个轨道的剩余空间。轨道分配完以后如果轨道中没有元素则将所有没有元素填充的空轨道折叠为0，即把没有元素填充的空轨道全被分配给有元素的轨道。最后没有空轨道剩余。

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); 
  /*
  //grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  */ 
  gap: 10px;
}

.grid-item {
  background-color: #ccc;
  padding: 20px;
  text-align: center;
}

宽度为100px 的时候 （相当于有元素填充的轨道全部为1fr） 宽度为200px 的时候

7. grid-row-start 和 grid-row-end 属性详解

grid-row-start属性指定一个网格项目开始的位置，具体为其开始的网格线编号或名称。 span 关键字，用于使网格项目跨越多个网格轨道 auto 关键字，表示根据默认自动放置规则放置项目。

 <div class="grid-container">
  <div class="grid-item item1">1</div>
  <div class="grid-item item2">2</div>
  <div class="grid-item item3">3</div>
  <div class="grid-item item4">4</div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 10px;
}
.grid-item{
   background-color: #ccc;
}

.item1 {
  grid-row-start: 3;
   background-color: #eee;
}

在这个例子中 本来 item1 应该是在第一行第一个位置 但是我们设置 grid-row-start:3 则变成了下面从第三行第一个位置

grid-row-end属性指定一个网格项目结束的位置，具体为其结束的网格线编号或名称。下面这个例子是 和上面 grid-row-start 配合起来使用

 <div class="grid-container">
  <div class="grid-item item1">1</div>
  <div class="grid-item item2">2</div>
  <div class="grid-item item3">3</div>
  <div class="grid-item item4">4</div>
  <div class="grid-item item5">5</div>
  <div class="grid-item item6">6</div>
  <div class="grid-item item7">7</div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 100px 100px 100px 100px;
  gap: 10px;
}
.grid-item {
  background-color: #eee;
}
.item1 {
  grid-row-start: 2;
  grid-row-end: span 2; /* 跨越两行 */
  background-color: #ccc;
}

在这个例子中 本来 item1 应该是在第一行第一个位置 但是我们设置 grid-row-start:2 则变成了下面从第二行第一个位置 然后设置了 grid-row-end: span 2; 跨越两行 则如下效果

总结

本文只列举了平时开发中常用的Grid布局。希望这次的内容能让你觉得更加全面和充实。