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; }

user_8620333 · Answer

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 */

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 */

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 */

How to make grid rows and columns dynamic?

1 Answers