引言

本文内容很多，几乎涵盖了grid布局的大部分知识点🙄发现遗漏的欢迎指正🥬🥬，配套了每个属性参数的在线代码例子😎，如果你觉得文章不错请给个赞吧😅😅

1. grid布局

grid布局的理念是把网页划分成一个一个网格组合成不同样式的布局，再通过对网格进行内容填充，组成一个网页。通过一下这个案例了解grid的基本概念👇👇

经典九宫格布局：

🚨关键点🚨: 容器： 需通过display：grid设置为grid容器,容器中包含所有item 行： 横向为行，对应颜色块123 行距： 上下两个item的间距为行距 列： 纵向为列，对应颜色块147 列距： 左右两个item的间距为列距 item（子元素）： 也就是上图对应的123456789颜色块 边： 每个itme共有 上 下 左 右 四条边

1.1 display

display属性规定是否/如何显示元素。我们需要使用grid布局，就要把容器设置为grid或者inline-grid grid 设置为块级元素的grid布局 inline-grid 设置为行内元素的grid布局 区别如下：

代码案例 在线代码入口：👉👉(点击传送)

.grid_container {
  display:grid;
  /*   display:inline-grid; */
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
}

1.2 grid-template-columns 和 grid-template-rows

grid-template-columns属性用来定义grid布局的每一列列宽 grid-template-rows属性用来定义grid布局的每一行行高 代码案例1：在线代码入口👉👉(点击传送) 定义一个三行三列，每列列宽100px，每行行高100px

.grid_container {
  display:grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
}

代码案例2：在线代码入口👉👉(点击传送) 当拥有很多行和列的时候，普通的写法根本不实在，所以现在引入一个函数repeat() repeat()函数可设置重复的值，或者重复的一个模式，还是以三行三列100px为例：

.grid_container {
  display:grid;
  /* 重复一个值 */
  grid-template-columns: repeat(3,100px);
  grid-template-rows: repeat(3,100px);
  /* 重复一个模式
    grid-template-columns: repeat(3,100px 50px);
    grid-template-rows: repeat(3,100px 50px);
  */

}

代码案例3：在线代码入口👉👉(点击传送) 这里以圣杯布局为例：左右固定，中间自适应。在这种情况下固定的列宽或行高已经不能满足实现圣杯布局了，所以这个例子引入两个关键字auto和fr auto：自适应属性 fr：fraction 的缩写，意为"片段"，可以看做百分比属性，通过以下例子可以帮助理解该关键字 以auto为例：

.grid_container {
  display:grid;
  /* 左右列150px，中间列自适应*/
  grid-template-columns: 150px auto 150px;
   /* 一行行高 300px*/
  grid-template-rows: repeat(1,300px);
}

以fr为例： 左右列占比 2/10 = 20% ，中间列占比 6/10 = 60%， 注意10 = 2+6+2

#grid_container{
  display: grid;
  grid-template-columns: 2fr 6fr 2fr;
  grid-template-rows: repeat(1,300px);
}

代码案例4：在线代码入口👉👉(点击传送) 当需求是要求每个item子元素的宽高只有100px，但是容器宽度自适应时，我们就无法得知应该设置几行几列的属性了，所以这里再引入一个关键字auto-fill auto-fill:自动填充 ⚠️注意：grid-template-rows需要使用关键字时，容器必须要有固定高度⚠️

#grid_container{
  display: grid;
  height:500px;
  grid-template-columns: repeat(auto-fill,100px);
  grid-template-rows: repeat(auto-fill,100px);
}

代码案例5：在线代码入口👉👉(点击传送) 如果grid布局的子元素设置为自适应宽度，但宽度缩小到一定程度时就会出现错误，所以避免出现这种错误，我们必须要有一个最小的宽度，所以这里引入一个函数minmax() minmax()：设置一个长度范围，参数1：最小值，参数2：最大值 例子：最小值500px，最大值6fr

.grid_container {
  display:grid;
  width:600px;
  grid-template-columns: 2fr minmax(500px,6fr) 2fr;
/*  自行屏蔽查看区别  */
/*  grid-template-columns: 2fr 6fr 2fr; */
  grid-template-rows: repeat(1,300px);
}

1.3grid-template-areas

1.3 grid-template-areas

grid-template-areas:用于划分区域，通过以下案例可以帮助理解 代码案例1：在线代码入口👉👉(点击传送) 1、划分出a到i九个区域 2、或者每一行划分一个区域，三行就是a b c三个区域 2、当然可以不划分部分区域，使用（.）点表示不需要划分的区域

.grid_container {
  display:grid;
  grid-template-columns: repeat(3,100px);
  grid-template-rows: repeat(3,100px);
/*  划分九个区域  */
  grid-template-areas: 
    'a b c'
    'd e f' 
    'g h i';

/*  划分三个区域  */
/*   grid-template-areas: 
    'a a a'
    'b b b' 
    'c c c'; */
/*  不划分部分区域  */
/*   grid-template-areas: 
    'a . c'
    'a . c' 
    'a . c'; */
}

划分区域的用途会在后面结合其他的属性进行讲解！！

1.4 grid-row-gap 和 grid-column-gap 和 grid-gap

grid-row-gap：行间距 grid-column-gap：列间距 grid-gap: 行间距 和 列间距 的简写形式,如：grid-gap: <grid-row-gap> <grid-column-gap>;

代码案例1：在线代码入口👉👉(点击传送) 这里以最简单的九宫格为例

.grid_container {
  display:grid;
  grid-template-columns: repeat(3,100px);
  grid-template-rows: repeat(3,100px);
  grid-row-gap:10px;
  grid-column-gap:20px;
/*  下面语句和上面设置的间距效果相同，自行解除注释对比  */
/*   grid-gap:10px 20px; */
}

1.5 grid-auto-flow

grid-auto-flow：设置grid布局的放置顺序，正常情况下是，从左到右放置每一个item子元素，在特殊情况下我们可以重新改变它的放置顺序，比如从上到下。可选值：从左到右 row、从上到下column、稠密从左到右row dense、稠密从上到下column dense，接下来会一一举例说明； 正常设置grid-auto-flow属性为 row 和 column会出现以下两种效果，左边为row,右边为column

这里还是以九宫格为例，我们将 数字1 和 数字2 和 数字3 方块设置为各占2个单元格时，在grid-auto-flow属性默认等于row就会出现以下一幕 当我们把代码设置成 稠密型的从左到右row dense时，布局就会被尽可能的填满，不会出现上图存在的空格

代码如下:在线代码入口👉👉(点击传送)

.grid_container {
  display:grid;
  grid-template-columns: repeat(3,100px);
  grid-template-rows: repeat(3,100px);
/*  默认，从左到右  */
  grid-auto-flow:row;
  /*  稠密型 从左到右  请自行开启屏蔽 */
/*   grid-auto-flow:row dense; */
}
.item-1 {
  background-color: #B53471;
  grid-column-start: 1;
  grid-column-end: 3;  
}
.item-2 {
  background-color: #ffcccc;
  grid-column-start: 1;
  grid-column-end: 3; 
}
.item-3 {
  background-color: #ff4d4d;
  grid-column-start: 1;
  grid-column-end: 3; 
}

通过上面的例子可以清楚稠密型其实就是，尽可能填满容器而已，所以column dense例子就不多做解析，在线代码入口👉👉(点击传送)

1.6 justify-items 和 align-items 和 place-items

属性说明 justify-items:设置item子元素内容水平位置 align-items:设置item子元素内容垂直位置 place-items:align-items 和 justify-items 两个属性的简写方式，若省略第二个值，则认为第二个值等于第一个值

place-items: <align-items> <justify-items>

属性可选值（三个属性均有以下可选值）

可选值	可选值说明
start	对齐子元素容器的起始边框
end	对齐子元素容器的结束边框
center	子元素容器内部居中
stretch	item子元素大小没有指定时，拉伸占据整个网格容器

start案例：在线代码入口👉👉(点击传送) 对齐子元素容器的起始边框，justify-items对齐水平的起始边框，align-items对齐垂直的起始边框 end案例：在线代码入口👉👉(点击传送） 对齐子元素容器的结束边框，justify-items对齐水平的结束边框，align-items对齐垂直的结束边框 center案例：在线代码入口👉👉(点击传送） 子元素容器内部居中，justify-items水平居中，align-items垂直居中 stretch案例：在线代码入口👉👉(点击传送） 默认就是这个属性，只要不设置宽度和高度就会把宽高拉伸铺满

1.7 justify-content 和 align-content 和 place-content

注意这三个属性和1.6描述的区别在于， justify-items 和 align-items 和 place-items是针对子元素内容的，justify-content 和 align-content 和 place-content是针对grid容器内容的 属性说明 justify-content:设置grid布局容器内容水平位置 align-content:设置grid布局容器内容垂直位置 place-content:align-content 和 justify-content 两个属性的简写方式，若省略第二个值，则认为第二个值等于第一个值

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

属性可选值（三个属性均有以下可选值）

可选值	可选值说明
start	对齐grid容器的起始边框
end	对齐grid容器的结束边框
center	grid容器内部居中
stretch	grid容器内容大小没有指定时，拉伸占据整个grid容器
space-around	每个子元素两侧间隔相等，所以子元素之间间隔比容器边框的间隔大一倍
space-between	子元素与子元素之间间隔相等，子元素与容器边框没有间隔
space-evenly	子元素与子元素之间间隔相等，子元素与容器边框之间也是同样长度的间隔

start案例：在线代码入口👉👉(点击传送) 对齐容器的水平和垂直起始边框，justify-content对齐水平的起始边框，align-content对齐垂直的起始边框

  justify-content:start;
  align-content:start;

end案例：在线代码入口👉👉(点击传送) 对齐容器的水平和垂直结束边框，justify-content对齐水平的结束边框，align-content对齐垂直的结束边框

  justify-content:end;
  align-content:end;

center案例：在线代码入口👉👉(点击传送) 容器内容水平和垂直居中对齐，justify-content容器内容水平居中对齐，align-content容器内容垂直居中对齐

  justify-content:center;
  align-content:center;

stretch案例：在线代码入口👉👉(点击传送) 自动拉伸铺满grid容器，justify-content水平铺满容器，align-content垂直铺满容器

  justify-content:stretch;
  align-content:stretch;

space-around案例：在线代码入口👉👉(点击传送) 每个子元素两侧间隔相等，所以子元素之间间隔比容器边框的间隔大一倍

  justify-content:space-around;
  align-content:space-around;

space-between案例：在线代码入口👉👉(点击传送) 子元素与子元素之间间隔相等，子元素与容器边框没有间隔

  justify-content:space-between;
  align-content:space-between;

space-evenly案例：在线代码入口👉👉(点击传送) 子元素与子元素之间间隔相等，子元素与容器边框之间也是同样长度的间隔

  justify-content:space-evenly;
  align-content:space-evenly;

1.8 grid-auto-columns 和 grid-auto-rows

grid-auto-columns：设置多余列的列宽 grid-auto-rows：设置多余行的行高 在某种情况下，我们设置了9宫格布局可能会出现10个item子元素，那正常的前9个子元素都设置有合适的宽高，但是多余出现的第10个如果不进行设置，就会出现不正常的布局，通过以下案例可以帮助理解

当使用 grid-auto-flow:column;改变默认的放置顺序会出现以下情况 所以在出现以上情况时，使用grid-auto-columns 和 grid-auto-rows解决问题 在线代码入口👉👉(点击传送）,自行修改案例代码观察变化。

.grid_container {
  grid-auto-columns:100px;
  grid-auto-rows:100px;
}

1.9 grid-template 和 grid

grid-template属性是grid-template-columns、grid-template-rows和grid-template-areas这三个属性的合并简写形式。 grid属性是grid-template-rows、grid-template-columns、grid-template-areas、 grid-auto-rows、grid-auto-columns、grid-auto-flow这六个属性的合并简写形式。

这两个属性用法比较复杂，后期再考虑重新写一篇文章讲解，有需要的请在评论区留言，留言数多的话，会尽快出新文章

2.0（子元素）grid-column-start 和 grid-column-end 和 grid-row-start 和 grid-row-end和 grid-column和 grid-row

属性名	属性说明
grid-column-start	设置子元素左边框所在的网格线
grid-column-end	设置子元素右边框所在的网格线
grid-row-start	设置子元素上边框所在的网格线
grid-row-end	设置子元素下边框所在的网格线
grid-column	设置左边框和右边框所在的网格线，用 / 符号间隔开
grid-row	设置上边框和下边框所在的网格线，用 / 符号间隔开

横纵向网格线始终比横纵向子元素多1,下面通过几个案例帮助理解 案例1：在线代码入口👉👉(点击传送） 🥇当方块一想占满横向两个方格时，将方块一的grid-column-start和grid-column-end分别设置成1和3,或者设置grid-column: 1/3 🥈当方块一想占满纵向两个方格时，将方块一的grid-row-start和grid-row-end分别设置成1和3，或者设置grid-row: 1/3

.item-1 {
  background-color: #B53471; 
/*  横向  */
/*   grid-column-start: 1;
  grid-column-end: 3; */
   grid-column: 1/3; /*效果相同 */
    
/*  纵向  */
/*    grid-row-start: 1;
   grid-row-end: 3;  */
    grid-row: 1/3; /*效果相同 */
}

案例2：在线代码入口👉👉(点击传送） 🥇当遇到多个方格进行属性设置时，需要考虑网格线是否被别的元素包含，如下图所示： 所以在案例1的原有基础上，我们想把方块2的纵向占两个方块，位置放在原方块4和原方块7的位置，那么我们就要考虑方块1已经包含过的网格线不能使用。所以设置上边框网格线的的时候就要避开纵向的第2条网格线,这样我们要设置上边框网格线为3，下边框网格线为5

.item-2 {
  background-color: #ffcccc;
  grid-column: 1/2;
  grid-row: 3/5;
}

效果如下：

2.1 （子元素）justify-self 和 align-self 和 place-self

其实这一节没啥好讲的，属性justify-items和 align-items 和 place-items 属性效果一样,只不过前者是统一设置grid容器中的子元素内容位置，后者则是在子元素上单独设置，并且会覆盖统一设置的效果。 justify-self：设置水平位置 align-self：设置垂直位置 place-self：align-self属性和justify-self属性的合并简写形式。（忽略第二个值，则认为第二个值等于第一个值） 案例1：在线代码入口👉👉(点击传送） 所有子元素内容水平垂直居中，第一个子元素内容对齐垂直方向结束边框align-self: end;，对齐水平方向结束边框justify-self: end;

代码和效果如下：justify-self 和 align-self 覆盖了justify-items和 align-items 设置的居中显示

.grid_container {
  justify-items: center;
  align-items: center;
}
.item-1 {
  justify-self:end;
  align-self:end;
  background-color: #B53471; 
}

2.1 （子元素）grid-area

属性名	属性说明
grid-area	指定子元素防止在哪个区域

在上面 1.3 中已经说过如何划分区域了，接下来我们通过 grid-area 属性来了解如何使用区域 案例1：在线代码入口👉👉(点击传送） 将就九宫格中1 2 3 方块替换到 4 5 6方块

.grid_container {
  display:grid;
  grid-template-columns: repeat(3,100px);
  grid-template-rows: repeat(3,100px);
/*  划分九个区域  */
  grid-template-areas: 
    'a b c'
    'd e f' 
    'g h i';
}
.item-1 {
  background-color: #B53471; 
  grid-area: d;
}
.item-2 {
  background-color: #ffcccc;
  grid-area: e;
}
.item-3 {
  background-color: #ff4d4d;
  grid-area: f;
}

案例2：在线代码入口👉👉(点击传送） 将九宫格中的方块1 2 3 纵向占满两个单元格，方块4 水平占满3个单元格

.grid_container {
  display:grid;
  grid-template-columns: repeat(3,100px);
  grid-template-rows: repeat(3,100px);
/*  划分三个区域  */
  grid-template-areas: 
    'a b c'
    'a b c' 
    'd d d';
}
.item-1 {
  background-color: #B53471; 
  grid-area: a;
}
.item-2 {
  background-color: #ffcccc;
  grid-area: b;
}
.item-3 {
  background-color: #ff4d4d;
  grid-area: c;
}
.item-4 {
  background-color: #ffaf40;
  grid-area: d;
}

grid相关属性

属性名	属性说明	可选值
display	属性规定是否/如何显示元素
grid-template-columns	定义每一列的列宽（这里可以定义网格线名称）
grid-template-rows	定义每一列的行高
grid-template-areas	划分指定区域，一个区域由单个或多个单元格组成
grid-template	属性是grid-template-columns、grid-template-rows和grid-template-areas这三个属性的合并简写形式
grid-row-gap	定义行与行的间距
grid-column-gap	定义列与列间距
grid-gap	定义行和列的间距
grid-auto-flow	设置放置顺序	默认:row 、column、row dense、column dense
justify-items	属性设置单元格内容的水平位置	start、end、center、 stretch
align-items	属性设置单元格内容的垂直位置	start、end、center、 stretch
place-items	属性是align-items属性和justify-items属性的合并简写形式。若省略第二个值，则认为第二个值等于第一个值	start、end、center、 stretch
justify-content	属性设置grid容器内容的水平位置	start、end、center、 stretch、space-around、space-between、space-evenly
align-content	属性设置grid容器内容的垂直位置 start、end、center、 stretch、space-around、space-between、space-evenly
place-content	属性是align-content属性和justify-content属性的合并简写形式。若省略第二个值，则认为第二个值等于第一个值	start、end、center、 stretch、space-around、space-between、space-evenly
grid-auto-columns	设置多余列的列宽
grid-auto-rows	设置多余行的行高
grid	属性是grid-template-rows、grid-template-columns、grid-template-areas、 grid-auto-rows、grid-auto-columns、grid-auto-flow这六个属性的合并简写形式。

grid-item相关属性（这是写在子元素的属性）

属性名	属性说明	可选值
grid-column-start	设置子元素位置的左边框所在的垂直网格线
grid-column-end	设置子元素位置的右边框所在的垂直网格线
grid-row-start	设置子元素位置的上边框所在的水平网格线
grid-row-end	设置子元素位置的下边框所在的水平网格线
grid-column	grid-column-start 和 grid-column-end 的简写
grid-row	grid-row-start 和 grid-row-end 的简写
justify-self	属性设置单元格内容的水平位置（左中右）	start、end、center、 stretch、
align-self	属性设置单元格内容的垂直位置	start、end、center、 stretch、
place-self	属性是align-self属性和justify-self属性的合并简写形式。（忽略第二个值，则认为第二个值等于第一个值）
grid-area	属性指定子元素放在哪一个区域

grid相关函数

属性名	属性说明	例子	例子说明
repeat()	设置重复的值
minmax()	函数产生一个长度范围，不小于参数1，不大于参数2	grid-template-columns: 1fr minmax(100px, 1fr);	minmax(100px, 1fr)表示列宽不小于100px，不大于1fr

grid相关函数可使用的关键字

属性名	属性说明	例子	例子说明
auto-fill	自动填充	grid-template-columns: repeat(auto-fill, 100px);	以100px的宽度一列填充容器，可自动换行
fr	比例属性，根据比例分配宽高	grid-template-columns: 2fr 8fr;	（2+8=10） 第一列2/10（20%），第二列8/10（80%）
auto	自适应宽度	grid-template-columns: 100px auto 100px;	左右宽度100px，中间宽度自适应