Create a grid for memory game - html

Question

How would I create a grid that has this layout?
I tried something like this but obviously it's not working
.wrapper {
display: grid;
grid-template-areas: "i i i" "i i i" "i i i" ". i ."
}
<div class="wrapper">
<div class="inside">Hello</div>
<div class="inside">Hello</div>
<div class="inside">Hello</div>
<div class="inside">Hello</div>
<div class="inside">Hello</div>
<div class="inside">Hello</div>
</div>
I thought if I target the second to last card and create the space that way but can't figure out how to target each card to put in a separate grid.

Answer 1

You can use the grid-column property to position each grid item.
.grid-wrapper {
display: grid;
grid-template-columns: repeat(4, 100px);
grid-gap: 1em;
}
.grid-item {
background-color: dodgerblue;
height: 100px;
width: 100px;
border-radius: 10px;
}
#last-item-1 {
grid-column: 2 / 3; /* Start from column-line 2 and end at 3 */
}
#last-item-2 {
grid-column: 3 / 4; /* Start from column-line 3 and end at 4 */
}
<div class="grid-wrapper">
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item" id="last-item-1"></div>
<div class="grid-item" id="last-item-2"></div>
</div>
You can go through this guide on CSS Grid.

Answer 2

If you don't have constraints on the width of the columns, doing this with flexbox is easier. Using the grid module is tricky to handle the latest child due to its "table-like" behavior, while with flex, you can do it with this:
div {
display: flex;
flex-wrap: wrap;
}
div > div {
background-color: hotpink;
height: 200px;
width: 200px;
margin: 30px auto;
}
<div>
<div>01</div>
<div>02</div>
<div>03</div>
<div>04</div>
<div>05</div>
<div>06</div>
<div>07</div>
<div>08</div>
<div>09</div>
<div>10</div>
</div>