CSS Grid 网格布局
2020-09-29 15:44:20 3 举报AI智能生成
登录查看完整内容
《CSS Grid 网格布局教程》知识点思维导图
作者其他创作
大纲/内容
CSS Grid
使用步骤简述
设置容器
1. 设置display，开启grid或inline-grid布局
2. 设置行列数，指定各行列宽高，可额外指定网格线名称，方便配置单元格项目时引用
3. 可设置行间距与列间距
4. 可命名区域，可合并或忽略某个单元格，命名后对网格线名称有影响
5. 可设置填充顺序，使用dense关键字来创建紧凑型填充布局
6. 可设置单元格里的内容的对齐方式
7. 可设置各单元格在容器里的对齐方式
8. 可指定单元格自动扩展规则
设置单元格
1. 指定单元格起始位置
2. 或指定单元格区域
3. 设置指定单元格内容对齐方式
布局实例
只要一行代码，实现五种 CSS 经典布局
CSS Grid 网格布局教程
容器属性
display
grid
inline-grid
grid-template-columnsgrid-template-rows
绝对单位值
百分比值
repeat()语法
auto-fill 关键字
fr 关键字
minmax()
auto 关键字
网格线命名
grid-row-gapgrid-column-gapgrid-gapgap
完整写法
简写
grid-template-areas
区域合并
忽略区域
网格线命名问题
grid-auto-flow
改变顺序
dense 关键字
justify-itemsalign-itemsplace-items
justify-contentalign-contentplace-content
grid-auto-columnsgrid-auto-rows
grid-template
单元格属性
grid-column-startgrid-column-endgrid-row-startgrid-row-end
使用网格线位置
使用网格线名称
span 关键字
grid-columngrid-row
指定位置
跨域单元格
值省略写法
grid-area
指定区域名
属性合并写法
justify-selfalign-selfplace-self
0 条评论
回复 删除
下一页
