【高频考点精讲】Grid布局从入门到精通：10个实战案例带你彻底掌握这个强大的布局方案

Grid布局从入门到精通：10个实战案例带你彻底掌握这个强大的布局方案

🧑‍🏫 作者：全栈老李

📅 更新时间：2025 年 5 月

🧑‍💻 适合人群：前端初学者、进阶开发者

🚀 版权：本文由全栈老李原创，转载请注明出处。

大家好，我是全栈老李。今天咱们聊聊CSS Grid布局——这个让无数前端开发者又爱又恨的"二维布局神器"。还记得当年用float拼版面的日子吗？那简直是前端界的"石器时代"。现在有了Grid，我们终于可以优雅地说："浮动？那是什么老古董？"

一、Grid布局基础：比乐高还灵活的拼图

Grid布局的核心思想很简单：把页面划分成行和列组成的网格，然后像玩拼图一样把元素放到指定位置。想象Excel表格，但比Excel灵活100倍——可以随意合并单元格、调整间距、甚至让元素重叠。

先看个最简单的例子（代码来自全栈老李的实战笔记）：

.container {
   
   
  display: grid;
  grid-template-columns: 100px 200px auto; /* 三列：固定100px、200px，剩余空间自动 */
  grid-template-rows: 80px auto 60px;      /* 三行：固定80px、自动、固定60px */
  gap: 15px; /* 单元格间距，替代老旧的margin方案 */
}

对应的HTML：

<div class="container">
  <div class="header">头部</div>
  <div class="sidebar"</