CSS Grid 布局详解

CSS Grid 是什么？

CSS Grid 是一种强大的二维布局系统，可以轻松创建复杂的网页布局。它比传统的浮动或 Flexbox 更灵活，特别适合构建网格状的界面。

基本概念

• 网格容器：设置 display: grid 的元素
• 网格项：容器内的直接子元素
• 网格线：划分网格的线
• 网格轨道：行或列之间的空间

创建网格

.container {
  display: grid;
  grid-template-columns: 200px 200px 200px; /* 三列，每列200px */
  grid-template-rows: 100px 100px; /* 两行，每行100px */
}

常用属性

1. grid-template-columns 和 grid-template-rows

定义列和行的尺寸。

/* 固定尺寸 */
grid-template-columns: 100px 200px 100px;

/* 比例单位 fr */
grid-template-columns: 1fr 2fr 1fr; /* 1:2:1 比例 */

/* 重复函数 */
grid-template-columns: repeat(3, 1fr); /* 三列相等 */

2. grid-gap

设置网格项之间的间距。

grid-gap: 10px; /* 行和列间距都是10px */
grid-row-gap: 10px; /* 行间距 */
grid-column-gap: 10px; /* 列间距 */

3. justify-items 和 align-items

控制网格项在单元格内的对齐。

justify-items: center; /* 水平居中 */
align-items: center; /* 垂直居中 */

4. grid-column 和 grid-row

让网格项跨越多个单元格。

.item {
  grid-column: 1 / 3; /* 从第1列线到第3列线，跨越2列 */
  grid-row: 1 / 3; /* 跨越2行 */
}

实际例子

<div class="grid-container">
  <div class="item1">Header</div>
  <div class="item2">Sidebar</div>
  <div class="item3">Main</div>
  <div class="item4">Footer</div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-template-rows: 100px 1fr 100px;
  grid-gap: 10px;
}

.item1 {
  grid-column: 1 / 3; /* 跨越两列 */
}

.item2 {
  grid-row: 2 / 4; /* 跨越两行 */
}

浏览器支持

现代浏览器都支持 CSS Grid，但记得检查兼容性。可以用 Autoprefixer 来添加厂商前缀。

总结

CSS Grid 让布局变得简单直观。多练习几个例子，你就能掌握它了。结合 Flexbox，可以解决几乎所有布局问题。