本篇文章参考文章
前言
之前写了篇关于 flex布局 的文章,收获了很多志同道合的小伙伴,发现布局问题各位都或多或少遇到过,为了今后我们不再因为布局问题苦恼,所以决定,今天一次性折磨个够,消除恐惧的最好办法就是面对他,奥里给!
一、基本概念
1.1 容器与项目
网格布局和 flex 布局 一样,都引入了一个 容器-项目 的概念,采用网格布局的区域,称为"容器"( container )。容器内部采用网格定位的子元素,称为"项目"( item )
<div>
<div><p>1</p></div>
<div><p>2</p></div>
<div><p>3</p></div>
</div>
注意:项目只能是容器的顶层子元素,不包含项目的子元素,比如上面代码的<p>元素就不是项目。 Grid 布局只对项目生效。
1.2 行与列
容器里面的水平区域称为"行"( row ),垂直区域称为"列"( column )如下图所示:
1.3 单元格与网格线
行和列的交叉区域,称为"单元格"( cell )。 n 行和 m 列会产生 n x m 个单元格。
划分网格的线,称为"网格线"( grid line )。水平网格线划分出行,垂直网格线划分出列。 n 行有 n + 1 根水平网格线, m 列有 m + 1 根垂直网格线。
二、容器属性
基本概念介绍完了,是不是很简单,就是线,还有列,接下来我们学习下容器的相关属性。
2.1 display属性
display: grid 指定一个容器采用网格布局。这一点很重要,如果没有这个,那我们后面设置的属性都不能生效。
div {
display: grid;
}
设置成栅格布局后,页面元素会变成这样
上面 foo 和 bar 这里代指一些其他元素,类似咱们举例子的时候,张三,李四之类的,这两个单词就是程序界的张三李四。
默认栅格布局是块级元素,当然也可设置成行内元素
div {
display: inline-grid;
}
注意,设为网格布局以后,容器子元素(项目)的 float、display: inline-block、display: table-cell、vertical-align和column-* 等设置都将失效。
2.2 grid-template-columns,grid-template-rows
当我们设置完栅格布局之后,还需要紧接着设置一下,划分成几行,几列。
.container {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
}
上面的写法有时候很麻烦,如果要 10 行, 10 列,那岂不是要累死。程序员都是懒惰的,绝对不会做机械的重复工作,这个时候可以使用 repeat() 函数。
.container {
display: grid;
grid-template-columns: repeat(3, 33.33%);
grid-template-rows: repeat(3, 33.33%);
}
上面 repeat() 函数第一个参数表示重复 3 次,第二个参数表示要重复的数值
auto-fill 关键字
有时,单元格的大小是固定的,但是容器的大小不确定。如果希望每一行(或每一列)容纳尽可能多的单元格,这时可以使用 auto-fill 关键字表示自动填充。
.container {
display: grid;
grid-template-columns: repeat(auto-fill, 100px);
}
fr 关键字
为了方便表示比例关系,网格布局提供了 fr 关键字( fraction 的缩写,意为"片段")。如果两列的宽度分别为 1fr 和 2fr ,就表示后者是前者的两倍。熟悉 css3 vh vw 的同学应该很好理解。
.container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
}
网格线的名称
grid-template-columns 属性和 grid-template-rows 属性里面,还可以使用方括号,指定每一根网格线的名字,方便以后的引用。
.container {
display: grid;
grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];
grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4];
}
传统布局
我们传统布局里面,一般左边导航栏,右边展示区,占比大概3:7,用栅格布局只要两行
.wrapper {
display: grid;
grid-template-columns: 70% 30%;
}
2.3 grid-column-gap,grid-row-gap
gap 中文意思 “间隔”,所以顾名思义,这个属性是用来设置行间距,列间距的。
.container {
row-gap: 10px;
column-gap: 10px;
}
还有一种简写方式:grid-gap: <grid-row-gap> <grid-column-gap>;
.container {
gap: 10px 10px;
}
2.4 grid-template-areas 属性
该属性有点类似上面提到的给网格线命名,只不过现在命名的是每一块区域
.container {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
grid-template-areas: 'a b c'
'd e f'
'g h i';
}
上面的9个区域分别命名成了 a-i 。当想合并一些区域的时候,我们可以给他设置成一样的名字,如下:
grid-template-areas: 'a a a'
'a b b'
'c c c';
当某些区域不希望使用到的时候,可以用 (.) 表示。
grid-template-areas: 'a . a'
'a . b'
'c c .';
注意,区域的命名会影响到网格线。每个区域的起始网格线,会自动命名为 区域名-start ,终止网格线自动命名为 区域名-end 。
2.5 grid-auto-flow 属性
划分网格以后,容器的子元素会按照顺序,自动放置在每一个网格。默认的放置顺序是"先行后列",即先填满第一行,再开始放入第二行,即下图数字的顺序。
grid-auto-flow: row | column | row dense | column dense;
默认值是 row ,当设置成 column 时,会变成如下样子:
接下来重点来了,该属性还有两个值 row dense 和 column dense ,这两个值主要用于,某些项目指定位置以后,剩下的项目怎么自动放置。
比如下面,我们指定了第一个项目和第二个项目分别占据第一列和第二列,那么剩下元素的排列如下:
上图中, 1 号项目后面的位置是空的,这是因为 3 号项目默认跟着 2 号项目,所以会排在 2 号项目后面。
现在修改设置,设为 row dense ,表示"先行后列",并且尽可能紧密填满,尽量不出现空格。
grid-auto-flow: row dense;
上图会先填满第一行,再填满第二行,所以 3 号项目就会紧跟在 1 号项目的后面。 8 号项目和 9 号项目就会排到第四行。
如果将设置改为 column dense ,表示"先列后行",并且尽量填满空格。
至于上面提到的,怎么让第一个项目和第二个项目占据第一列,第二列,我们后面讲到项目属性的时候,再详细介绍。
2.6 justify-items,align-items,place-items
justify-items 属性设置单元格内容的水平位置(左中右), align-items 属性设置单元格内容的垂直位置(上中下)。
- start :对齐单元格的起始边缘。
- end :对齐单元格的结束边缘。
- center :单元格内部居中。
- stretch :拉伸,占满单元格的整个宽度(默认值)。
.container {
justify-items: start;
}
上面表示项目单元格左对齐
.container {
align-items: start;
}
上面代码表示,单元格内容头部对齐。
place-items 属性是 align-items 属性和 justify-items 属性的合并简写形式。
place-items: <align-items> <justify-items>;
2.7 justify-content,align-content,place-content
justify-content 属性是整个内容区域在容器里面的水平位置(左中右), align-content 属性是整个内容区域的垂直位置(上中下)。这两个属性使用方法完全一致,只是方向不同,以下就 justify-content 进行展示。
.container {
justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
align-content: start | end | center | stretch | space-around | space-between | space-evenly;
}
上面的 start, end, center, stretch 都比较好理解,分别对应起始,结束,中心位置和拉伸,如下图所示:
- space-around — 每个项目两侧的间隔相等。所以,项目之间的间隔比项目与容器边框的间隔大一倍。
- space-between — 项目与项目的间隔相等,项目与容器边框之间没有间隔。
- space-evenly — 项目与项目的间隔相等,项目与容器边框之间也是同样长度的间隔。
place-content 属性是 align-content 属性和 justify-content 属性的合并简写形式。
place-content: <align-content> <justify-content>
2.8 grid-auto-columns, grid-auto-rows
当一些项目的指定位置,在现有网格的外部时。比如网格只有 3 行,但是某一个项目指定在第 5 行。这时,浏览器会自动生成多余的网格,以便放置项目。
下面设置原本列宽行高为 100px ,自动生成的行高为 50px 。
.container {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
grid-auto-rows: 50px;
}
三、项目属性
3.1 grid-column-start,grid-column-end,grid-row-start,grid-row-end
上面我们介绍 2.5 和 2.8 两个属性的时候,都提到过,给某些项目指定位置。这一操作就需要用到项目属性中的 grid-column-start,grid-column-end 。
项目的位置是可以指定的,具体方法就是指定项目的四个边框,分别定位在哪根网格线。
- grid-column-start :左边框所在的垂直网格线
- grid-column-end :右边框所在的垂直网格线
- grid-row-start :上边框所在的水平网格线
- grid-row-end :下边框所在的水平网格线
.item-1 {
grid-column-start: 2;
grid-column-end: 4;
}
上图中,只指定了 1 号项目的左右边框,没有指定上下边框,所以会采用默认位置,即上边框是第一根水平网格线,下边框是第二根水平网格线。
.item-1 {
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 2;
grid-row-end: 4;
}
除了指定为之外,还可以指定网格线的名字。
.item-1 {
grid-column-start: header-start;
grid-column-end: header-end;
}
这四个属性的值还可以使用 span 关键字,表示"跨越",即左右边框(上下边框)之间跨越多少个网格。
.item-1 {
grid-column-start: span 2;
}
3.2 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 / 2;
}
/* 等同于 */
.item-1 {
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 2;
}
斜杠后面的数值省略掉的话,默认跨一个网格
3.3 grid-area 属性
grid-area 属性指定项目放在哪一个区域。还记得 2.4 grid-template-areas 属性不,在这里设置的名字,就可以在 grid-area 里面使用。
.item-1 {
grid-area: e;
}
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>;
}
3.4 justify-self,align-self,place-self
justify-self 属性设置单元格内容的水平位置(左中右),跟 justify-items 属性的用法完全一致,但只作用于单个项目。
align-self 属性设置单元格内容的垂直位置(上中下),跟 align-items 属性的用法完全一致,也是只作用于单个项目。
.item {
justify-self: start | end | center | stretch;
align-self: start | end | center | stretch;
}
justify-self: start 展示效果如下:
.item-1 {
justify-self: end;
}
place-self 属性是 align-self 属性和 justify-self 属性的合并简写形式。
place-self: <align-self> <justify-self>;
到这里栅格布局的内容基本差不多了,虽然属性众多,但是找到规律还是很好记忆的,规律就是大家一定要学好外语,这些个属性如果在理解单词意思的基础上,简直就跟大白话一样。