炼数成金 门户 大数据 网络技术 查看内容

2分钟掌握 CSS Grid 布局

2021-6-21 09:16| 发布者: 炼数成金_小数| 查看: 21994| 评论: 0|原作者: 张旭乾|来自: 峰华前端工程师

摘要: css grid 布局是二维布局方式,可以同时控制行和列的排布和对齐方式。grid 由水平线和垂直线构成,两条水平线中间的区域叫做「行轨道」,两条垂直线中间的区域叫做「列轨道」。要开启 grid 布局只需要给外层容器设置 ...
css grid 布局是二维布局方式,可以同时控制行和列的排布和对齐方式。

grid 由水平线和垂直线构成,两条水平线中间的区域叫做「行轨道」,两条垂直线中间的区域叫做「列轨道」。

开启 grid 布局
要开启 grid 布局只需要给外层容器设置:
display: 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:

grid-area: header;
aside:

grid-area: sidebar;
main:

grid-area: content;
footer

grid-area: footer;

对齐
grid 对齐方式跟 flexbox 布局类似,有水平方向的行轴,和垂直方向的块轴。

在垂直方向上对齐子元素可以使用 align-items 属性,例如居中对齐:
align-items: center;

靠下对齐:
align-items: end;

在水平方向上对齐子元素可以使用 justify-items 属性,例如:

居中对齐:
justify-items: center;

靠右对齐:
justify-items: end;

两端对齐:
justify-items: space-between;

如果行轨道和列轨道的尺寸小于 grid 容器,还可以对轨道进行对齐,在垂直方向上,使用 align-content 属性,例如:

居中对齐:
align-content: center;

靠下对齐:
align-content: end;

在水平方向上使用 justify-content 属性,例如:

居中对齐:
justify-content: center;

靠右对齐:
justify-content: end;

两端对齐:
justify-content: space-between;

好了,这就是今天的 2 分钟掌握 css grid 布局,你学会了吗?

声明:文章收集于网络,版权归原作者所有,为传播信息而发,如有侵权,请联系小编删除,谢谢!

欢迎加入本站公开兴趣群
软件开发技术群
兴趣范围包括:Java,C/C++,Python,PHP,Ruby,shell等各种语言开发经验交流,各种框架使用,外包项目机会,学习、培训、跳槽等交流
QQ群:26931708

Hadoop源代码研究群
兴趣范围包括:Hadoop源代码解读,改进,优化,分布式系统场景定制,与Hadoop有关的各种开源项目,总之就是玩转Hadoop
QQ群:288410967 

鲜花

握手

雷人

路过

鸡蛋

相关阅读

最新评论

热门频道

  • 大数据
  • 商业智能
  • 量化投资
  • 科学探索
  • 创业

 

GMT+8, 2021-7-28 02:51 , Processed in 0.176474 second(s), 25 queries .