概述
网格布局(Grid)是最强大的 CSS 布局方案。
它将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局。
Grid 布局的属性分成两类。一类定义在容器上面,称为容器属性;另一类定义在项目上面,称为项目属性。这部分先介绍容器属性。
容器属性
display
display: grid;
指定一个容器使用网格布局,容器是块级元素
display: inline-grid;
指定容器使用网格布局,容器是行内块级元素
注意网格布局以后,容器子元素(项目)的float
、display: inline-block;
、display: table-cell;
和column-*
等设置都将失效。
grid-template-rows和grid-template-columns属性
grid-template-rows
定义每一行行高、grid-template-columns
定义每一列列宽
例:
<ul>
<li v-for="i in 9" :key="i">表格布局{{ i }}</li>
</ul>
ul {
display: grid;
grid-template-rows: 100px 100px 100px;
grid-template-columns: 100px 100px 100px;
li {
text-align: center;
border: 1px solid #e6e6e6;
}
}
repeat()
repeat()简化重复的值,接收2个参数,参数一:重复几次,参数二:重复的数值
上面可以简化成
display: grid;
grid-template-rows: repeat(3, 100px);
grid-template-columns: repeat(3, 100px);
repeat()
重复某种模式也是可以的
ul {
display: grid;
grid-template-rows: repeat(3, 50px);
grid-template-columns: repeat(2, 100px 150px 50px);
li {
text-align: center;
border: 1px solid #e6e6e6;
}
}
auto-fill
有时候单元格大小是固定的,但容器大小不固定,如果希望每一行(或每一列)容纳尽可能多的单元格,这时候可以使用auto-fill关键字,表示自动填充
display: grid;
grid-template-columns: repeat(auto-fill, 20%);
fr关键字
为了方便表示比例关系,网格布局提供了fr
关键字,如果两列宽度分别为 1fr 和 2fr ,就表示后者是前者两倍。
display: grid;
grid-template-columns: 1fr 2fr 3fr;
fr
可以和绝对长度混合时候
display: grid;
grid-template-columns: 150px 1fr 2fr;
上面表示 第一列150,第二列是第三列的一半
minmax()函数
minmax()
函数产生一个函数范围,表示长度就在这个范围之内,接收两个参数,最小值和最大值。
display: grid;
grid-template-columns: 1fr minmax(100px, 300px);
auto关键字
auto
表示由浏览器自己决定长度
display: grid;
grid-template-columns: auto 100px 100px;
grid-column-gap / grid-row-gap / grid-gap
grid-column-gap
列间距,grid-row-gap
行间距
display: grid;
grid-row-gap: 10px;
grid-column-gap: 10px;
grid-gap
是grid-column-gap
和grid-row-gap
的简写
grid-gap: <grid-row-gap> <grid-column-gap>;
如果省略了第二个值,默认为第二个值等于第一个值
上面可以简写为:grid-gap: 10px;
grid-template-areas属性
网格布局允许定义区域(area),一个区域有单个或多个单元格组成,grid-template-areas
用来定义区域。
grid-template-areas: 'a b c'
'd e f'
'g h i';
多个单元格合并成一个单元格的写法
grid-template-areas: 'a a a'
'b c d'
'e e f';
需要配合 grid-area
使用
li {
text-align: center;
border: 1px solid #ccc;
padding: 10px 0;
&:nth-child(1) {
grid-area: a;
}
&:nth-child(7) {
grid-area: e;
}
}
如果某些区域不需要使用,或者单元格不属于任何区域,则使用点(.)表示。
grid-template-areas: 'a a .'
'a a .'
'. . .';
li {
text-align: center;
border: 1px solid #ccc;
padding: 10px 0;
&:nth-child(1) {
grid-area: a;
}
}
grid-auto-flow属性
划分网格后,容器的子元素会按照顺序,自动放置在每一个网格。默认的放置顺序是“先行后列”,例:
属性值:row
(先行后列)column
(先列后行)row dense
(先行后列,紧密排列) 和 column dense
(先列后行,紧密排序)
grid-auto-flow: column;
grid-auto-flow: row;
grid-auto-flow: row dense;
完整代码
ul {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-template-rows: repeat(3, 60px);
grid-auto-flow: row dense; //紧密
li {
text-align: center;
border: 1px solid #ccc;
padding: 10px 0;
&:nth-child(1), &:nth-child(2) {
grid-column-start: 1;
grid-column-end: 3;
}
}
}
justify-items 、align-items、place-items 属性
.container {
justify-items: start | end | center | stretch;
align-items: start | end | center | stretch;
}
start
:对齐单元格的起始边缘。
end
:对齐单元格的结束边缘。
center
:单元格内部居中。
stretch
:拉伸,占满单元格的整个宽度(默认值)。
place-items
属性是 align-items
属性和justify-items
属性的合并简写形式
place-items: <align-items> <justify-items>;
display: grid;
grid-template-columns: repeat(3, 150px);
grid-template-rows: repeat(3, 100px);
justify-items: center;
align-items: center;
justify-content、align-content、place-content
grid-auto-rows、grid-auto-columns
grid-auto-rows
设置网格中行的默认大小,grid-auto-columns
设置网格中列的默认大小,
例:下例设置默认行高50px, 前两个设置行高为100,第3行没有特别设置,所以行高为 grid-auto-rows
设置的默认行高50px。
grid-auto-rows: 50px; //设置网格默认行号为50px
grid-template-columns: repeat(3, 100px);
grid-template-rows: repeat(2, 100px); //前两行设置行高100
项目属性
grid-column-start属性,grid-column-end属性,grid-row-start属性,grid-row-end属性
项目位置是可以指定的,具体方法就是指定项目的四个边框,分别定位在哪个网线上。
grid-column-start
属性:左边框所在的垂直网格线
grid-column-end
属性:右边框所在的垂直网格线
grid-row-start
属性:上边框所在的水平网格线
grid-row-end
属性:下边框所在的水平网格线
.item-1 {
grid-column-start: 2;
grid-column-end: 4;
}
除了1号项目以外,其他项目都没有指定位置,由浏览器自动布局,这时它们的位置由容器的grid-auto-flow
属性决定,这个属性的默认值是row
,因此会”先行后列”进行排列。可以把这个属性的值分别改成column
、row dense
和column dense
,看看其他项目的位置发生了怎样的变化。
这四个属性还可以使用span关键字,表示“跨越”,即左右边框(上线边框)跨越多少个网格。
.item-1 {
grid-column-start: span 3;
}
grid-column-start: span 3;
和 grid-column-end: span 3;
效果完全一样。
grid-column、grid-row属性
grid-column
属性是grid-column-start
和grid-column-end
的合并简写形式,grid-row
属性是grid-row-start
属性和grid-row-end
的合并简写形式。
.item {
grid-column: <start-line> / <end-line>;
grid-row: <start-line> / <end-line>;
}
.item-1 {
grid-column: 1 / 3;
grid-row: 1 / 3;
}
斜杠以及后面的部分可以省略,默认跨越一个网格。
grid-column: 1;
grid-row: 1;
grid-column
和grid-row
也可以使用span
关键字
.item-1 {
grid-column: span 2;
grid-row: span 2;
}
grid-area属性
grid-area
属性指定项目放在哪一个区域
grid-area
属性还可用作grid-row-start
、grid-column-start
、grid-row-end
、grid-column-end
的合并简写形式,直接指定项目的位置。
.item {
grid-area: <row-start> / <column-start> / <row-end> / <column-end>;
}
.item-1 {
grid-area: 2 / 2 / 3 / 3;
}
justify-self属性,align-self属性,place-self属性
justify-self
属性设置单元格内容的水平位置(左中右),跟justify-items
属性的用法完全一致,但只作用于单个项目。
align-self
属性设置单元格内容的垂直位置(上中下),跟align-items
属性的用法完全一致,也是只作用于单个项目。
这两个属性都可以取下面四个值。
start:对齐单元格的起始边缘。
end:对齐单元格的结束边缘。
center:单元格内部居中。
stretch:拉伸,占满单元格的整个宽度(默认值)。
例:
.item-1 {
justify-self: center;
align-self: center;
}
place-self
属性是align-self
属性和justify-self
属性的合并简写形式。
place-self: <align-self> <justify-self>;