XY网格 - class="grid-container"

一种解决方法是使用CSS和HTML来创建一个包含XY网格的网格容器。

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>

CSS代码示例：

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 将网格列分为3个等宽的部分 */
  grid-template-rows: repeat(3, 1fr); /* 将网格行分为3个等高的部分 */
  gap: 10px; /* 网格项之间的间隔 */
}

.grid-item {
  background-color: #ccc; /* 网格项的背景颜色 */
  padding: 20px; /* 网格项的内边距 */
  text-align: center; /* 文本居中 */
}

这个示例中，grid-container类定义了一个网格容器，使用display: grid;将其设置为网格布局。grid-template-columns和grid-template-rows属性将网格分为3列和3行，每个部分的大小都是平均的（使用1fr单位）。gap属性定义了网格项之间的间隔。

grid-item类定义了每个网格项的样式，包括背景颜色、内边距和文本居中。

您可以根据需要调整网格的列数、行数、间隔和样式。