CSS Grid 布局:属性及使用详解
- 一、CSS Grid 布局的基础概念
- 二、主要的 CSS Grid 属性
- 1、`display: grid` / `display: inline-grid`声明 Grid 容器
- 2、`grid-template-columns` / `grid-template-rows`Grid 容器中列和行的尺寸
- 3、 `grid-template-areas`命名布局区域
- 4、`gap`/ `grid-gap` 设置网格项之间的间距
- 5、`grid-column` / `grid-row`:控制元素在 Grid 中的定位
- 6、 `justify-items` / `align-items`:控制Grid项的对齐
- 7、`justify-content` / `align-content`控制整个 Grid 容器的对齐
- 三、常见的 Grid 布局设计
- 1、简单的 2 列布局
- 2、 定制化的页面布局
- 四、总结