grid items with inner grid in css

Question

I'm trying to do the following using HTML and CSS:

In order to do so, I thought to build the HTML like this:

<section id="skills">
    <h1>Choose skill to optimize</h1>
    <div class="grid-container">
        <div class="grid-item1">
            <div class="grid-level">
                <p class="skill">A1</p>
            </div>
            <div class="grid-image">
                <img src="/static/icons/A1.png">
            </div>
            <div class="grid-rank">
                <p class="small">Current rank: </p>
            </div>
            <div class="grid-level">
                <p class="small">Current level: </p>
            </div>
            <div class="grid-xp">
                <p class="small">Current XP:</p>
            </div>
        </div>
        <div class="grid-item2">
            <div class="grid-level">
                <p class="skill">A2</p>
            </div>
            <div class="grid-image">
                <img src="/static/icons/A2.png">
            </div>
            <div class="grid-rank">
                <p class="small">Current rank: </p>
            </div>
            <div class="grid-level">
                <p class="small">Current level: </p>
            </div>
            <div class="grid-xp">
                <p class="small">Current XP:</p>
            </div>
        </div>
        <div class="grid-item3">
            <div class="grid-level">
                <p class="skill">A3</p>
            </div>
            <div class="grid-image">
                <img src="/static/icons/A3.png">
            </div>
            <div class="grid-rank">
                <p class="small">Current rank: </p>
            </div>
            <div class="grid-level">
                <p class="small">Current level: </p>
            </div>
            <div class="grid-xp">
                <p class="small">Current XP:</p>
            </div>
        </div>
        <div class="grid-item4">
            <div class="grid-level">
                <p class="skill">A4</p>
            </div>
            <div class="grid-image">
                <img src="/static/icons/A4.png">
            </div>
            <div class="grid-rank">
                <p class="small">Current rank: </p>
            </div>
            <div class="grid-level">
                <p class="small">Current level: </p>
            </div>
            <div class="grid-xp">
                <p class="small">Current XP:</p>
            </div>
        </div>
    </div>
</section>

where my CSS looks like this:

.grid-container {
  background-color: rgba(0, 0, 0, 0.1);
  display: grid;
  align-items: center;
  justify-items: center;
  width:100%;
  height: 100vh;
}

.grid-item1 {
  align-items: center;
  width:30px;
  height: 50px;
  color: rgba(255, 254, 5, 255);
  grid-column-start: 1;
  grid-row-start: 1;
  margin-bottom: 30px;
}

.grid-item2 {
  align-items: center;
  width:30px;
  height: 50px;
  color: rgba(255, 254, 5, 255);
  grid-column-start: 2;
  grid-row-start: 1;
  margin-bottom: 30px;
}

.grid-item3 {
  align-items: center;
  width:30px;
  height: 50px;
  color: rgba(255, 254, 5, 255);
  grid-column-start: 3;
  grid-row-start: 1;
  margin-bottom: 30px;
}

.grid-item4 {
  align-items: center;
  width:30px;
  height: 50px;
  color: rgba(255, 254, 5, 255);
  grid-column-start: 1;
  grid-row-start: 2;
  margin-bottom: 30px;
}

.grid-name{
  grid-column-start: 1;
  grid-row-start: 1;
}

.grid-image {
  grid-column-start: 1;
  grid-row-start: 2;
  grid-row-end: 3;
}

.grid-level{
  grid-column-start: 2;
  grid-row-start: 1;
}

.grid-rank{
  grid-column-start: 2;
  grid-row-start: 2;
}

.grid-xp{
  grid-column-start: 2;
  grid-row-start: 3;
}

However, it doesn't work for some reason.

Is there any better way to design such a grid with items in it instead of copy-paste the same code? if not, any ideas why it doesn't work? (also for some reason the 3 columns (grid1,grid2,grid3) arent centered and fill the container for some reason =S).

Thank you