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