create a css grid with n*n squares

Question

I'm trying to make a grid with squares in it, but currently the squares are squashed, also the squares should be touching, instead there is a gap. How can I configure css grid to do this? Thanks in advance.

I've added the code below. It's fairly straightforward...

Rik

.grid {
    margin: 0;
    display: grid;
    align-content: center;
    justify-items: center;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(8, 1fr);
}

.playable {
    display: inline-block;
    height: 100%;
    width: 100%;
    border: 3px yellow solid;
    background-color: black;
}

.empty {
    display: inline-block;
    height: 100%;
    width: 100%;
    border: 3px yellow solid;
    background-color: red;
}

    <div class="grid">
        <div class="playable">
        </div>
        <div class="empty"></div>
        <div class="playable"></div>
        <div class="empty"></div>
        <div class="playable"></div>
        <div class="empty"></div>
        <div class="playable"></div>
        <div class="empty"></div>
    </div>
        <div class="grid">
        <div class="playable">
        </div>
        <div class="empty"></div>
        <div class="playable"></div>
        <div class="empty"></div>
        <div class="playable"></div>
        <div class="empty"></div>
        <div class="playable"></div>
        <div class="empty"></div>
    </div>
        <div class="grid">
        <div class="playable">
        </div>
        <div class="empty"></div>
        <div class="playable"></div>
        <div class="empty"></div>
        <div class="playable"></div>
        <div class="empty"></div>
        <div class="playable"></div>
        <div class="empty"></div>
    </div>
        <div class="grid">
        <div class="playable">
        </div>
        <div class="empty"></div>
        <div class="playable"></div>
        <div class="empty"></div>
        <div class="playable"></div>
        <div class="empty"></div>
        <div class="playable"></div>
        <div class="empty"></div>
    </div>
        <div class="grid">
        <div class="playable">
        </div>
        <div class="empty"></div>
        <div class="playable"></div>
        <div class="empty"></div>
        <div class="playable"></div>
        <div class="empty"></div>
        <div class="playable"></div>
        <div class="empty"></div>
    </div>
        <div class="grid">
        <div class="playable">
        </div>
        <div class="empty"></div>
        <div class="playable"></div>
        <div class="empty"></div>
        <div class="playable"></div>
        <div class="empty"></div>
        <div class="playable"></div>
        <div class="empty"></div>
    </div>
        <div class="grid">
        <div class="playable">
        </div>
        <div class="empty"></div>
        <div class="playable"></div>
        <div class="empty"></div>
        <div class="playable"></div>
        <div class="empty"></div>
        <div class="playable"></div>
        <div class="empty"></div>
    </div>
        <div class="grid">
        <div class="playable">
        </div>
        <div class="empty"></div>
        <div class="playable"></div>
        <div class="empty"></div>
        <div class="playable"></div>
        <div class="empty"></div>
        <div class="playable"></div>
        <div class="empty"></div>
    </div>

As you can see the cells get squashed for some reason...

Answer 1

Use a single grid for all items, and let the grid decide the dimensions of rows & columns:

.grid {
  display: grid;
  grid-template-columns: repeat(8, 12vmax);
  grid-template-rows: repeat(8, 12vmax);
  height: 100vh;
}

.grid > .playable, .grid > .empty {
  border: 3px yellow solid;
}

.playable {
  background-color: black;
}

.empty {
  background-color: red;
}

body {
  margin: 0;
}

<div class="grid">
  <div class="playable"></div>
  <div class="empty"></div>
  <div class="playable"></div>
  <div class="empty"></div>
  <div class="playable"></div>
  <div class="empty"></div>
  <div class="playable"></div>
  <div class="empty"></div>
  <div class="playable"></div>
  <div class="empty"></div>
  <div class="playable"></div>
  <div class="empty"></div>
  <div class="playable"></div>
  <div class="empty"></div>
  <div class="playable"></div>
  <div class="empty"></div>
  <div class="playable"></div>
  <div class="empty"></div>
  <div class="playable"></div>
  <div class="empty"></div>
  <div class="playable"></div>
  <div class="empty"></div>
  <div class="playable"></div>
  <div class="empty"></div>
  <div class="playable"></div>
  <div class="empty"></div>
  <div class="playable"></div>
  <div class="empty"></div>
  <div class="playable"></div>
  <div class="empty"></div>
  <div class="playable"></div>
  <div class="empty"></div>
  <div class="playable"></div>
  <div class="empty"></div>
  <div class="playable"></div>
  <div class="empty"></div>
  <div class="playable"></div>
  <div class="empty"></div>
  <div class="playable"></div>
  <div class="empty"></div>
  <div class="playable"></div>
  <div class="empty"></div>
  <div class="playable"></div>
  <div class="empty"></div>
  <div class="playable"></div>
  <div class="empty"></div>
  <div class="playable"></div>
  <div class="empty"></div>
  <div class="playable"></div>
  <div class="empty"></div>
  <div class="playable"></div>
  <div class="empty"></div>
  <div class="playable"></div>
  <div class="empty"></div>
  <div class="playable"></div>
  <div class="empty"></div>
  <div class="playable"></div>
  <div class="empty"></div>
  <div class="playable"></div>
  <div class="empty"></div>
  <div class="playable"></div>
  <div class="empty"></div>
  <div class="playable"></div>
  <div class="empty"></div>
</div>