博客列表 >css-grid布局实战

css-grid布局实战

CY明月归
CY明月归原创
2022年03月27日 21:30:58514浏览
  1. 完善课堂的案例,将右侧布局实现

练习的过程中,使用到grid布局与原始布局

记录下练习的过程中使用有迷惑性需要反复练习的部分:
1、place-content 所有项目在容器中的对齐,项目能使用剩余空间
例如place-content: space-between space-around;

2、 place-content: start center;垂直方向顶对齐 水平方向居中

3、place-items 设置项目在单元格中的对齐,前提是单元格中/网格区域中,有剩余空间,项目在交叉轴上的对齐方式
4、gap: 10px 5px行轨间隙 10px,列轨间隙 5px

5、2 / span 3 起始编号2, 跨越2列

6、grid-area:1/2/3/4 行起始 / 列起始 / 行结束 / 列结束

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议