css网格布局

/* CSS网格布局示例 */

.container {
  display: grid;
  /* 定义一个3列2行的网格布局 */
  grid-template-columns: 100px 100px 100px; /* 每列宽度为100px */
  grid-template-rows: 50px 50px;            /* 每行高度为50px */
  gap: 10px;                                /* 网格项之间的间距 */
}

.item {
  background-color: lightblue;              /* 背景颜色 */
  padding: 20px;                            /* 内边距 */
  text-align: center;                       /* 文本居中 */
}

/* HTML部分 */
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>

解释说明：

1. display: grid;：将容器设置为网格布局。
2. grid-template-columns 和 grid-template-rows：定义了网格的列和行的大小。这里我们定义了一个3列2行的网格，每列宽100px，每行高50px。
3. gap：设置了网格项之间的间距，这里是10px。
4. .item 类：用于每个网格项，设置了背景颜色、内边距和文本居中。

这个示例展示了如何使用CSS网格布局创建一个简单的3x2网格结构。