使用CSS Grid进行页面布局

能者

使用CSS Grid进行页面布局非常简单。下面是一些基本步骤:
1. 创建一个包含网格容器的HTML元素。这可以是任何块级元素，例如`<div>`。
2. 在CSS中，将该容器元素设为网格容器。可以通过设置`display: grid;`来实现。
3. 使用`grid-template-columns`和`grid-template-rows`属性定义网格的列和行。你可以指定固定的宽度或高度，也可以使用百分比、自适应或弹性单位。
4. 将子元素放置到网格中。可以使用`grid-column`和`grid-row`属性控制子元素在网格中的位置。例如，使用`grid-column: 1 / 3;`将一个元素放置在第1列到第3列之间。
5. 可以使用其他CSS属性（如`grid-gap`、`grid-area`等）对网格进行进一步的控制和布局。

下面是一个简单的示例代码:
[mw_shl_code=html,true]
<div class="grid-container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>
[/mw_shl_code]

[mw_shl_code=css,true]
.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* 三列等宽 */
  grid-gap: 10px; /* 列间隔为10像素 */
}

.item {
  background-color: #ccc;
  padding: 20px;
}
[/mw_shl_code]

在这个例子中，我们创建了一个具有三列等宽的网格容器，并设置了10像素的列间隔。然后，我们在网格容器中放置了三个带有背景颜色和内边距的项目。

以上是CSS Grid的基本使用方法。你可以根据需要进行更复杂的布局和样式设置。