目录
grid-template-columns、grid-template-rows属性
grid-template-columns|rows的相关函数
grid-template-columns|rows的相关关键字
grid-row-gap、grid-column-gap 属性
justify-content 、align-content 属性
grid-auto-columns、grid-auto-rows 属性
grid-column-start|end 、grid-row-start |end 属性
grid布局介绍
Grid 布局是将容器划分成"行"和"列",产生单元格,然后指定"项目所在"的单元格
grid布局相关概念介绍
容器和项目
采用网格布局的区域,称为"容器"(container)。容器内部采用网格定位的子元素,称为"项目"(item)。
<div>
<div><p>1</p></div>
<div><p>2</p></div>
<div><p>3</p></div>
</div>
上面代码中,最外层的div元素就是容器,内层的三个div
元素就不是项目。Grid 布局只对项目生效。元素就是项目。注意:项目只能是容器的顶层子元素,不包含项目的子元素,比如上面代码的p
行和列
行和列
容器里面的水平区域称为"行"(row),垂直区域称为"列"(column)。
上图中,水平的深色区域就是"行",垂直的深色区域就是"列"。
单元格
单元格
行和列的交叉区域,称为"单元格"(cell)。
正常情况下,
n
行和m
列会产生n x m
个单元格。比如,3行3列会产生9个单元格。
网格线
网格线
划分网格的线,称为"网格线"(grid line)。水平网格线划分出行,垂直网格线划分出列。
正常情况下,
n
行有n + 1
根水平网格线,m
列有m + 1
根垂直网格线,比如三行就有四根水平网格线。
上图是一个 4 x 4 的网格,共有5根水平网格线和5根垂直网格线。
display:grid
display:grid
将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局。注意设为网格布局以后,容器子元素(项目)的
float
、display: inline-block
、display: table-cell
、vertical-align
和column-*
等设置都将失效。
与display:inline-grid区别
与display:inline-grid区别
grid: 将对象作为网格布局显示,当该对象没有设置宽度时,默认是父集的100%。例如下图其中1~9包含在容器中,该设置了display:grid,此时容器元素为块级元素。
inline-grid:将对象作为网格布局显示,当该对象没有设置宽度时,默认是子元素的总宽和并且能自适应。例如下图,此时容器元素为内联元素。
容器的属性
容器的属性
和display:grid添加在相同元素上的。
grid-template-columns、grid-template-rows属性
grid-template-columns、grid-template-rows属性
grid-template-columns
属性定义每一列的列宽,grid-template-rows
属性定义每一行的行高。可以使用绝对值(像素)也可以使用百分比。具体如下图所示:
注意colums能确定有几列和列宽,而rows不能确定有几行,只是设置现有的行的高度,当实际项目多出时,排列的行高由项目的内容撑起。colums默认为1列,宽度占满容器的宽。rows默认由项目撑起。
grid-template-columns|rows的相关函数
grid-template-columns|rows的相关函数
repeat()
repeat()
接受两个参数,第一个参数是重复的次数,第二个参数是所要重复的值。
grid-template-columns: repeat(2, 100px 20px 80px)和grid-template-columns: 100px 20px 80px 100px 20px 80px表示意义相同。
minmax()
minmax()
函数产生一个长度范围,表示长度就在这个范围之中。它接受两个参数,分别为最小值和最大值(实际上无区分)。grid-template-columns: 1fr 1fr minmax(100px, 1fr)中第三列长度为100px和1fr中绝对长度大的那一个,注意第一参数不能是fr单位的。
grid-template-columns|rows的相关关键字
grid-template-columns|rows的相关关键字
auto-fill 关键字
auto-fill 关键字
grid-template-columns: repeat(auto-fill, 100px);
表示每列宽度
100px
,然后自动填充,直到容器不能放置更多的列。
fr 关键字
fr 关键字
为了方便表示比例关系,网格布局提供了
fr
关键字(fraction 的缩写,意为"片段")。如果两列的宽度分别为1fr
和2fr
,就表示后者是前者的两倍。例如grid-template-columns: 150px 1fr 2fr;表示第一列宽度为150px,剩余的长度按1:2分给另外2列,无剩余长度时为0。
auto 关键字
auto 关键字
auto
关键字表示由浏览器自己决定长度。grid-template-columns: 100px auto 100px第二列宽度为剩余宽度。注意当搭配fr单位时,auto表示为项目内容的宽度撑起。
网格线的名称
网格线的名称
rid-template-columns
属性和grid-template-rows
属性里面,还可以使用方括号,指定每一根网格线的名字,方便以后的引用。例如:
grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];
grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4];
上面代码指定网格布局为3行 x 3列,因此有4根垂直网格线和4根水平网格线。方括号里面依次是这八根线的名字。注意网格布局允许同一根线有多个名字,比如
[fifth-line row-5]
。
grid-row-gap、grid-column-gap 属性
grid-row-gap、grid-column-gap 属性
grid-row-gap
属性设置行与行的间隔(行间距),grid-column-gap
属性设置列与列的间隔(列间距),这些间距都是单元格之间的。注意grid-column-gap
和grid-row-gap可以
写成column-gap
和row-gap
grid-gap属性
grid-gap属性
grid-gap为上面两个属性的合并写法,例如grid-gap: 20px 20px;和 grid-row-gap: 20px;grid-column-gap: 20px;表示意义相同。如果
grid-gap
省略了第二个值,浏览器认为第二个值等于第一个值。注意grid-gap可以
写成gap
。
grid-template-areas 属性
grid-template-areas 属性
网格布局允许指定"区域"(area),一个区域由单个或多个单元格组成。
grid-template-areas
属性用于定义区域。例如下面代码划分为3行*3列,9个单元格,然后将其定名为a
到i
的九个区域,分别对应这九个单元格。
{
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
grid-template-areas: 'a b c' 'd e f' 'g h i';
}
注意:
1.如果某些区域不需要利用,则使用"点"(
.
)表示即上面a~i中任意一个字符都可以替换为.来表示该区域不需要。
2.区域的命名会影响到网格线。每个区域的起始网格线,会自动命名为
区域名-start
,终止网格线自动命名为区域名-end
。比如区域名为a
,则起始位置的水平网格线和垂直网格线叫做a-start
,终止位置的水平网格线和垂直网格线叫做a-end
。
grid-auto-flow 属性
grid-auto-flow 属性
划分网格以后,容器的子元素会按照顺序,自动放置在每一个网格。默认的放置顺序是"先行后列",即先填满第一行,再开始放入第二行,即下图数字的顺序。有以下几种取值:
row(
默认值):项目按行排列,
先填满第一行,再开始放入第二行。 colum:项目按列排列,
先填满第一列,再开始放入第二列。 row dense:
"先行后列",并且尽可能紧密填满,尽量不出现空格。 column dense:
"先列后行",并且尽可能紧密填满,尽量不出现空格。
按列排列图(colum):
当第1、2项目宽度为剩余项目宽度的2倍,总宽度为项目1加项目3的和时,按行排列(row)图(此图是为下面row-dense、colum-dense做对比):
按行排列(row-dense)图(当第三个项目能在第一行剩余空间中容下时会插入):
按列排列(colum-dense)图(当第4个项目在第一列的剩余空间容下时会插入)
justify-items、align-items 属性
justify-items、align-items 属性
justify-items
属性设置单元格内容的水平位置(左中右),align-items
属性设置单元格内容的垂直位置(上中下),place-items
属性是align-items
属性和justify-items
属性的合并简写形式。有以下几种取值:
start:对齐单元格的起始边缘。 end:对齐单元格的结束边缘。 center:单元格内部居中。 stretch(默认值):拉伸,占满单元格的整个宽度。
下图为justify-items:start,此时项目对齐单元格的起始边缘即左对齐,宽度为自身宽度撑开(橙颜色部分),注意grid-template-columns|rows设置的值为单元格的宽或高,不是项目的。
下图为align-items:start,此时项目对齐单元格的起始边缘即上对齐,高度为自身高度撑开(橙颜色部分)。
place-items属性
place-items属性
align-items
属性和justify-items
属性的合并简写形式。如果省略第二个值,则浏览器认为与第一个值相等。place-items: start end;和align-items:start;justify-items:end;相同意义。
justify-content 、align-content 属性
justify-content 、align-content 属性
justify-content
属性是整个内容区域在容器里面的水平位置(左中右),align-content
属性是整个内容区域的垂直位置(上中下)。有以下几种取值
start:对齐容器的起始边框。 end:对齐容器的结束边框。 center:容器内部居中。 stretch:项目大小没有指定时,拉伸占据整个网格容器。 space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与容器边框的间隔大一倍。 space-between:项目与项目的间隔相等,项目与容器边框之间没有间隔。 space-evenly:项目与项目的间隔相等,项目与容器边框之间也是同样长度的间隔。
下面以justify-content属性为例,注意如果设置align-content属性,需要设置容器的高度大于每行高度的和才会有不同的效果(有剩余高度时),而设置justify时不需要是因为容器(当设置为inline-grid情况下时,也需要设置容器的宽度大于每行宽度的和才会有不同效果)本身会占满整行(这样通常会有剩余的宽度,当没有剩余宽度,变化该属性也不会有效果):
1.start(默认)
2.end
3.center
4.stretch
5.space-around
6.space-between
7.space-evenly
place-content
属性
place-content
属性
place-content
属性是align-content
属性和justify-content
属性的合并简写形式。如果省略第二个值,浏览器就会假定第二个值等于第一个值。place-content: space-around space-evenly;和align-content:space-around;justify-content:space-evenly;相同。
grid-auto-columns、grid-auto-rows 属性
grid-auto-columns、grid-auto-rows 属性
有时候,一些项目的指定位置,在现有网格的外部。比如网格只有3列,但是某一个项目指定在第5行。这时,浏览器会自动生成多余的网格,以便放置项目。
grid-auto-columns
属性和grid-auto-rows
属性用来设置,浏览器自动创建的多余网格的列宽和行高。它们的写法与grid-template-columns
和grid-template-rows
完全相同。如果不指定这两个属性,浏览器完全根据单元格内容的大小,决定新增网格的列宽和行高。
如下图,前9格指定3行3列为100px,然后grid-auto-rows:50px,当8、9元素通过项目属性指定位置不在前3行是,它的高度会变为一半即50px。
grid-template 属性
grid-template
属性是grid-template-columns
、grid-template-rows
和grid-template-areas
这三个属性的合并简写形式。
grid 属性
grid
属性是grid-template-rows
、grid-template-columns
、grid-template-areas
、 grid-auto-rows
、grid-auto-columns
、grid-auto-flow
这六个属性的合并简写形式。
项目属性
grid-column-start|end 、grid-row-start |end 属性
项目的位置是可以指定的,具体方法就是指定项目的四个边框,分别定位在哪根网格线。
grid-column-start
属性:左边框所在的垂直网格线grid-column-end
属性:右边框所在的垂直网格线grid-row-start
属性:上边框所在的水平网格线grid-row-end
属性:下边框所在的水平网格线
注意
1.当只指定项目的column时,该项目还是会处于该行,且该行位于项目之前的位置会空出,之后按顺序排列(指定了row dense或column dense的不会空出,如果只指定了start或end则另一条为相邻的网格线),如下面例1。
2.当指定项目的column和row时,该项目不会有空出位置,除指定项目其它都按顺序排,如下面例2。
3.可以指定不为数字,如果指定了网格线名,可以直接使用,如果指定了区域名,例如之前定义区域有c,则可以指定值为c-start或c-end。.
当只指定column时:
.item-4 {
background-color: #0376c2;
grid-column-start: 2;
grid-column-end: 3;
}
上面指定了1号项目的左边框是第二根垂直网格线,右边框是第四根垂直网格线。
只指定了1号项目的左右边框,没有指定上下边框,所以会采用默认位置,即上边框是第一根水平网格线,下边框是第二根水平网格线。
除了1号项目以外,其他项目都没有指定位置,由浏览器自动布局,这时它们的位置由容器的grid-auto-flow
属性决定,这个属性的默认值是row
,因此会"先行后列"进行排列。
效果如下:
当指定column和row时:
.item-1 {
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 2;
grid-row-end: 4;
}
此时效果如下:
span
关键字
表示"跨越",即左右边框(上下边框)之间跨越多少个网格。
例如下面代码(注释实现效果相同):
.item-1 {
grid-column-start: span 2;
/*grid-column-end: span 2;*/
}
grid-column、grid-row 属性
grid-column
属性是grid-column-start
和grid-column-end
的合并简写形式,grid-row
属性是grid-row-start
属性和grid-row-end
的合并简写形式。注意中间要用/隔开。
.item-1 {
background: #b03532;
grid-column: 1 / 3;
grid-row: 1 / 3;
}
/* 等同于 */
.item-1 {
background: #b03532;
grid-column: 1 / span 2;
grid-row: 1 / span 2;
}
grid-area 属性
1.指定项目放在哪一个区域,搭配容器属性
。grid-template-areas指定的区域名使用
2.可用作grid-row-start
、grid-column-start
、grid-row-end
、grid-column-end
的合并简写形式,直接指定项目的位置,注意之间以/区分。
justify-self 、align-self 属性
justify-self
属性设置单元格内容的水平位置(左中右),跟justify-items
属性的用法完全一致,但只作用于单个项目。
align-self
属性设置单元格内容的垂直位置(上中下),跟align-items
属性的用法完全一致,也是只作用于单个项目。
有以下几种取值:
- start:对齐单元格的起始边缘。
- end:对齐单元格的结束边缘。
- center:单元格内部居中。
- stretch(默认值):拉伸,占满单元格的整个宽度。
取值为start例子:
.item-1 {
justify-self: start;
}
place-self
属性
align-self
属性和justify-self
属性的合并简写形式。
以上部分图和部分介绍直接采用阮一峰写的,链接为CSS Grid 网格布局教程 - 阮一峰的网络日志