Grid Items Should Flow Across Rows, Not Columns

I have a grid that contains 7 dynamically sized divs surrounded by 2 blocks that should align with the 2nd row of the 7 dynamic div grid. I have it mostly working, except that the

Solution 1:

Here is one way to solve your problem, I'm just now learning css grid, however I think most of this is correct.

You're .column-with-dynamic-content is creating a template with 7 columns, however, you only have 3 child divs inside of this container, it's looking for 7. You need this class to contain all 7 parent divs that contain the dynamic divs. I created a class below to show you.

.content {
  display: grid;
  grid-template-columns: 1fr 7fr 1fr;
  grid-auto-rows: 50px;
  grid-gap: 10px;
  grid-auto-flow: column;
}

.column-with-dynamic-content {
  display: grid;
  grid-auto-rows: 50px;
  grid-gap: 10px;
}

.seven-children-column {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: 50px;
  grid-gap: 10px;
  grid-column: 2 / 3;
}

.left {
  grid-column-start: 1;
  grid-row: 2 / 3;
}

.right {
  grid-column-end: -1;
  grid-row: 2 / 3;
}


/* just demo styles */.left,
.right {
  border: 2px solid red;
}

.dynamic {
  background-color: lightgray;
  border: 1px solid gray;
}

<divclass='content'><divclass='left'></div><divclass='seven-children-column'><divclass='column-with-dynamic-content'><divclass='dynamic'>1</div><divclass='dynamic'></div><divclass='dynamic'></div></div><divclass='column-with-dynamic-content'><divclass='dynamic'>2</div><divclass='dynamic'></div></div><divclass='column-with-dynamic-content'><divclass='dynamic'>3</div><divclass='dynamic'></div><divclass='dynamic'></div></div><divclass='column-with-dynamic-content'><divclass='dynamic'>4</div><divclass='dynamic'></div></div><divclass='column-with-dynamic-content'><divclass='dynamic'>5</div><divclass='dynamic'></div><divclass='dynamic'></div></div><divclass='column-with-dynamic-content'><divclass='dynamic'>6</div><divclass='dynamic'></div></div><divclass='column-with-dynamic-content'><divclass='dynamic'>7</div><divclass='dynamic'></div></div></div><divclass='right'></div></div>

Solution 2:

Grid provides line-based placement, which allows you to define the size and location of grid items.

.content, 
.column-with-dynamic-content {
  display: grid;
  grid-auto-rows: 50px;  
  grid-gap: 10px;
}

.content > div:nth-child(1) { grid-column: 1 / 2;  grid-row: 2 / 3; }
.content > div:nth-child(2) { grid-column: 2 / 3; }
.content > div:nth-child(3) { grid-column: 3 / 4; }
.content > div:nth-child(4) { grid-column: 4 / 5; }
.content > div:nth-child(5) { grid-column: 5 / 6; }
.content > div:nth-child(6) { grid-column: 6 / 7; }
.content > div:nth-child(7) { grid-column: 7 / 8; }
.content > div:nth-child(8) { grid-column: 8 / 9; }
.content > div:nth-child(9) { grid-column: 9 / 10; grid-row: 2 / 3; }

/* just demo styles */.left, .right { border: 2px solid red; }
.dynamic { background-color: lightgray;  border: 1px solid gray; }

<divclass='content'><divclass='left'></div><divclass='column-with-dynamic-content'><divclass='dynamic'>1</div><divclass='dynamic'></div><divclass='dynamic'></div></div><divclass='column-with-dynamic-content'><divclass='dynamic'>2</div><divclass='dynamic'></div></div><divclass='column-with-dynamic-content'><divclass='dynamic'>3</div><divclass='dynamic'></div><divclass='dynamic'></div></div><divclass='column-with-dynamic-content'><divclass='dynamic'>4</div><divclass='dynamic'></div></div><divclass='column-with-dynamic-content'><divclass='dynamic'>5</div><divclass='dynamic'></div><divclass='dynamic'></div></div><divclass='column-with-dynamic-content'><divclass='dynamic'>6</div><divclass='dynamic'></div></div><divclass='column-with-dynamic-content'><divclass='dynamic'>7</div><divclass='dynamic'></div></div><divclass='right'></div></div>

jsFiddle demo