2

I have a css-grid element, and I want to place my grid items by explicitly specifying the column number and row span for each item, while leaving the row number for each item to be sorted out automatically.

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.col-1 {
  grid-column: 1;
}

.col-2 {
  grid-column: 2;
}

.small {
  grid-row: span 1;
}

.medium {
  grid-row: span 2;
}

.large {
  grid-row: span 3;
}
<div class="grid-container">
  <div class="col-1 medium">ITEM 1</div>
  <div class="col-1 small">ITEM 2</div>
  <div class="col-1 medium">ITEM 3</div>
  <div class="col-1 small">ITEM 4</div>
  <div class="col-1 medium">ITEM 5</div>
  <div class="col-1 small">ITEM 6</div>
  <div class="col-1 medium">ITEM 7</div>
  <div class="col-1 medium">ITEM 8</div>
  <div class="col-1 small">ITEM 9</div>
  <div class="col-1 large">ITEM 10</div>
  <div class="col-1 small">ITEM 11</div>
</div>

I would expect this to place my grid items, starting at the first rows of both columns, yielding a grid consisting of two columns and nine rows. However, right now the first item of the second column is placed in the same row as the last item of the first column, and then new rows are generated for the rest of the items, yielding a grid consisting of two columns and 17 rows.

What do I need to change to achieve the layout I want?

kukkuz
  • 41,512
  • 6
  • 59
  • 95
Tor
  • 93
  • 6
  • I'm not quite clear on what it is you are trying to do but I'd suggest `grid-auto-flow:column` *might* be a solution...but we need a demo. – Paulie_D Jun 19 '19 at 07:02
  • Yes, that was exactly what I needed! Thank you. My problem was that the items placed in the second column didn't start at the first row of the grid, but rather at the ninth row. ```grid-auto-flow:column``` fixed that. And thanks for the clarification about the reproducible example, I'll remember that next time! – Tor Jun 19 '19 at 07:10
  • you can see more about *grid-auto-flow* vs *implicit & explicit grids* in one of my answers [here](https://stackoverflow.com/questions/56062699) – kukkuz Jun 19 '19 at 09:02

1 Answers1

2

The correct answer was to add the grid-auto-flow: column rule to my grid element.

Per default a grid element has grid-auto-flow: row, which means that for items without an explicit row number, the grid element will generate new rows for them to be placed in.

The grid-auto-flow: column rule makes the grid element generate new columns instead, or in my case where a second column has already been generated by the grid-column: 2 rule of my .col-2 items it simply places the items in that column - which is exactly what I wanted.

Tor
  • 93
  • 6