使用微信扫一扫
扫一扫关注官方微信 CSS中Grid布局的属性认识
- 来源：纵横数据
- 作者：中横科技
- 时间：2020/4/22 14:20:55
- 类别：新闻资讯
1.grid 布局
grid是 css 中的一种新的布局方式，对盒子和盒子内容的位置及尺寸有很强的控制能力。与 flex 不同，flex 着重于单轴，而 grid 适应于多轴。
2. 基本概念
设置 display: grid; 的元素称为容器，它的直接子元素称为项目，但注意子孙元素不是项目。
grid line：网格线，构成 grid 布局的结构，分为水平和竖直两种。
grid track：两条相邻网格线之间的空间，可以认为是一行或者一列。
grid cell：两条相邻行和相邻列之间分割线组成的空间，是 grid 布局中的一个单元。
grid area：四条网格线包裹的全部空间，任意数量的 grid cell 组成一个 grid area。
3. 容器属性
grid-template 系列
grid-template-columns
grid-template-rows
grid-template-areas
grid-gap 系列
grid-column-gap
grid-row-gap
place-items 系列
justify-items
align-items
place-content 系列
justify-content
align-content
grid 系列
grid-auto-columns
grid-auto-rows
grid-auto-flow
grid是 css 中的一种新的布局方式，对盒子和盒子内容的位置及尺寸有很强的控制能力。与 flex 不同，flex 着重于单轴，而 grid 适应于多轴。
2. 基本概念
设置 display: grid; 的元素称为容器，它的直接子元素称为项目，但注意子孙元素不是项目。
grid line：网格线，构成 grid 布局的结构，分为水平和竖直两种。
grid track：两条相邻网格线之间的空间，可以认为是一行或者一列。
grid cell：两条相邻行和相邻列之间分割线组成的空间，是 grid 布局中的一个单元。
grid area：四条网格线包裹的全部空间，任意数量的 grid cell 组成一个 grid area。
3. 容器属性
grid-template 系列
grid-template-columns
grid-template-rows
grid-template-areas
grid-gap 系列
grid-column-gap
grid-row-gap
place-items 系列
justify-items
align-items
place-content 系列
justify-content
align-content
grid 系列
grid-auto-columns
grid-auto-rows
grid-auto-flow
