CODEWITHSUNDEEP
csscss-grid
IOIIOOIO
IOIIOOIO

Reputation: 4209

Prefer implicit rows instead of columns when using "grid-auto-flow: column"

I don't suppose there is a solution for this, perhaps it's something I should post as a feature request with the browser makers?

My problem is I want my elements to flow in a column direction:

[1][3]
[2][4]

So I write the CSS:

.selector {
  display: grid;
  grid-template-columns: 1fr 1fr:
  grid-template-rows: auto auto;
  grid-auto-flow: column;
}

Now, if there are more elements I want it to automatically generate more rows, like this:

[1][4]
[2][5]
[3][6]

But instead, the Grid generates more columns, like this:

[1][3][5]
[2][4][6]

It would be helpful if I could say something like:

grid-auto-columns: none

Which would tell grid "don't generate more columns than I have explicitly told you to", and the only alternative it would have would be to generate more rows instead.

Upvotes: 3

Views: 494

Answers (2)

user31782
user31782

Reputation: 7589

Quick solution: Use css Multi Column Layout rather than using with column-count: 2; on the container and display: inline-block on the cards(to avoid breaking across columns.). See MDN's example for demo

It achieves

[1][4]
[2][5]
[3][6]

Long Answer:

You should note that grid-auto-columns represents the size of implicit grid columns. So grid-auto-columns: none would rather make sense as the new divs getting hidden into 0px wide implicit columns -- which doesn't happen either because none is not a valid value.

Now to the original question what can be achieved using grid is the following:

[1][2]
[3][4]
[5][6]
[7][8]
[9][10]
.
.
.

Demo: https://jsfiddle.net/p3sy8une/

Achieved using

grid-template-columns: 100px 100px;
grid-template-rows:  repeat(auto-fill, 120px);

Your exact request cannot be achieved even using flexbox because there's no way for the grid to know when to stop creating rows for a specific column and then start adding items in the next column. Both in the following are possible:

[1][5]        [1][6]
[2][6]        [2]
[3]           [3]
[4]           [4]
              [5]

w3c would have to put a second algorithmic step to put floor(half) or floor(half) + 1 items in the first column and if there is a three column layout, then 1/3 in each column and 1/3 +- 1 in the last column.

Hope this helps, ciao.

Upvotes: 1

Infa
Infa

Reputation: 121

Maybe you can use:

"grid-auto-flow: columns"

https://gridbyexample.com/examples/example18/

Always in father element.

Upvotes: 1

Related Questions