How do I repeat different kind of rows with different widths with css grid?

Question

I want to utilize css grid to display the following table using repeat(x) pattern:

• The blue boxes are the headings and only appear once. They should use auto width, based on the biggest blue/green box in the column.
• The green boxes also use auto width, based on the biggest blue/green box in the column.
• They yellow boxes take 100% width combining the width of all 3 columns.

The green + yellow boxes should be able to be repeated X number of times.

If this is not a good example to use grid, feel free to show a different alternative!

Answer 1

I extended @dale landry answer to make it more dynamic, without having to explicitly define each row in grid-template-areas and use grid-column: span 3; instead.

:root {
  --yellow: 242, 202, 4;
  --green: 85, 205, 75;
  --blue: 80, 137, 245;
}

#cont {
  display: flex;
  justify-content: center;
  align-items: center;
}

.main {
  display: grid;
  grid-template-columns: auto, auto, auto;
  gap: 10px 10px;
  width: 100vw;
  height: 100vh;
  min-height: 500px;
}
.box {
   height:50px;
}
.yellow-box {
  grid-column: span 3;
  border: 2px solid rgb(var(--yellow));
  background: rgba(var(--yellow), 0.5);
 }
.blue-box {
  border: 2px solid rgb(var(--blue));
  background: rgba(var(--blue), 0.5);
}

.green-box {
  border: 2px solid rgb(var(--green));
  background: rgba(var(--green), 0.5);
}

<div id="cont">
  <div class="main">
    <div class="blue-box"></div>
    <div class="blue-box"></div>
    <div class="blue-box"></div>
    <div class="green-box"></div>
    <div class="green-box"></div>
    <div class="green-box"></div>
    <div class="yellow-box"></div>
    <div class="green-box"></div>
    <div class="green-box"></div>
    <div class="green-box"></div>
    <div class="yellow-box"></div>
    <div class="green-box"></div>
    <div class="green-box"></div>
    <div class="green-box"></div>
    <div class="yellow-box"></div>
    </div>
  </div>
</div>

Answer 2

Actually your layout can be achieved using only one rule:

.container {
  display:grid;
  grid-gap:10px;
  grid-auto-rows:50px;
}

.container div {
  background:green;
}

/* the first 3 row (the heading) */
.container :nth-child(-n + 3) {
  background:purple;
}
/* the largest row */
.container :nth-child(4n + 7) { /* you pattern repeat each 4 items starting from the 7th */
  background:orange;
  grid-column:span 3; /* this rule will do everything */
}

<div class="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

Answer 3

The blue boxes are the headings and only appear once. They should use auto width, based on the biggest blue/green box in the column.

Depending on what your css is set to in regards to the parent elements width and height, the children within each row will be determined by the grid template columns/rows fraction you have set in your CSS. grid-template-rows grid-template-columns. If you have three columns each 1fr wide, they will span the width and gap set in your CSS for that row => grid-template-areas: "el el el" equals el + gap + el + gap + el = parents declared width in CSS.

The yellow boxes take 100% width combining the width of all 3 columns.

In the case of your rows that only contain one element, the yellow rows, you want to lay those out in the grid-template-areas like grid-template-areas: "row3 row3 row3" where that elements class = row3.

"The green + yellow boxes should be able to be repeated X number of times."

Using grid layout you will have to code your CSS to accommodate this.

• Your HTML will have to reflect a class selector for each new row/elements in that row.
• The class selector for that new row will have to be added to the parent elements (main in my example below) CSS grid-template-areas: and the grid-template-rows: repeat(8, 1fr); rule will have to reflect the correct number of repeated rows here => repeat(8, 1fr), 8 being the number of rows in your layout.
• Each new row/elements within that row will need to have a grid-area set to their class selectors.

:root {
  --orange: 242, 202, 4;
  --green: 85, 205, 75;
  --blue: 80, 137, 245;
}

#cont {
  display: flex;
  justify-content: center;
  align-items: center;
}

.main {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(8, 1fr);
  gap: 20px 20px;
  width: 100vw;
  height: 100vh;
  min-height: 500px;
  grid-template-areas: 
    "col1-row1 col2-row1 col3-row1" 
    "col1-row2 col2-row2 col3-row2" 
    "row3 row3 row3" 
    "col1-row4 col2-row4 col3-row4" 
    "row5 row5 row5" 
    "col1-row6 col2-row6 col3-row6" 
    "row7 row7 row7" 
    ". bullets .";
}

.col1-row1 {
  grid-area: col1-row1;
  border: 2px solid rgb(var(--blue));
  background: rgba(var(--blue), 0.5);
}

.col2-row1 {
  grid-area: col2-row1;
  border: 2px solid rgb(var(--blue));
  background: rgba(var(--blue), 0.5);
}

.col3-row1 {
  grid-area: col3-row1;
  border: 2px solid rgb(var(--blue));
  background: rgba(var(--blue), 0.5);
}

.col1-row2 {
  grid-area: col1-row2;
  border: 2px solid rgb(var(--green));
  background: rgba(var(--green), 0.5);
}

.col2-row2 {
  grid-area: col2-row2;
  border: 2px solid rgb(var(--green));
  background: rgba(var(--green), 0.5);
}

.col3-row2 {
  grid-area: col3-row2;
  border: 2px solid rgb(var(--green));
  background: rgba(var(--green), 0.5);
}

.row3 {
  grid-area: row3;
  border: 2px solid rgb(var(--orange));
  background: rgba(var(--orange), 0.5);
}

.col1-row4 {
  grid-area: col1-row4;
  border: 2px solid rgb(var(--green));
  background: rgba(var(--green), 0.5);
}

.col2-row4 {
  grid-area: col2-row4;
  border: 2px solid rgb(var(--green));
  background: rgba(var(--green), 0.5);
}

.col3-row4 {
  grid-area: col3-row4;
  border: 2px solid rgb(var(--green));
  background: rgba(var(--green), 0.5);
}

.row5 {
  grid-area: row5;
  border: 2px solid rgb(var(--orange));
  background: rgba(var(--orange), 0.5);
}

.col1-row6 {
  grid-area: col1-row6;
  border: 2px solid rgb(var(--green));
  background: rgba(var(--green), 0.5);
}

.col2-row6 {
  grid-area: col2-row6;
  border: 2px solid rgb(var(--green));
  background: rgba(var(--green), 0.5);
}

.col3-row6 {
  grid-area: col3-row6;
  border: 2px solid rgb(var(--green));
  background: rgba(var(--green), 0.5);
}

.row7 {
  grid-area: row7;
  border: 2px solid rgb(var(--orange));
  background: rgba(var(--orange), 0.5);
}

.bullets {
  grid-area: bullets;
  display: flex;
  justify-content: space-around;
  align-items: end;
}
.bullets span {
  height: 10px;
  width: 10px;
  border: 2px solid #AAA;
  background: #CCC;
  border-radius: 20px;
}

<div id="cont">
  <div class="main">
    <div class="col1-row1"></div>
    <div class="col2-row1"></div>
    <div class="col3-row1"></div>
    <div class="col1-row2"></div>
    <div class="col2-row2"></div>
    <div class="col3-row2"></div>
    <div class="row3"></div>
    <div class="col1-row4"></div>
    <div class="col2-row4"></div>
    <div class="col3-row4"></div>
    <div class="row5"></div>
    <div class="col1-row6"></div>
    <div class="col2-row6"></div>
    <div class="col3-row6"></div>
    <div class="row7"></div>
    <div class="bullets">
      <span></span>
      <span></span>
      <span></span>
    </div>
  </div>
</div>