登录免费注册



CSS Grid 网格布局

首页  思维导图  详情



CSS Grid 网格布局

2020-09-29 15:44:20   3  举报





AI智能生成

《CSS Grid 网格布局教程》知识点思维导图

CSS3

HTML

模版推荐

作者其他创作

大纲/内容

使用步骤简述

设置容器

1. 设置display，开启grid或inline-grid布局

2. 设置行列数，指定各行列宽高，可额外指定网格线名称，方便配置单元格项目时引用

3. 可设置行间距与列间距

4. 可命名区域，可合并或忽略某个单元格，命名后对网格线名称有影响

5. 可设置填充顺序，使用dense关键字来创建紧凑型填充布局

6. 可设置单元格里的内容的对齐方式

7. 可设置各单元格在容器里的对齐方式

8. 可指定单元格自动扩展规则

设置单元格

1. 指定单元格起始位置

2. 或指定单元格区域

3. 设置指定单元格内容对齐方式

布局实例

容器属性

display

grid

inline-grid

grid-template-columns<br>grid-template-rows

绝对单位值

百分比值

repeat()语法

auto-fill 关键字

fr 关键字

minmax()

auto 关键字

网格线命名

grid-row-gap<br>grid-column-gap<br>grid-gap<br>gap

完整写法

简写

grid-template-areas

区域合并

忽略区域

网格线命名问题

grid-auto-flow

改变顺序

dense 关键字

justify-items<br>align-items<br>place-items

简写

justify-content<br>align-content<br>place-content

简写

grid-auto-columns<br>grid-auto-rows

grid-template

grid

单元格属性

grid-column-start<br>grid-column-end<br>grid-row-start<br>grid-row-end

使用网格线位置

使用网格线名称

span 关键字

grid-column<br>grid-row

指定位置

跨域单元格

值省略写法

grid-area

指定区域名

属性合并写法

justify-self<br>align-self<br>place-self

 Collect

Get Started

CSS Flex 弹性布局

 Collect

Get Started

Grid栅格布局

 Collect

Get Started

网格点的聚类

 Collect

Get Started

CSS













评论

0 条评论

下一页



图形选择

思维导图

主题

补充说明

AI生成





修改AI描述

去编辑

重新生成

提示 

关闭后当前内容将不会保存，是否继续？

取消

确定

Document