CSS grid 网格布局

一个网格通常具有许多的列（column）与行（row），以及行与行、列与列之间的间隙，这个间隙一般被称为沟槽（gutter）。

创建一个网格容器

display: grid;

设置列

grid-template-columns: 200px 200px 200px ···;
// fr 单位： 占居可用空间的份数

设置网格间隙

grid-gap: 20px;

显隐式网格 可以类比 flex 的主、副轴

minmax(100px, auto) 设置行列长度的最小最大值

自动使用多列填充

grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

放置元素到网格中

基于 网格线
grid–column–start (en-US)
grid–column–end (en-US)
grid–row–start (en-US)
grid–row–end (en-US)

grid–column
grid–row

基于 grid–template–areas

grid 简写

显式网格属性 grid–template

• grid–template–rows
• grid–template–columns
• grid–template–areas，

隐式网格属性

• grid–auto–rows
• grid–auto–columns
• grid–auto–flow

间距属性

• grid-column–gap
• grid-row-gap

仅可在一个 grid 属性中声明 显式 或 隐式网格。
此简写声明无法设置网格的槽（gutter），槽会被该声明重置。

代码007普通

打赏 收藏 海报 链接