详解css3中dispaly的Grid布局与Flex布局

.content-box { display: grid; grid-template-columns: repeat(5, 160px); grid-template-rows: repeat(5, 160px); } /*或*/ .content-box { display: grid; grid-template-columns: repeat(5, 20%); grid-template-rows: repeat(5, 20%); }

repeat()重复某种模式也是可以的。

第一列和第四列的宽度为160px，第二列和第五列为100px，第三列和第六列为140px。

.content-box { display: grid; grid-template-columns: repeat(2, 160px 100px 140px); }

auto-fill关键字

有时，单元格的大小是固定的，但是容器的大小不确定。如果希望每一行（或每一列）容纳尽可能多的单元格，这时可以使用auto-fill关键字表示自动填充

.content-box { display: grid; grid-template-columns: repeat(auto-fill, 160px); }

fr关键字

为了方便表示比例关系，网格布局提供了fr关键字（fraction的缩写，意为“片段”）。如果两列的宽度风别为1fr和2fr,

就表示后者是前者的两倍。

.content-box { display: grid; grid-template-columns: 1fr 1fr; }

fr可以与绝对长度的单位结合使用，这时会非常方便。

.content-box { display: grid; grid-template-columns: 150px 1fr 2fr; }

第一列的宽度为150px，第二列是第三列的一半

auto关键字

auto关键字表示有浏览器自己决定长度。

.content-box { display: grid; grid-template-columns: 160px auto 160px; }

第一列和第三列的宽度是160px，中间则为最大宽度，除非单元格内容设置了min-width,且这个值大于最大宽度。

minmax()函数

minmax()函数产生一个长度范围，表示长度就在这个范围之中。它接受两个参数，分别为最小值和最大值。

.content-box { display: grid; grid-template-columns: 1fr 1fr minmax(100px, 1fr); }

minmax(100px1fr)函数表示列宽不能小于100px，不能大于1fr。

网格线的名称

grid-template-columns属性和grid-template-rows属性里面，还可以使用括号，指定每一根网格线的名字，方便以后的引用。

.content-box { display: grid; grid-template-columns: [c1] 160px [c2] 160px [c3] auto [c4]; grid-template-rows: [r1] 160px [r2] 160px [r3] auto [r4]; }

上面代码指定网格布局为3行×3列，因此有4根垂直网格线和4根水平网格线。方括号里面依次是这八根线的名字，网格布局允许同一根线有多个名字，比如[fifth-line row-5]。

布局实例

grid-template-columns属性对于网页布局非常有用。两列式布局只需要一行代码。

.content-box { display: grid; grid-template-columns: 70% 30%; }

左边栏设为70%,右边栏设为30%。

传统的十二网格布局，写起来也很容易。

.content-box { display: grid; grid-template-columns: repeat(12, 1fr); }

gird-row-gap属性，gird-column-gap属性

grid-row-gap属性设置行与行的间隔（行间隔），grid-column-gap属性设置列与列的间隔（列间隔）。

.content-box { display: grid; grid-template-rows: repeat(4, 160px); grid-template-columns: repeat(4, 160px); grid-row-gap: 50px; grid-column-gap: 50px; }

grid-gap属性

grid-gap属性是grid-column-gap与grid-row-gap的合并简写形式。

grid-gap: <grid-row-gap> <grid-column-gap>

.content-box { display: grid; grid-template-rows: repeat(4, 160px); grid-template-columns: repeat(4, 160px); grid-gap: 50px; }

如果grid-gap省略了第二个值，浏览器认为第二个值等于第一个值。根据最新标准，上面三个属性名的grid-前缀已经删除，grid-column-gap和grid-row-gap写成column-gap和row-gap，grid-gap写成gap。

grid-template-areas属性

网格布局允许指定“区域”（area），一个区域由单个或多个单元格组成。grid-template-areas属性用于定于区域。

.content-box { display: grid; grid-template-areas: 'a b c' 'd e f' 'g h i'; }

上面代码先划分出9个单元格，然后将其定名为a到i的九个区域，分别对应这九个单元格，也可以将9个单元格分成a、b、c三个区域。

.content-box { display: grid; grid-template-areas: 'a a a' 'b b b' 'c c c'; }

可以用页眉区域header,底部是页脚区域footer,中间部分则为main和sidebar。

.content-box { display: grid; grid-template-areas: "header header header" "main main sidebar" "footer footer footer"; }

当我们某些区域不需要利用，则使用“点”（.）表示。

.content-box { display: grid; grid-template-areas: 'a . c' 'd . f' 'g . i'; }

grid-auto-flow属性

一、划分网格以后，容器的子元素会按照顺序，自动放置在每一个网格。默认的放置顺序是“先行后列”，先填满第一行，在开始放入第二行。

二、这个顺序由grid-auto-flow属性决定，默认值是row,”先行后列”。也可以将它设成column,变成“先列后行”。

// 先列后行 .content-box { display: grid; grid-template-areas: 'a a a' 'b b b' 'c c c'; grid-auto-flow: column; }

row dense 和 column dense

grid-auto-flow属性除了设置成row和column,还可以设成row dense和column dense。这两个值主要用于给某些项目指定位置以后，剩下的项目怎么自动设置。

让1号项目和2号项目各三个单元格，然后在默认的grid-auto-flow情况下，会产生下面这样的布局。

（编辑：晋中站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!