CSS Grid 布局实战

CSS Grid 是一个强大的二维布局系统，可以同时控制行和列。

基础概念

Grid 容器通过 display: grid 创建：

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

常用属性

grid-template-columns

定义列的大小和数量：

/* 三等分列 */
grid-template-columns: 1fr 1fr 1fr;

/* 响应式列 */
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

grid-area

使用命名区域进行布局：

.container {
  grid-template-areas:
    "header header header"
    "sidebar main main"
    "footer footer footer";
}

实际应用

Grid 非常适合用于：

• 页面整体布局
• 瀑布流图片展示
• 仪表板设计
• 响应式卡片列表

与 Flexbox 的区别

• Grid: 二维布局（行+列）
• Flexbox: 一维布局（行或列）

两者可以配合使用，Grid 用于大布局，Flexbox 用于组件内部布局。