How to make grid rows and columns dynamic?

Question

I have this layout :

It's pretty easy to create in the grid, but statically. But how to make dynamic this?

Example:

The parent, grid currently I have 3 grid rows, how to make them automatic higher?

grid-template-rows: repeat(3, 1fr); How to increase 3 by one?

How if, in my case, I have only two blue boxes, set next reds boxes to be like this:

Put latest boxes (light blue) bellow big blue, how if I have one more blue box:

And next, next... My question is: Is this possible in CSS or I must imagine ideas with JS, that can be painful, I think?

Demo code on CodePen is here: CodePen Link

.parent {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-column-gap: 20px;
  grid-row-gap: 20px;
}

.small-box {
  background:red;
  height: 200px;
}
.big-box {
  background:blue;
}

.div1 { grid-area: 1 / 1 / 2 / 3; }
.div2 { grid-area: 1 / 3 / 2 / 5; }
.div3 { grid-area: 1 / 5 / 2 / 7; }
.div4 { grid-area: 2 / 5 / 3 / 7; }
.div5 { grid-area: 3 / 5 / 4 / 7; }
.div6 { grid-area: 2 / 2 / 3 / 5; }
.div7 { grid-area: 3 / 2 / 4 / 5; }

<div class="parent">
<div class="div1 small-box">1</div>
<div class="div2 small-box">2</div>
<div class="div3 small-box">3</div>
<div class="div4 small-box">4</div>
<div class="div5 small-box">5</div>
<div class="div6 big-box">7</div>
<div class="div7 big-box">8</div>
  


  
 <div class="div5 small-box small-box--new">5</div>
</div>

Answer 1

If the order of elements isn't important you can do like below:

.parent {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-column-gap: 5px;
  grid-row-gap: 5px;
  direction: rtl;
}
.parent * {
 direction: ltr;

}
.small-box {
  background: red;
  height: 100px;
  grid-column: span 2;
}
.small-box--new {
  background:lightblue;
} 

.big-box {
  background: blue;
  grid-column:3/span 3;
  grid-row:2;
}
.big-box ~ .big-box {grid-row:3;}
.big-box ~ .big-box ~ .big-box {grid-row:4;}
.big-box ~ .big-box ~ .big-box ~ .big-box {grid-row:5;}
/* and so on */

<div class="parent">
  <div class=" small-box">1</div>
  <div class=" small-box">2</div>
  <div class=" small-box">3</div>
  <div class=" small-box">4</div>
  <div class=" small-box">5</div>
  <div class=" big-box">7</div>
  <div class=" big-box">8</div>
  <div class=" small-box small-box--new">5</div>
  <div class=" small-box small-box--new">5</div>
  <div class=" small-box small-box--new">5</div>
</div>

Adding another blue:

.parent {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-column-gap: 5px;
  grid-row-gap: 5px;
  direction: rtl;
}
.parent * {
 direction: ltr;

}
.small-box {
  background: red;
  height: 100px;
  grid-column: span 2;
}
.small-box--new {
  background:lightblue;
} 

.big-box {
  background: blue;
  grid-column:3/span 3;
  grid-row:2;
}
.big-box ~ .big-box {grid-row:3;}
.big-box ~ .big-box ~ .big-box {grid-row:4;}
.big-box ~ .big-box ~ .big-box ~ .big-box {grid-row:5;}
/* and so on */

<div class="parent">
  <div class=" small-box">1</div>
  <div class=" small-box">2</div>
  <div class=" small-box">3</div>
  <div class=" small-box">4</div>
  <div class=" small-box">5</div>
  <div class=" big-box">7</div>
  <div class=" big-box">8</div>
  <div class=" big-box">9</div>
  <div class=" small-box small-box--new">5</div>
  <div class=" small-box small-box--new">5</div>
  <div class=" small-box small-box--new">5</div>
</div>

And another one:

.parent {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-column-gap: 5px;
  grid-row-gap: 5px;
  direction: rtl;
}
.parent * {
 direction: ltr;

}
.small-box {
  background: red;
  height: 100px;
  grid-column: span 2;
}
.small-box--new {
  background:lightblue;
} 

.big-box {
  background: blue;
  grid-column:3/span 3;
  grid-row:2;
}
.big-box ~ .big-box {grid-row:3;}
.big-box ~ .big-box ~ .big-box {grid-row:4;}
.big-box ~ .big-box ~ .big-box ~ .big-box {grid-row:5;}
/* and so on */

<div class="parent">
  <div class=" small-box">1</div>
  <div class=" small-box">2</div>
  <div class=" small-box">3</div>
  <div class=" small-box">4</div>
  <div class=" small-box">5</div>
  <div class=" big-box">7</div>
  <div class=" big-box">8</div>
  <div class=" big-box">9</div>
  <div class=" big-box">9</div>
  <div class=" small-box small-box--new">5</div>
  <div class=" small-box small-box--new">5</div>
  <div class=" small-box small-box--new">5</div>
</div>