如何使用网格布局创建一个多列布局？

使用 CSS 网格布局（Grid）创建一个多列布局，首先需要定义好网格容器（grid container）和网格模板（grid template）。以下是步骤：

1. **定义网格容器**：
- 给包含元素的容器添加 `display: grid;` 属性，使其成为网格容器。

   .grid-container {
     display: grid;
   }

2. **设置网格行和列**：
- 使用 `grid-template-columns` 设置列的数量和宽度。例如，创建三列布局：

     .grid-container {
       grid-template-columns: repeat(3, 1fr); /* '1fr' 意味着等分 */
     }

- 可以指定固定的像素值或者百分比。

3. **（可选）设置网格行**：
- 如果需要，可以添加 `grid-template-rows` 来定义行的高度。默认情况下，网格会自动调整高度，直到所有项目都放入为止。

4. **放置网格项（grid items）**：
- 使用 `grid-column` 和 `grid-row` 属性控制每个项目的布局位置。例如：

     .grid-item {
       grid-column: span 2; /* 占据两列 */
       grid-row: 1 / 3; /* 跨越第1到第3行 */
     }

5. **处理间隙和对齐**：
- 使用 `grid-gap` 设置网格线之间的间隔，而 `justify-items` 和 `align-items` 分别用于控制行内项目在水平和垂直方向的对齐方式。

通过这些属性的组合，你可以轻松地创建各种多列布局。记得检查浏览器兼容性，并可能需要使用 Autoprefixer 进行前缀处理。