css grid 4列布局

以下是一个基于CSS Grid的4列布局的示例代码：

<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: repeat(4, 1fr);
  grid-gap: 10px;
}

.grid-item {
  background-color: #ccc;
  padding: 20px;
  text-align: center;
}

在上面的代码中，我们首先创建了一个包含8个子元素的父容器，然后使用`display: grid`将其转换为网格容器。接着，我们使用`grid-template-columns`属性指定了4列等宽的网格，每列的宽度为1fr。最后，我们使用`grid-gap`属性设置了网格之间的间距为10像素。

每个子元素都被自动放置在网格中，因为我们没有指定它们的位置。我们可以使用`grid-row`和`grid-column`属性来指定子元素在网格中的位置，但在这个例子中，我们让它们自动放置。