Grid 基础

CSS Grid 布局是一种强大的二维布局系统，可以同时控制行和列，轻松创建复杂的网格结构。

1. 定义网格容器

通过设置容器的 display: grid; 或 inline-grid; 来启用网格布局。

display: grid;

2. 网格轨道（行和列）

使用 grid-template-columns 和 grid-template-rows 定义列宽和行高。

grid-template-columns: 100px 200px 100px;
grid-template-rows: 50px 150px;

也可以使用 fr 单位，表示可用空间的分数份额。

grid-template-columns: 1fr 2fr 1fr;

3. 网格间距

grid-column-gap / column-gap：列间距
grid-row-gap / row-gap：行间距
gap：同时设置行列间距

gap: 10px 20px;

4. 网格项目定位

通过给子元素设置 grid-column 和 grid-row 来控制其跨越的行列。

Grid 基础示例

在线代码演示

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>Grid 基础示例</title>
<style>
.grid-container {
display: grid;
grid-template-columns: 100px 1fr 100px;
grid-template-rows: 50px 150px;
gap: 10px 20px;
background-color: #e0f7fa;
padding: 10px;
border: 2px solid #0097a7;
}
.grid-item {
  background-color: #4db6ac;
  color: white;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 6px;
}

.item1 {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
}

.item2 {
  grid-column: 2 / 4;
  grid-row: 1 / 3;
}

.item3 {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}

</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item item1">项目 1</div>
<div class="grid-item item2">项目 2</div>
<div class="grid-item item3">项目 3</div>
</div>
</body>
</html>