does grid css has flex-direction: column/row reverse option
does grid css has flex-direction: column/row reverse option
29 Replies
no
you can emulate it by giving the elements a grid area and then you position the grid areas in reverse order
MDN Web Docs
grid-auto-flow - CSS: Cascading Style Sheets | MDN
The grid-auto-flow CSS property controls how the auto-placement algorithm works, specifying exactly how auto-placed items get flowed into the grid.
that lets you tell the grid which axis should be used to "stack" elements and if it should try to fill the gaps with smaller items or not
but doesnt do the reverse
hense "kinda"
yeah
it's so close
a major drawback of grid
how so?
its such a commonly required property
not for grid
just because everything fits in the square hole doesn't mean it's a square
but would it be any effort to introduce this feature in grid
they could just do it
or just use flex
it would definitely be much more used than some property and attributes
what exactly are you trying to do?
yeah the thing im doing is suited for flex much more
the grid spec is way more complex than it looks so I would not bet on that. And flow order in grid is basically never useful
in the time ive been here, you are the first person asking to reverse a grid
i have a container that contains two boxes, and i want the order to be reversed once it reaches a certain device size
i know flex is more suited for this
but i was thinking about other situations
maybe i should just use flex
if you know the number of items is fixed you should just use grid-areas
tho, having elements in a different order in the DOM and on screen might lead to accessibility issues (tabindex for example will not make sense visually). Depending on the case it might be fine, but you should keep that in mind.
ah, you can just do what i said
or manually set the start/end column on both
either of these will work
also, make sure that you have the sizes reversed too
if they are different
or just use flex
👍
The CSSWG resolved to add
row-reverse, column-reverse, and wrap-reverse in Nov 2023. So it's in the browsers court now but no browser has done anything with it yet.
There's a chrome bug if you want it go give that a +1 https://issues.chromium.org/issues/40287554🤔 that is interesting
personally, i cant see a good use for it, as swapping the areas/rows/columns gives more control
it's a bit tedious, but less limiting, as you can do row and column reverse at the same time ... manually
it's usefull when you don't know the number of items you'll have or if you use an implicit grid
that is the only thing i came up with
but in those cases, i see flex being more useful
even if you have to grid with flex
it can... but that depends on the design
like if you have an infinite scroll grid that must be responsive (adding or removeing column as the screen width changes), using flex might not be ideal in this situation but you might want to fill the grid from right to left or from the bottom up (no idea why you would tho)
that's a good point
very very very niche
Grid areas is teh way 🥲
But yea be nice if the row/column-reverse actually worked proper in auto-flow