css 快速入门教程 - Grid 网格布局教程
学习 grid 时，需要先了解 grid 的一些重要术语。
CSS Grid 网格布局 - 重要属性
| 属性 | 描述 | |
| 设置在网格容器上 | ||
| display | display | grid 或者 inline-grid 声明元素为网格容器 |
| 行和列 | grid-template-columns | 设置网格列 |
| grid-template-rows | 设置网格行 | |
| 网格排序 | grid-auto-flow | 设置网格项如何排序 |
| 网格对齐 | justify-content | 网格在网格容器的水平方向如何对齐 |
| align-content | 网格在网格容器的垂直方向如何对齐 | |
| place-content | 简写:<align-content> <justify-content> | |
| 网格单元对齐 | justify-items | 网格项在网格单元的水平方向如何对齐 |
| align-items | 网格项在网格单元的垂直方向如何对齐 | |
| place-items | 简写:<align-items> <justify-items> | |
| 网格单元间距 | grid-row-gap | 设置行间距 |
| grid-column-gap | 设置列间距 | |
| gap | 简写：<grid-row-gap> <grid-column-gap> | |
| 默认尺寸 | grid-auto-columns | 指定未设置尺寸的列的宽度 |
| grid-auto-rows | 指定未设置尺寸的行的高度 | |
| 网格区域 | grid-template-areas | 设置网格区域 |
| 设置在网格项上 | ||
| 网格项定位 | grid-column-start | 网格项在第几根列线上开始 |
| grid-column-end | 网格项在第几根列线上结束 | |
| grid-row-start | 网格项在第几根行线上开始 | |
| grid-row-end | 网格项在第几根行线上结束 | |
| grid-area | 网格项定位于哪个区域 | |
| 网格项对齐 | justify-self | 网格项在网格单元的水平方向如何对齐 |
| align-self | 网格项在网格单元的垂直方向如何对齐 | |
更多推荐
css 快速入门教程 - Grid 网格布局教程
发布评论