CSS Grid 布局完全指南

CSS Grid 是现代网页布局的强大工具。

基础概念

Grid 布局由容器和项目组成。

定义网格

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

常用属性

• grid-template-columns
• grid-template-rows
• gap
• grid-area

实战案例

响应式卡片布局、圣杯布局等。