Css-Grid: Trouble defining grid rules - html

Question

Using CSS Grid, I'm trying to create a layout that looks like this:
How do I place the bottom (smaller) elements beyond the first row without using nested elements? The number of smaller elements can be anything. I tried using grid-auto-columns: 2fr; to accomplish my task, but it does not work.
Here's what I've tried so far: Codepen
main {
display: grid;
padding: 10px 0 10px 10px;
grid-template: 1fr/repeat(6, 1fr);
grid-template-areas: "a a a b b b";
grid-auto-columns: 2fr;
grid-column-gap: 10px;
grid-row-gap: 10px;
}
main .a {
grid-area: a;
}
main .b {
grid-area: b;
}
.cat {
height: 150px;
background-size: cover;
background-position: center;
overflow: hidden;
position: relative;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
font-size: 20px;
background-color: green;
color: #fff;
}
.cat:hover {
background-color: #004800;
}
<main>
<div class="cat a"></div>
<div class="cat b"></div>
<div class="cat c"></div>
<div class="cat d"></div>
<div class="cat e"></div>
<div class="cat f"></div>
<div class="cat g"></div>
<div class="cat h"></div>
<div class="cat i"></div>
</main>

Answer 1

The first thing I did is define how many columns the grid should be. Looking at your image, it made sense to me to go with 12 columns.
In the main element, I add the rule:
grid-template-columns: repeat(12, 1fr);
In your .cat rules, I added a few things. By default, each block takes up 4/12 columns.
grid-column: span 4;
The last part was dealing with the first two .cat blocks, a and b. No problem. They each take up 6/12 columns.
&.a,
&.b {
grid-column: span 6;
}
And that's it. Here's a working demo.
main {
display: grid;
padding: 10px 0 10px 10px;
grid-template-columns: repeat(12, 1fr);
grid-column-gap: 10px;
grid-row-gap: 10px;
}
.cat {
height: 150px;
background-size: cover;
background-position: center;
overflow: hidden;
position: relative;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
font-size: 20px;
background-color: green;
color: #fff;
grid-column: span 4;
}
.cat:hover {
background-color: #004800;
}
.cat.a,
.cat.b {
grid-column: span 6;
}
<main>
<div class="cat a"></div>
<div class="cat b"></div>
<div class="cat c"></div>
<div class="cat d"></div>
<div class="cat e"></div>
<div class="cat f"></div>
<div class="cat g"></div>
<div class="cat h"></div>
<div class="cat i"></div>
</main>