CSS Grid 是现代网页布局的强大工具，适合创建复杂的二维网格结构。以下是核心知识点速览：

1. 基础概念 📌

  • Grid 容器：通过 display: grid 定义，如 
    .container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
    CSS_Grid_Container
  • Grid 项：容器内的子元素自动成为网格项，可通过 grid-column/grid-row 控制位置

2. 常用属性 🛠️

属性 作用 示例
grid-template-areas 定义区域名称 header main footer / sidebar main footer
gap 设置间距 gap: 1rem;
justify-items 对齐方式 justify-items: center;

3. 实战示例 📄

<div class="grid-container">
  <div>标题栏</div>
  <div>内容区</div>
  <div>侧边栏</div>
  <div>页脚</div>
</div>
CSS_Grid_Layout

4. 深入学习 📚

💡 小贴士：尝试在浏览器开发者工具中实时调整 grid-template-columns 见效更直观！