CSS make squared grid cells with uneven rows and columns

Question

In HTML I create a grid container, and style it in the following way:

  height: 95%;
  display: grid;
  grid-template-columns: repeat(8, auto);

I then fill my grid with divs styled in the following manner.

  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1;
  background-color: red;
  position: relative;

As you can see the tiles are squared, but the grid 'cells' are rectangles. I would like to make the cells squared, so that the gap between tiles on different rows is no longer there.

Answer 1

You can use the gap property to define the gaps between the grid cells. Also make sure, you haven't set the align-content property to a value, that creates space between the rows.

.container {
  height: 95%;
  display: grid;
  gap: 4px;
  grid-template-columns: repeat(8, auto);
}
.container > div {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1;
  background-color: red;
  position: relative;
}

<div class="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>