GRID CSS — How can I not define the grid-row-end?

Question

I'm making a portfolio, using Grid CSS for the first time. I'm pretty new on this, and have a question about grid-row. I never saw the solution on Internet, so that's why I'm asking it here.

I have a container, that has different boxes with the same size. I would like to extend the number of boxes with JavaScript (dynamic). My problem is : Do I need to write a grid-row-end, even if I don't know the height of the container because I actually don't know how many boxes I'll have ?

I made a preview of my problem, here's a preview.

* {
  margin: 0;
  padding: 0;
}

body {
  font-family: -apple-system, roboto, sans-serif;
  background: #222f3e;
  color: #c8d6e5;
}

.container {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-auto-rows: 5rem;
  grid-gap: 3rem 2rem;
}

.container header,
.container footer {
  background: #576574;
  grid-column: 1 / span 10;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.container header {
  grid-row: 2 / span 1;
}

.container .content {
  grid-column: auto / span 10;
  background: #8395a7;
  grid-row: auto / span 10;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 2.5rem;
  grid-gap: 2.5rem 2.5rem;
  grid-auto-flow: row;
}

.container .content .box {
  grid-column: auto / span 3;
  grid-row: auto / span 5;
  background: #ff6b6b;
}

.container footer {
  grid-row: auto / span 2;
}

<div class="container">
  <header>
    <h1> Grid CSS </h1>
  </header>
  <div class="content">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
  <footer>
    <h2> Mon Footer </h2>
  </footer>
</div>

Thanks a lot !

Louis

Answer 1

You don't need to define all those templates. Make it simple and rely on height since you know exactly how tall each item should be and keep the content one auto:

body {
  background: #222f3e;
  color: #c8d6e5;
  margin:0;
}
.container {
  display: grid;
  padding-top:8rem;
  grid-row-gap: 3rem;
}
.container header, .container footer {
  background: #576574;
  display: flex;
  align-items: center;
  justify-content: center;
}
.container header {
  height:5rem;
}
.container .content {
  background: #8395a7;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 2.5rem;
}
.container .content .box {
  height:22.5rem;
  background: #ff6b6b;
}
.container footer {
  height:13rem;
}

<div class="container">  
  <header>
    <h1> Grid CSS </h1>
  </header>
  <div class="content">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
  <footer>
    <h2> Mon Footer </h2>
  </footer>
</div>