CSS Grid 是现代网页布局的强大工具，能够帮助开发者创建复杂且响应式的页面结构。以下是关键知识点和使用技巧：

📌 基本概念

  • 网格容器：使用 display: grid 定义，如 
    .container { display: grid; grid-template-columns: repeat(3, 1fr); }
  • 行与列：通过 grid-template-rows 和 grid-template-columns 控制，例如 grid-template-columns: 100px 1fr 2fr
  • Gap 属性：设置间距，如 gap: 1rem（需注意与 row-gap 和 column-gap 的区别）

🛠 使用方法

  1. 定义容器 
    .grid-container {
  display: grid;
  grid-template-columns: auto 1fr;
}
  2. 定位子元素
    • grid-column：控制列位置
    • grid-row：控制行位置
  3. 响应式设计
    使用 media queries 动态调整布局，例如： 
    @media (max-width: 600px) {
  .grid-container { grid-template-columns: 1fr; }
}

📖 示例演示

CSS_Grid_布局
<div class="grid-container">
  <div>标题1</div>
  <div>内容1</div>
  <div>内容2</div>
  <div>标题2</div>
</div>

🚀 进阶技巧

  • 自动填充：grid-auto-columns: minmax(100px, 1fr)
  • 区域划分：通过 grid-template-areas 定义布局区域
  • 对齐方式：justify-items 和 align-items 控制元素对齐

如需深入学习响应式 Grid 布局，可参考 CSS_Grid_进阶技巧。

Grid_容器