使用grid布局四行两列

使用grid布局实现四行两列的示例代码如下：

<style>
    .grid-container {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(4, 1fr);
        gap: 10px;
    }
    .grid-item {
        background-color: #ccc;
        padding: 20px;
        text-align: center;
    }
</style>

<div class="grid-container">
    <div class="grid-item">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>
    <div class="grid-item">4</div>
    <div class="grid-item">5</div>
    <div class="grid-item">6</div>
    <div class="grid-item">7</div>
    <div class="grid-item">8</div>
</div>

这段代码定义了一个名为`grid-container`的容器，使用`display: grid`将其设置为网格布局。通过`grid-template-columns`和`grid-template-rows`属性，我们可以指定网格的列数和行数。在这个例子中，我们将容器划分为两列和四行。每个单元格都有相同的大小，使用`1fr`表示平均分配可用空间。通过`gap`属性，我们可以设置单元格之间的间距。

在容器内部，我们使用`grid-item`类定义了每个单元格的样式。这里的示例中，我们简单地设置了背景颜色、内边距和居中对齐。

通过这段代码，我们可以实现一个四行两列的网格布局。