Make grid container fill columns instead of rows

Question

I want my grid to fill vertically like this:

1 4 7
2 5 8
3 6 9
... arbitrary number of additional rows.

Instead, it will fill horizontally like this:

1 2 3
4 5 6
7 8 9

I want to specify the number of columns in the grid, not the number of rows.

This is what my div looks like using inline CSS styling:

<code><div style="display:grid; grid-template-columns:1fr 1fr 1fr;">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
</div></code>

It's important that the grid is 3 columns wide, but I want the items to fill in columns, not rows. Is this possible in CSS grid? I've read through this https://css-tricks.com/snippets/css/complete-guide-grid/ but don't see anything about order.

CSS Flexbox has flex-direction, doesn’t CSS Grid have a similar property?

Answer 1

For a vertically flowing grid that creates new columns as needed and has no defined rows, consider using CSS Multi-Column Layout (Example). CSS Grid Layout (at least the current implementation - Level 1) cannot perform this operation task. The question is this:

In CSS grid layout, the grid-auto-flow and grid-template-rows / grid-template-columns properties.

More specifically, grid items can be oriented horizontally if both grid-auto-flow: row (the default setting) and grid-template-columns are defined Flows nicely, automatically creating new rows as needed. This concept is illustrated in the code in the question.

#container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-flow: row;
}

<div id="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
</div>

However, after switching to grid-template-rows, the grid items are stacked in a single column.

#container {
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  grid-auto-flow: row;
}

<div id="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
</div>

Using grid-auto-flow: row and grid-template-rows will not automatically create columns. grid-template-columns must be defined (thus, inversely related to grid-auto-flow).

#container {
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-flow: row;
}

<div id="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
</div>

The opposite case also has the same behavior.

With grid-auto-flow:column and grid-template-rows defined, grid items can flow nicely in the vertical direction and be automatically created as needed new column.

#container {
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  grid-auto-flow: column;
}

<div id="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
</div>

However, after switching to grid-template-columns, the grid items are stacked in a row. (This is the question most people ask, including in this question.)

#container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-flow: column;
}

<div id="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
</div>

Rows will not be created automatically. This requires defining grid-template-rows. (This is the most commonly offered solution, but is usually rejected because the layout has a variable number of rows.)

#container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-auto-flow: column;
}

<div id="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
</div>

Therefore, please consider adopting the multi-column layout solution, as mentioned above.

Specification reference: 7.7. Automatic placement: grid-auto-flow Properties