css display gird 每排 6 个

要在CSS中创建一个每行6个项目的网格布局，可以使用CSS的grid属性来实现。以下是一个示例：

HTML代码：

<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 class="grid-item">9</div>
  <div class="grid-item">10</div>
  <div class="grid-item">11</div>
  <div class="grid-item">12</div>
  <!-- 添加更多的项目 -->
</div>

CSS代码：

.grid-container {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-gap: 10px; /* 可选，用于设置项目之间的间距 */
}

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

在上面的示例中，我们创建了一个包含12个项目的网格布局。通过grid-template-columns: repeat(6, 1fr);，我们将网格设置为每行6个项目。grid-gap属性用于设置项目之间的间距，这是可选的。

你可以根据需要添加更多的项目，并根据你的设计要求调整样式。