❤️谈谈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案例：在线代码入口👉👉(点击传送)

对齐子元素容器的起始边框，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案例：在线代码入口👉👉(点击传送)

对齐容器的水平和垂直起始边框，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

横纵向网格线始终比横纵向子元素多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

在上面 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;

}