Grid 布局即网格布局,擅长于将一个页面划分为几个主要区域,以及定义这些区域的大小、位置、层次等关系。是二维布局,它将容器划分为了行和列,产生了一个个网格(一个m行n列的网格,需要使用m+1条横向,n+1条纵向网格线组成)。常用于整个页面的规划。可以通过display: grid设置。
设置了display: grid属性的元素称为“grid容器”。grid布局中每个网格内部的元素称为grid项目。
grid容器的属性
grid-template-rows与grid-template-columns
前者表示划分行,后者表示划分列,下面来看七种取值情况。
情况一:数值
.box {
width: 200px;
height: 200px;
border: 1px solid #000;
margin: 100px auto;
display: grid;
grid-template-rows: 50px 50px 50px;
grid-template-columns: 50px 50px 50px;
}
如上,划分了一个3*3的网格布局,每个网格长为50px,宽也为50px。在浏览器工具中,将右上角的箭头选中,即可查看网格
情况二:%
.box {
width: 200px;
height: 200px;
border: 1px solid #000;
margin: 100px auto;
display: grid;
grid-template-rows: 20% 40% 40%;
grid-template-columns: 50px 50px 50px;
}
如上,还是划分了一个3*3的网格布局,不过这次通过%取值 ,按照grid容器的height进行分割
情况三:repeat函数
如果要划分一个20*20的网格,按照上面两种办法,就要写20组数据,太过麻烦,简单写法是通过repeat函数,如下
.box {
width: 300px;
height: 300px;
border: 1px solid #000;
margin: 100px auto;
display: grid;
grid-template-rows: repeat(20, 12px);
grid-template-columns: repeat(20, 12px);
}
repeat(n,m) n:重复次数,m:重复的数值。如上,划分了一个20*20的网格,每个网格的行高与列宽都是12px。
情况四:auto-fill(自动填充)
.box {
width: 200px;
height: 200px;
border: 1px solid #000;
margin: 100px auto;
display: grid;
grid-template-rows: repeat(auto-fill, 30%);
grid-template-columns: repeat(4, 25%);
}
auto-fill应用在repeat函数中,代表根据需要重复的值,自动填充数量,如上,行高为30%,进行自动填充,直到height剩余部分不满30%,则不再填充。
情况五:auto
.box {
width: 200px;
height: 200px;
border: 1px solid #000;
margin: 100px auto;
display: grid;
grid-template-rows: 50px auto 50px;
grid-template-columns: auto auto auto;
}
auto表示自动填充剩余部分,多个auto则平分剩余部分
情况六:fr片段划分
.box {
width: 200px;
height: 200px;
border: 1px solid #000;
margin: 100px auto;
display: grid;
grid-template-rows: 1fr 2fr 3fr;
grid-template-columns: auto auto auto;
}
网格布局自带的fr关键字,意为片段,用来表示比例关系。如上,行高之比分别为1:2:3
情况七:minmax函数
.box {
width: 200px;
height: 200px;
border: 1px solid #000;
margin: 100px auto;
display: grid;
grid-template-rows: 50px 50px minmax(50px, 80px);
grid-template-columns: 50px 50px minmax(80px, 150px);
}
minmax(min, max);min代表最小值,max代表最大值。如果剩余长度大于最大值,则使用最大值(如上述行高)。如果剩余长度小于最大值且大于最小值,则使用剩余长度(如上述列宽)。如果剩余长度小于最小值,则使用最小值(会超出grid容器,如下的列宽)
.box {
width: 200px;
height: 200px;
border: 1px solid #000;
margin: 100px auto;
display: grid;
grid-template-rows: 50px 50px minmax(50px, 80px);
grid-template-columns: 50px 50px minmax(110px, 150px);
}
grid-row-gap与grid-column-gap与grid-gap
前者表示划分行间距,中间表示划分列间距,后者是前两者的复合形式
.box {
width: 200px;
height: 200px;
border: 1px solid #000;
margin: 100px auto;
display: grid;
grid-template-rows: 50px 50px 50px;
grid-template-columns: 50px 50px 50px;
grid-row-gap: 10px;
grid-column-gap: 10px;
}
grid-gap: 10px 10px是划分间距的复合形式,第一个参数是行间距,第二个参数是列间距。
grid-template-areas 、grid-area
grid-template-areas 属性在网格布局中规定区域,一个区域可由单个或多个单元格组成
grid-template-areas: 'a a b'
'a a b'
'c c c'; /* 三行 三列 */
上述示例,设置了3个区域,区域名字分别为a,b,c。它们所占整个网格的占比和它们的数量有关,位置也与上述写法一致
grid-template-areas: 'a b'
'a a' /* 两行 两列 */
上述示例,设置了2个区域,区域名字分别为a,b
grid-template-areas 一般与grid-area搭配使用。grid-area 属性指定项目位于哪一个区域
.box {
margin: 100px auto;
width: 300px;
height: 300px;
border: 1px solid #000;
display: grid;
grid-template-rows: repeat(3, auto);
grid-template-columns: repeat(3, auto);
grid-template-areas: 'a a b'
'a a b'
'c c c';
}
.a {
grid-area: a;
background-color: cornflowerblue;
}
.b {
grid-area: b;
background-color: rgb(7, 61, 160);
}
.c {
grid-area: c;
background-color: rgb(1, 12, 31);
}
<div class="box">
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
</div>
控制项目的属性
当在grid布局中添加项目时,项目会默认撑开显示在网格内部,默认情况下,项目会从左到右、从上到下显示。而当给项目添加宽高时,就按宽高来,不再是撑开显示在网格内部了。
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
<div class="box">
<div style="width:20px;height:20px">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
grid-auto-flow
grid-auto-flow: row | column;
用来调整项目的显示顺序
row:项目横向显示,默认
column:项目纵向显示
.box {
width: 200px;
height: 200px;
border: 1px solid #000;
margin: 100px auto;
display: grid;
grid-template-rows: 50px 50px 50px;
grid-template-columns: 50px 50px 50px;
grid-auto-flow: column;
}
justify-items
justify-items:start | center | end | stretch
项目在网格中的水平对齐方式,其中 stretch 为默认值,表示拉伸,占满单元格的整个宽度(未定义宽度时)
从左到右,从上到下,分别是start | center | end | stretch,其中,第4幅,未设置宽高。
align-items
align-items:start | center | end | stretch
项目在网格中的垂直对齐方式,与justify-items使用方式相同
place-items
place-items: <align-items> <justify-items>
项目在网格中的对齐方式,为垂直、水平的复合属性,第一个参数为控制垂直,第二个参数为控制水平。
控制整体网格的属性
justify-content
justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
控制网格在grid容器内的水平位置
start - 对齐容器的起始边框
end - 对齐容器的结束边框
center - 容器内部居中
space-around - 每个项目两侧的间隔相等。所以,项目之间的间隔比项目与容器边框的间隔大一倍
space-between - 项目与项目的间隔相等,项目与容器边框之间没有间隔
space-evenly - 项目与项目的间隔相等,项目与容器边框之间也是同样长度的间隔
stretch - 项目大小没有指定时,拉伸占据整个网格容器
如图,定义了3行2列的网格,从左向右分别是start center end space-around space-between space-evenly stretch,且所有项目都未指定大小。
align-content
align-content: start | end | center | stretch | space-around | space-between | space-evenly;
控制网格在grid容器内的垂直位置,与justify-content使用方式相同
place-content
place-content: <align-content> <justify-content>
网格在容器中的对齐方式,为垂直、水平的复合属性,第一个参数为控制垂直,第二个参数为控制水平。
grid项目的属性
合并单元格
grid-column-start 、grid-column-end 、grid-row-start 、grid-row-end
grid-column-start 属性:左边框所在的垂直网格线
grid-column-end 属性:右边框所在的垂直网格线
grid-row-start 属性:上边框所在的水平网格线
grid-row-end 属性:下边框所在的水平网格线
如上,定义了一个4*3的网格,其中左上方和右下方是需要合并单元格
/* 左上方合并css */
.left_top {
background-color: rgb(12, 119, 122);
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 3;
}
/* 右下方合并css */
.right_bottom {
background-color: rgb(127, 196, 173);
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 3;
grid-row-end: 5;
}
结合图可以看出,grid-column-start从第几条网格线开始,grid-column-end到第几条网格线结束,这一部分的所有单元格进行合并。grid-row-xxx同理。
grid-column 、grid-row
是以上的简写形式
grid-row:n/m (n表示从第几条网格线开始,m表示到第几条网格线结束)
grid-column:n/m (n表示从第几条网格线开始,m表示到第几条网格线结束)
/* 左上方合并css */
.left_top {
background-color: rgb(12, 119, 122);
grid-row: 1/3;
grid-column: 1/3;
}
/* 右下方合并css */
.right_bottom {
background-color: rgb(127, 196, 173);
grid-row: 3/5;
grid-column: 3/4;
}