阅读 1497
❤️谈谈grid布局(细读必有收获)

❤️谈谈grid布局(细读必有收获)

本文已参与「掘力星计划」,赢取创作大礼包,挑战创作激励金。

引言

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

1. grid布局

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

经典九宫格布局: image.png

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

1.1 display

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

image.png 代码案例 在线代码入口:👉👉(点击传送)

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

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

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

image.png
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);
}
复制代码

image.png
代码案例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、划分出ai九个区域
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-gapgrid-column-gapgrid-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; */
}
复制代码

image.png

1.5 grid-auto-flow

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

image.png image.png

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

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

.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例子就不多做解析,在线代码入口👉👉(点击传送)

image.png image.png

1.6 justify-itemsalign-itemsplace-items

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

place-items: <align-items> <justify-items>
复制代码

属性可选值(三个属性均有以下可选值)

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

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

1.7 justify-contentalign-contentplace-content

注意这三个属性和1.6描述的区别在于, justify-itemsalign-itemsplace-items是针对子元素内容的,justify-contentalign-contentplace-content是针对grid容器内容的

属性说明
justify-content:设置grid布局容器内容水平位置
align-content:设置grid布局容器内容垂直位置
place-content:align-contentjustify-content 两个属性的简写方式,若省略第二个值,则认为第二个值等于第一个值

place-content: <align-content> <justify-content>
复制代码

属性可选值(三个属性均有以下可选值)

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

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

  justify-content:start;
  align-content:start;
复制代码

image.png

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

  justify-content:end;
  align-content:end;
复制代码

image.png


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

  justify-content:center;
  align-content:center;
复制代码

image.png


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

  justify-content:stretch;
  align-content:stretch;
复制代码

image.png


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

  justify-content:space-around;
  align-content:space-around;
复制代码

image.png


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

  justify-content:space-between;
  align-content:space-between;
复制代码

image.png

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

  justify-content:space-evenly;
  align-content:space-evenly;
复制代码

image.png

1.8 grid-auto-columnsgrid-auto-rows

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

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

.grid_container {
  grid-auto-columns:100px;
  grid-auto-rows:100px;
}
复制代码

image.png

1.9 grid-templategrid

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

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

2.0(子元素)grid-column-startgrid-column-endgrid-row-startgrid-row-endgrid-columngrid-row

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

横纵向网格线始终比横纵向子元素多1,下面通过几个案例帮助理解 image.png
案例1:在线代码入口👉👉(点击传送)
🥇当方块一想占满横向两个方格时,将方块一的grid-column-startgrid-column-end分别设置成13,或者设置grid-column: 1/3
🥈当方块一想占满纵向两个方格时,将方块一的grid-row-startgrid-row-end分别设置成13,或者设置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; /*效果相同 */
}
复制代码

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

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

效果如下:
image.png

2.1 (子元素)justify-selfalign-selfplace-self

其实这一节没啥好讲的,属性justify-itemsalign-itemsplace-items 属性效果一样,只不过前者是统一设置grid容器中的子元素内容位置,后者则是在子元素上单独设置,并且会覆盖统一设置的效果。

justify-self:设置水平位置
align-self:设置垂直位置
place-selfalign-self属性和justify-self属性的合并简写形式。(忽略第二个值,则认为第二个值等于第一个值)
案例1:在线代码入口👉👉(点击传送)
所有子元素内容水平垂直居中,第一个子元素内容对齐垂直方向结束边框align-self: end;,对齐水平方向结束边框justify-self: end;
代码和效果如下:justify-selfalign-self 覆盖了justify-itemsalign-items 设置的居中显示

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

image.png

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;
}
复制代码

image.png
案例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;
}
复制代码

image.png

grid相关属性

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

grid-item相关属性(这是写在子元素的属性)

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

grid相关函数

属性名属性说明例子例子说明
repeat()设置重复的值
minmax()函数产生一个长度范围,不小于参数1,不大于参数2grid-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,中间宽度自适应
文章分类
前端
文章标签