CODEWITHSUNDEEP
csscss-grid
Tor
Tor

Reputation: 93

How to auto place grid items starting from the top row of each column?

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?

Upvotes: 2

Views: 3003

Answers (1)

Tor
Tor

Reputation: 93

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.

Upvotes: 2

Related Questions