Positioning buttons in a 3 column manner-CodePudding

So I have around 30 image buttons that each are linked to different websites...

And since they're images I'm planning to arrange them in 3 columns * 10 rows

The thing is, I'd be adding/removing these buttons quite frequently so re-positioning them every single time seems like a hassle...

Any chance I could form a grid-like structure and let my buttons fill out the so called grid from top left?

Or any other methods are fine, as long as they'd be alligned in 3 columns without having to define their positions.

CodePudding user response：

You can use the CSS Grid Layout 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 >
  <div >
      <a href="https://placeholder.com"><img src="https://via.placeholder.com/150"></a>
  </div>
  <div >
      <a href="https://placeholder.com"><img src="https://via.placeholder.com/150"></a>
  </div>
  <div >
      <a href="https://placeholder.com"><img src="https://via.placeholder.com/150"></a>
  </div>
  <div >
      <a href="https://placeholder.com"><img src="https://via.placeholder.com/150"></a>
  </div>
  <div >
      <a href="https://placeholder.com"><img src="https://via.placeholder.com/150"></a>
  </div>
</div>