以 3 列方式定位按钮

Question

所以我有大约 30 个图像按钮，每个按钮都链接到不同的网站...

因为它们是图像，所以我打算将它们排列成 3 列 * 10 行

问题是，我经常 adding/removing 这些按钮，所以每次都重新定位它们似乎很麻烦...

有没有可能我可以形成一个类似网格的结构并让我的按钮从左上角填充所谓的网格？

或者任何其他方法都可以，只要它们在 3 列中对齐即可，而无需定义它们的位置。

Answer 1

您可以使用 CSS 网格布局 https://www.w3schools.com/css/css_grid.asp。

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  background-color: #2196F3;
  padding: 10px;
}
.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
}

<h1>Image grid</h1>

<div class="grid-container">
  <div class="grid-item">
      <a href="https://placeholder.com"><img src="https://via.placeholder.com/150"></a>
  </div>
  <div class="grid-item">
      <a href="https://placeholder.com"><img src="https://via.placeholder.com/150"></a>
  </div>
  <div class="grid-item">
      <a href="https://placeholder.com"><img src="https://via.placeholder.com/150"></a>
  </div>
  <div class="grid-item">
      <a href="https://placeholder.com"><img src="https://via.placeholder.com/150"></a>
  </div>
  <div class="grid-item">
      <a href="https://placeholder.com"><img src="https://via.placeholder.com/150"></a>
  </div>
</div>

以 3 列方式定位按钮

Positioning buttons in a 3 column manner

html

button

alignment