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

对齐子元素容器的起始边框,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


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


作者:是舍长
链接:https://juejin.cn/post/7017074528752762911

0 个评论

要回复文章请先登录注册