css grid 布局是二维布局方式,可以同时控制行和列的排布和对齐方式。 grid 由水平线和垂直线构成,两条水平线中间的区域叫做行轨道,两条垂直线中间的区域叫做列轨道。 开启 grid 布局要开启 grid 布局只需要给外层容器设置: 容器的直接子元素就会自动成为 grid 布局的元素。 改变布局例如,一个容器,包含 6 个子元素。把它改成 3 列布局,可以使用grid-template-columns 属性,指定每列的宽度,可以是固定宽度: grid-template-columns: 100px 100px 100px;
也可以用 fr 指浮动宽度: grid-template-columns: 1fr 1fr 1fr;
fr 是 grid 布局专用单位,代表 grid 剩余空间,这里三列各占 3 分之一。
如果把第二列改为 2fr,则会占据 1/2 的空间。 设置 gap给 grid 设置间距可以通过 column-gap 属性设置列间距 也可以通过 row-gap 设置行间距 或使用 gap 属性统一设置。 grid template area排列元素我们可以使用 grid-template-area 属性。比如有一个页面,头部和底部宽度占满全屏,侧边占 1/3,内容占 2/3,我们可以指定这样的区域: grid-template-areas: 'header header header' 'sidebar content content' 'footer footer footer';
然后各个元素分别指定对应的区域: header: aside: main: footer 对齐grid 对齐方式跟 flexbox 布局类似,有水平方向的行轴,和垂直方向的块轴。 在垂直方向上对齐子元素可以使用 align-items 属性,例如居中对齐: 靠下对齐: 在水平方向上对齐子元素可以使用 justify-items 属性,例如: 居中对齐: 靠右对齐: 两端对齐: justify-items: space-between;
如果行轨道和列轨道的尺寸小于 grid 容器,还可以对轨道进行对齐,在垂直方向上,使用 align-content 属性,例如: 居中对齐: 靠下对齐: 在水平方向上使用 justify-content 属性,例如: 居中对齐: 靠右对齐: 两端对齐: justify-content: space-between;
好了,这就是今天的 2 分钟掌握 css grid 布局,你学会了吗?有问题请在评论区留言,我是峰华,感谢观看。
|