网格布局实现9个按钮

以下是使用CSS网格布局实现9个按钮的示例代码：

HTML代码：

<div class="grid-container">
  <button>按钮1</button>
  <button>按钮2</button>
  <button>按钮3</button>
  <button>按钮4</button>
  <button>按钮5</button>
  <button>按钮6</button>
  <button>按钮7</button>
  <button>按钮8</button>
  <button>按钮9</button>
</div>

CSS代码：

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
}

button {
  padding: 10px;
  font-size: 16px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 5px;
}

在上面的示例中，我们创建了一个具有9个按钮的网格容器，并使用CSS网格布局来控制按钮的位置和大小。我们使用 grid-template-columns 属性来定义每一列的大小，并使用 repeat() 函数来指定重复的列数。我们还使用 grid-gap 属性来定义按钮之间的间距。

最后，我们使用基本的CSS样式来定义按钮的样式，包括颜色、边框和圆角等。您可以根据自己的需求修改这些样式