1. 基本概念:
Flex 布局是轴线布局,只能指定"项目"针对轴线的位置,可以看作是一维布局。Grid 布局则是将容器划成"行"和"列",产生单元格,然后指定"项目所在"的单元格,可以看作是二维布局。Grid 布局远比 Flex 布局强大;
- container和item
- row和column
- 单元格cell
- 网格线grid line
2. 容器属性
-
display: grid
指定一个容器采用网格布局。默认情况下,容器元素都是块级元素,但也可以设成行内元素。div { display: grid; } div { display: inline-grid; }
注意⚠️:设为网格布局以后,容器子元素(项目)的
float
、display: inline-block
、display: table-cell
、vertical-align
和column-*
等设置都将失效。 -
grid-template-columns 和 grid-template-rows 属性定义列宽和行高
// 使用单位写 .container { display: grid; grid-template-columns: 100px 100px 100px; grid-template-rows: 100px 100px 100px; } // 百分比写法 .container { display: grid; grid-template-columns: 33.33% 33.33% 33.33%; grid-template-rows: 33.33% 33.33% 33.33%; } (1)repeat():有时候,重复写同样的值非常麻烦,尤其网格很多时。这时,可以使用repeat()函数,简化重复的值。 repeat()接受两个参数,第一个参数是重复的次数(上例是3),第二个参数是所要重复的值。 repeat()重复某种模式也是可以的。 .container { display: grid; grid-template-columns: repeat(3, 33.33%); grid-template-rows: repeat(3, 33.33%); } grid-template-columns: repeat(2, 100px 20px 80px); (2)auto-fill 关键字,有时,单元格的大小是固定的,但是容器的大小不确定。如果希望每一行(或每一列)容纳尽可能多的单元格,这时可以使用auto-fill关键字表示自动填充。 .container { display: grid; grid-template-columns: repeat(auto-fill, 100px); } (3)fr 关键字,为了方便表示比例关系,网格布局提供了fr关键字(fraction 的缩写,意为"片段")。如果两列的宽度分别为1fr和2fr,就表示后者是前者的两倍。 .container { display: grid; grid-template-columns: 1fr 1fr; } (4)minmax(),minmax()函数产生一个长度范围,表示长度就在这个范围之中。它接受两个参数,分别为最小值和最大值。 grid-template-columns: 1fr 1fr minmax(100px, 1fr); (5)auto 关键字,auto关键字表示由浏览器自己决定长度。 grid-template-columns: 100px auto 100px; 上面代码中,第二列的宽度,基本上等于该列单元格的最大宽度,除非单元格内容设置了min-width,且这个值大于最大宽度。 (6)网格线的名称: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行 x 3列,因此有4根垂直网格线和4根水平网格线。方括号里面依次是这八根线的名字。 网格布局允许同一根线有多个名字,比如[fifth-line row-5]。 (7)布局实例 grid-template-columns属性对于网页布局非常有用。两栏式布局只需要一行代码。 .wrapper { display: grid; grid-template-columns: 70% 30%; } 上面代码将左边栏设为70%,右边栏设为30%。 传统的十二网格布局,写起来也很容易。 grid-template-columns: repeat(12, 1fr);
-
grid-row-gap , grid-column-gap , grid-gap 属性
grid-row-gap属性设置行与行的间隔(行间距),grid-column-gap属性设置列与列的间隔(列间距)。 .container { grid-row-gap: 20px; grid-column-gap: 20px; } grid-gap: <grid-row-gap> <grid-column-gap>; 根据最新标准,上面三个属性名的grid-前缀已经删除,grid-column-gap和grid-row-gap写成column-gap和row-gap,grid-gap写成gap。
-
grid-template-areas 属性
网格布局允许指定"区域"(area),一个区域由单个或多个单元格组成。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' 'b b b' 'c c c'; 上面代码将9个单元格分成a、b、c三个区域。
-
grid-auto-flow 属性
划分网格以后,容器的子元素会按照顺序,自动放置在每一个网格。默认的放置顺序是"先行后列",即先填满第一行,再开始放入第二行,这个顺序由grid-auto-flow属性决定,默认值是row,即"先行后列"。也可以将它设成column,变成"先列后行"。 grid-auto-flow: row | column | row dense | column dense
-
justify-items , align-items , place-items 属性
justify-items属性设置单元格内容的水平位置(左中右),align-items属性设置单元格内容的垂直位置(上中下)。 .container { justify-items: start | end | center | stretch; align-items: start | end | center | stretch; } place-items属性是align-items属性和justify-items属性的合并简写形式。 place-items: <align-items> <justify-items>; place-items: start end;
-
justify-content , align-content , place-content 属性
justify-content属性是整个内容区域在容器里面的水平位置(左中右),align-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; } space-evenly - 项目与项目的间隔相等,项目与容器边框之间也是同样长度的间隔。 place-content属性是align-content属性和justify-content属性的合并简写形式。 place-content: <align-content> <justify-content>
-
grid-auto-columns , grid-auto-rows 属性
有时候,一些项目的指定位置,在现有网格的外部。比如网格只有3列,但是某一个项目指定在第5行。这时,浏览器会自动生成多余的网格,以便放置项目。 grid-auto-columns属性和grid-auto-rows属性用来设置,浏览器自动创建的多余网格的列宽和行高。 .container { display: grid; grid-template-columns: 100px 100px 100px; grid-template-rows: 100px 100px 100px; grid-auto-rows: 50px; }
3. item属性
-
grid-column-start 属性, grid-column-end 属性, grid-row-start 属性, grid-row-end 属性
item1项目的左边框是第二根垂直网格线,右边框是第四根垂直网格线。 .item-1 { grid-column-start: 2; grid-column-end: 4; } 这四个属性的值,除了指定为第几个网格线,还可以指定为网格线的名字。 .item-1 { grid-column-start: header-start; grid-column-end: header-end; } 这四个属性的值还可以使用span关键字,表示"跨越",即左右边框(上下边框)之间跨越多少个网格。 .item-1 { grid-column-start: span 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 { 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
属性指定项目放在哪一个区域。.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>; }
-
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; } place-self属性是align-self属性和justify-self属性的合并简写形式。 place-self: <align-self> <justify-self>;