flex 布局在项目中是必不可少的，但 grid 是一个比 flex 布局还要强大的布局方式。所以今天就来重学一遍 grid 栅格布局。

一、grid 基本概念

flex 可以看做一维布局，只针对的是水平方向或者垂直方向。grid 则将容器划分成行和列，产生单元格，然后指定项目的单元格，可以看做是一个二维布局。所以 grid 布局要比 flex 布局更强大。

1.1、容器和项目

容器 [container]：采用网格布局的区域，就叫做容器。

项目 [ item ]：容器内部采用网格定位的子元素，叫做项目。

注意：最外层包裹的就是容器，项目只能是容器的顶层子元素，不包含项目的子元素，grid 布局只对项目生效。

1.2、行和列

二维布局就像表格一样，容器里面的水平区域称为行[ row ]。容器的垂直方向区域称为列[ column ]。

1.3、单元格

单元格[ cell ]：行和列的交叉区域就称为单元格。

单元格的数量是由行和列决定的。如 n 行 m 列，将会产生 n*m 个单元格。

1.4、网格线

网格线：划分单元格的线，就叫做网格线。水平网格线划分出行，垂直网格线划分出列。

栅格布局的基本概念以及分布结构如图：

二、容器属性

grid 布局的属性分为两类，一类定义在容器上面，称为容器属性。另外一个定义在项目上，所以叫做项目属性。所以该部分所讲的属性都是定义在容器上面的。

2.1、display

div{
 display:grid
}

用来指定容器的布局方式，采用网格布局。

默认情况下，容器都是块级元素，也可以设计成行内元素。使用：

display : inline-grid ;

注意点：使用栅格布局之后，容器子元素的 float、inline-block、table-cell、vitical-align 属性都将失效。

2.2、grid-template-columns、grid-template-rows

gird-template-columns 用来设置容器要被划分为几列，被划分列的宽度设置。

grid-template-rows 用来设置容器被划分成几行，并设置每行的高度。

使用示例：

.container{
 display:grid;
 grid-template-columns: 200px 100px 50px;
 grid-template-rows:50px 50px;
}

上面代码设置三列，宽度分别为：200px、100px 和 50px。设置了两行，高度都设置成50px 。

生成一个简单的布局如图：

我们设置了两行，前两行的高度都是 50px ，超出两行的未设置高度，会自动挤满剩余的容器。

除了上述的固定大小之外，也可以使用百分比。

1.repeat()

我们上边设置两个行的高度都为 50px ，我们如果设置100行都为 50px 时，重复写 100 个值非常麻烦，还容易出错，所以引入了 repeat 函数。

repeat() 函数可以简化重复值，使用语法为：

grid-template-row: repeat( n , size )

语法中，两个参数，第一个参数 n ，表示重复的次数，第二个参数表示需要重复的值。第二个参数：可以是单个值也可以是多个值。所以：

grid-template-rows:50px 50px;
// 可改写为
grid-template-rows: repeat( 2, 50px );

重复多个值：

grid-template-rows: repeat( 2, 100px 80px 50px)

相当于把后边的 100px 80px 50px 重复 2 次，就是分成了 6 列。

2.auto-fill

auto-fill 表示自动填充。

有时单元格大小是固定的，但是容器大小是不确定的，使用 auto-fill 设置能够尽可能多的单元格，自动地填充容器。

使用示例：

.container {
 grid-template-columns: repeat(auto-fill, 150px);
}

上述实例，表示所有的列宽度大小都为 150px ，自动填充，直到容器不能放置更多的列，剩余的列会自动排列到下一行。

3.fr 关键字

为了方便表示比例关系，网格布局提供了 fr 关键字。

使用示例：

grid-template-columns: 1fr 200px;

上述代码表示：设置两列，第二列固定宽度为 200px，第一列自动填充容器剩余宽度。

grid-template-columns: 1fr 2fr;

上边这个代码没有具体的数值，两个都是 fr，表示两列的宽度为 1:2，填满容器。

实现效果如图：

4.minmax()

minmax() 函数会产生一个长度范围，表示长度的一个最大和最小值，使用语法为：

minmax( min, max )

可以接受两个参数，第一个参数表示最小值，第二个参数表示最大值。

使用示例：

grid-template-columns: 1fr 2fr minmax( 100px, 150px )

上述代码表示：容器内设置三列，第一列与第二列是 1:2，第三列大小介于 100-150px之间。

5.auto

auto 关键字，自动分配大小，由浏览器自己决定。

使用示例：

grid-template-columns: 100px auto 50px;

表示第一和第三列大小分别为 100 和 50 。第二列 auto 会自动填充容器剩余的宽度。除非单元格设置了 min-width ，而且这个值大于最大宽度。

6.网格线

可以使用方括号，指定每一根网格线的名字，方便以后定位的引用。设置到 grid-template-columns 属性 和 grid-template-rows 属性里面。

.container {
  display: grid;
  grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];
  grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4];
}

上述代码指定网格是 3*3 的布局，因此会有4根垂直网格线和4根水平网格线。

表示垂直方向的四根线依次为：c1、c2、c3、c4。

表示水平方向的四根线依次为：r1、r2、r3、r4。

2.3、row-gap、column-gap、gap

row-gap：设置行间距的。它替代了之前的 grid-row-gap 。

column-gap：设置列之间的间距，它替代了之前 grid-column-gap。

使用示例：

row-gap:20px;
column-gap:20px;

运行结果为：

gap 属性是用来合并上述 column-gap 和 row-gap 两个属性。它替代了之前的 grid-gap。

上述两个代码可以合并成：

gap: 20px 20px;

第一个值表示行间距，第二个表示列间距。如果两个值相同，则可以合并写成一个。如：

gap: 20px;

2.4、grid-template-areas

网格布局允许指定区域，一个区域可以是一个单元，也可以是很多个单元格组合而成。grid-template-areas 属性用于定义区域。

使用示例：

grid-template-areas:'a b c' 'd e f' 'g'

将每个单元格设为一个区域。分别对应下边这七个单元。

将多个单元格作为一个区域，使用示例：

grid-template-areas:'a a a' 'b b b' 'c'

将上边的七个单元格划分为 3 个区域，分别为： a b c

2.5、grid-auto-flow

用于定义格子的排列顺序，默认的放置顺序为先行后列，即填满第一行，再开始放入第二行。

grid-auto-flow 有两个属性值：

• row：先行后列，也是默认值。
• column：先列后行。

排列方式直接影响最终的布局。如图所示：

还有一个 dense 修饰，设置的值为：row dense 和 column dense 。

在设置

grid-auto-flow: row;

页面会产生这样的布局：

第一个单元格后面位置是空的，这是因为 3 号项目默认排列在 2 号项目之后，所以导致上面空了。

如果使用 row dense ，表示 先行后列，并且尽可能紧密填满，尽量不出现空白。

grid-auto-flow: row dense;

提高了容器的空间利用率。项目排列为：

2.6、justify-items、align-items

justify-item：设置单元格内容在水平方向的对齐方式。

align-item：设置单元格内容在垂直方向的对齐方式。

使用语法：

justify-items: start | end | center | stretch
align-items: start | end | center | stretch

语法内对齐方式及意义：

• statr：对齐单元的起始边缘。
• end：对齐单元格的结束边缘。
• center：单元格内部对齐。
• stretch：拉伸，占满单元格整个宽度或高度。也是默认值。

示例：

justify-items: start;

运行结果如图：

justify-items: end;

2.7、justify-content、align-content、place-content

justify-content 属性设置整个内容区域在容器里面的水平位置。

align-content 属性是整个内容区域在垂直方向的位置。

使用语法：

 justify-content: start | end | center | stretch | space-around | space-between | space-evenly;

align-content: start | end | center | stretch | space-around | space-between | space-evenly;  

使用这个语法时，需要先把内容大小设置的比容器小时，效果更明显。

这两个属性的写法相同，语法内对齐方式及意义：

• start：对齐容器的起始位置。
• end：对齐容器的结束位置。
• center：容器内容居中。
• stretch：拉伸占据整个网格容器。
• space-around：每个项目的两侧间隔相等。
• space-between：项目与项目间隔相等，项目与容器边框之间没有间隔。
• space-evenly：项目与项目的间隔相等，项目与容器之间也是同样长度的间隔。

使用示例：

justify-content: space-around

运行结果为：

justify-content: space-between

justify-content: space-evenly

place-content 用于合并 align-content 属性和 justify-content 属性。使用语法为：

place-content: <align-content> <justify-content>

如果只使用了一直值，默认两个属性值是相同的。

2.8、grid-auto-rows、grid-auto-columns

有些项目的指定位置，在现有的网格外部，比如：

.container{
 height:300px;
 width:400px;
 display:grid;
 grid-template-columns: 100px 80px 50px;
 grid-template-rows:50px 50px; 
 }

设置了三列两行，但是写了 7 个div，这时浏览器就会自动创建多余网格，所以第七个网格就叫做多余的网格，如上图。

grid-auto-columns ：用来设置浏览器自动创建的多余网格的列宽。

grid-auto-rows：用来设置浏览器自动创建的多余网格的行高。

如果不指定大小时，浏览器会根据单元格内容，决定多余网格的列宽和行高，默认挤满容器剩余空间。

给上述实例新增

grid-auto-rows:80px;

运行结果如图：

三、项目属性

定义在项目上的属性，称之为项目属性。下列这些属性都是定义在项目上的。

3.1、grid-column-start、grid-column-end、grid-row-start、grid-row-end

在容器属性中有定义网格线，网格线介绍方便以后的定位使用，主要指的就是项目定位。

项目的位置也是可以指定的，具体方法就是指定项目的四个边框，分别定位到哪根网格线。

• grid-column-start：定义左边框所在垂直网格线。
• grid-column-end：定义右边框所在的垂直网格线。
• grid-row-start：定义上边框所在水平网格线。
• grid-row-end：下边框所在的水平网格线。

使用示例：

.item-1{
 background:pink;
 grid-column-start:1;
 grid-column-end:3;
 grid-row-start:1;
 grid-row-end:3;
}

指定 1 号项目，左边框是1号线，右边框是3号线。上边框是1号线，下边框 3 号线。所以 1 号项目，最终占据两行两列。

运行如图：

有时候横跨列数或者行数太多时，数网格线就有点麻烦，容易犯错误。我们也可以使用 span 设置横跨的个数。

span 设置横跨的行数或列数。与 table 中的 colspan 、rowspan 相似，便于记忆。使用的时候与上述的四个属性相结合使用。

.item-1{
  grid-column-start:span 2;
	grid-row-start:span 2;
}

与上述效果相同。

注意：如果产生了项目重叠，则使用 z-index 属性指定项目的重叠顺序。

3.2、grid-column、grid-row

grid-column：属性用于合并 grid-column-start 和 grid-column-end。简写列的定位。

使用语法：

grid-column: <start-line> / <end-line>

grid-row：用于合并 grid-row-start 和 grid-row-end 。简写行线的定位。使用语法：

grid-row: <start-line> / <end-line>

使用示例：

.item-1{
 grid-column-start:1;
 grid-column-end:3;
 grid-row-start:1;
 grid-row-end:3;
}

可以简写为：

.item-1{
 grid-column:1/3;
 grid-row:1/3
}

3.3、grid-area

grid-area：指定项目放入哪个区域。

使用方式1：与容器属性中的 grid-template-areas 配合使用。使用语法：

.container{
 grid-template-areas:  'a a a' 'b b b' 'c' 
}
.item-1{
 grid-area: b
}

grid-area 后的属性值根据上边定义的区域名而来。

使用方式2：通过指定行线和列线的开始和结束位置来指定区域。使用语法：

grid-area: <row-start> / <column-start> / <row-end> / <column-end>

3.4、justify-self、align-self、place-self

justify-self：属性设置单元格内容的水平位置（左中右），与 justify-items 属性用法一致，区别在于 justify-items 用于容器，而 justify-self 用于单个项目。使用语法：

justify-self: start | end | center | stretch

align-self：设置单元格的内容垂直方向（上中下），跟 align-items 属性用法一致，区别在于 align-items 用于容器，slign-self 用于单个项目。

align-self: start | end | center | stretch

属性值以及意义与上述一致，此处不再解释。

place-self：用于合并 align-self 属性和 justify-self 属性，简写水平和垂直方向的对齐方式。使用语法：

place-self: <align-self> <justify-self>;

如果省略第二个值，则默认两个值相等。

四、实现两栏布局

两栏布局是最常见的一种方式，面试中也经常会遇到问你两栏布局都有哪些方案？

<style>
 body{
  background-color: #EBEBEB;
  margin:0;font-size:30px; 
  text-align:center;
  line-height:100vh
 }
 .section{
  height:100vh;
  display:grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows:auto; 
  gap:10px 10px;
 }
 .aside{
  background:pink;
  grid-column:1/2;
  grid-row:1/2;
 }
 .main{
  background:lightblue;
  grid-column:2/3;
  grid-row:1/2;
 }
</style>
 
<div class="section">
 <aside class="aside">aside</aside>
 <main class="main">main</main> 
</div>

运行结果：