CSS Grid 布局入门

2026年3月21日

CSS Grid 是现代网页布局的利器，可以轻松实现复杂的二维布局。

基本概念

Grid 由容器（container）和项目（item）组成。容器使用 display: grid 来创建网格。

定义网格

使用 grid-template-columns 和 grid-template-rows 来定义网格的列和行。

网格间隙

gap 属性用来设置网格项目之间的间距。

响应式布局

结合 repeat() 和 auto-fit 可以轻松创建响应式网格布局。

配合 minmax() 函数，Grid 布局可以适应各种屏幕尺寸。