Grid布局是CSS中一个强大的二维布局系统，专门为解决Web布局问题而设计。与Flexbox主要处理一维布局不同，Grid允许我们同时处理行和列，创造出复杂且响应式的网页布局。

基本概念

Grid布局基于网格容器（grid container）和网格项目（grid items）的概念：

• 网格容器：通过设置display: grid或display: inline-grid创建
• 网格线：组成网格结构的水平线和垂直线
• 网格轨道：两条相邻网格线之间的空间（行或列）
• 网格单元格：四条网格线包围的最小单位
• 网格区域：由一个或多个相邻网格单元格组成的矩形区域

容器属性

定义网格轨道

.container {
grid-template-columns: 100px 1fr 2fr; /* 固定宽度、1份、2份 */
grid-template-rows: repeat(3, auto); /* 创建3个自动高度的行 */
}

网格间距

.container {
gap: 20px; /* 行列间距均为20px */
row-gap: 10px; /* 行间距 */
column-gap: 15px; /* 列间距 */
}

对齐方式

.container {
justify-items: center; /* 网格项水平居中 */
align-items: center; /* 网格项垂直居中 */
place-items: center center; /* 简写形式 */
}

项目属性

位置控制

.item {
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 2;
grid-row-end: 4;

/* 简写形式 */
grid-column: 1 / 3;
grid-row: 2 / 4;

/* 跨越轨道数 */
grid-column: span 2;
}

命名网格区域

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

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }

响应式Grid布局

Grid布局与媒体查询结合可以创建出色的响应式设计：

.container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: 
    "header"
    "main"
    "sidebar"
    "footer";
}

@media (min-width: 768px) {
  .container {
    grid-template-columns: 1fr 3fr;
    grid-template-areas: 
      "header header"
      "sidebar main"
      "footer footer";
  }
}

@media (min-width: 1024px) {
  .container {
    grid-template-columns: 1fr 3fr 1fr;
    grid-template-areas: 
      "header header header"
      "sidebar main ."
      "footer footer footer";
  }
}

实际应用示例：照片墙

<style>
.photo-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 15px;
  padding: 20px;
}
.photo {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}
.photo:hover {
  transform: scale(1.05);
}
</style>
<div class="photo-gallery">
<img class="photo" src="https://picsum.photos/300/200?random=1" /> 
<img class="photo" src="https://picsum.photos/300/200?random=2" /> 
<img class="photo" src="https://picsum.photos/300/200?random=3" /> 
<img class="photo" src="https://picsum.photos/300/200?random=4" /> 
<img class="photo" src="https://picsum.photos/300/200?random=5" /> 
<img class="photo" src="https://picsum.photos/300/200?random=6" />
</div>

效果展示

浏览器支持与注意事项

CSS Grid布局得到所有现代浏览器的支持（包括IE10/11的部分支持）。对于不支持Grid的浏览器，可以使用特性查询提供回退方案：

.container {
  display: flex; /* 回退方案 */
}
@supports (display: grid) {
  .container {
    display: grid;
    /* Grid特定样式 */
  }
}

结语

CSS Grid布局彻底改变了我们创建Web布局的方式，提供了前所未有的灵活性和控制力。通过掌握Grid，开发者可以创建出更加复杂、美观且响应式的布局，而无需依赖繁琐的浮动或定位技巧。

虽然学习曲线相对陡峭，但一旦掌握，Grid将成为你前端开发工具箱中最强大的工具之一。建议通过实际项目多加练习，逐渐熟悉各种属性和技巧，从而充分利用这一现代布局系统的全部潜力。