CSS Grid 布局：创建每行 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` 属性用于设置项目之间的间距，这是可选的。

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