Grid 布局有了解吗？

⚡ 速记答案（30 秒）

核心：二维网格布局，把页面划成行和列。常用属性：display: grid、grid-template-rows/columns、grid-template-areas、gap。应用：复杂后台布局、看板、表单布局、响应式卡片网格。

📖 详细讲解

标准面试回答（推荐记住）

Grid 是 CSS 的二维网格布局，可以同时控制行和列。核心属性有 display: grid 开启网格，grid-template-columns 和 grid-template-rows 定义网格轨道，grid-template-areas 可以用命名区域来布局，gap 设置间距。Grid 非常适合复杂的后台布局、看板、表单、响应式卡片网格等场景。与 Flex 的区别是 Flex 是一维布局，Grid 是二维布局。

✅ 面试要点

•Grid 是二维布局
•grid-template-areas 命名区域
•适合复杂页面结构

💻 代码示例

Grid 网格布局

<style>
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto 1fr auto;
  gap: 16px;
  height: 400px;
}

/* 使用区域命名 */
.grid-areas {
  display: grid;
  grid-template-areas:
    "header header header"
    "sidebar main main"
    "footer footer footer";
  grid-template-columns: 200px 1fr 1fr;
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }
</style>

🎨 效果预览