CSS -如何制作一个2x3的图标网格？

<div class="grid-container">
  <div class="grid-item"><img src="icon1.png" alt="Icon 1"></div>
  <div class="grid-item"><img src="icon2.png" alt="Icon 2"></div>
  <div class="grid-item"><img src="icon3.png" alt="Icon 3"></div>
  <div class="grid-item"><img src="icon4.png" alt="Icon 4"></div>
  <div class="grid-item"><img src="icon5.png" alt="Icon 5"></div>
  <div class="grid-item"><img src="icon6.png" alt="Icon 6"></div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2列，每列平均占据剩余空间 */
  grid-gap: 10px; /* 图标之间的间距 */
}

.grid-item {
  display: flex;
  justify-content: center; /* 图标水平居中 */
  align-items: center; /* 图标垂直居中 */
  background-color: #f2f2f2; /* 图标背景色 */
  padding: 20px; /* 图标内边距 */
}