网格布局

CSS Grid 是一个强大的 web 二维布局工具，能够以行和列来进行布局。

参照系

CSS 属性

grid-template-columns
grid-template-rows
grid-template-areas
grid-template
grid-auto-columns
grid-auto-rows
grid-auto-flow
grid
grid-row-start
grid-column-start
grid-row-end
grid-column-end
grid-row
grid-column
grid-area
grid-row-gap
grid-column-gap
grid-gap

CSS 功能

repeat()
minmax()
fit-content()

词汇表

格网
网格线 Grid Lines
网格轨道 Grid Tracks
网格单元 Grid Cell
网格区域 Grid Areas
排水沟
网格轴
栅格行
网格柱

指导

网格布局的基本概念
网格布局与其他布局方法的关系
基于行布局的布局
网格模版区
使用命名网格线的布局
CSS 网格布局中的自动布局
CSS 网格布局中的框对齐
CSS 网格、逻辑值与写入方式
CSS 网格布局和可访问性
CSS 网格与渐进增强
使用 CSS 网格实现公共布局

工具

Interactive CSS Grid Generator | Layoutit Gird

相关资料