Is there an equivalent to flex-row-reverse for grids?

[stoem]

Hi there,
I'm using the grid class and grid-cols-2 and would like some control over the row order when the grid moves to single column on small screens (basically I need to reverse the row order on some rows). The equivalent of flex-row-reverse I guess.

Is this possible with grid or do I need to use flex?

Cheers

Stefan

[tehpsalmist]

I'm not sure if this will answer your specific situation, but I tend to construct my own grid templates using named grid areas like so:

.my-grid {
  @apply grid row-gap-2;
  grid-template:
    'picture article' 300px
    'ad      article' auto
  / 300px    1fr;
}

.picture {
  grid-area: picture;
}

.ad {
  grid-area: ad;
}

.article {
  grid-area: article;
}

.reversed-grid {
  @apply grid row-gap-2;
  grid-template:
    'article picture' 300px
    'article ad'      auto
  / 1fr      300px;
}

Like I said, might not be the answer to your exact situation, but it's at least one approach with grid, in the absence of a "reverse" option.

[stoem]

Thanks, definitely helpful but I think I will switch to flex and flex-row-reverse to solve this particular issue.

[luis-Applicationcare]

Hi, maybe a bit late, but you can try with Order https://tailwindcss.com/docs/order using the class order-last for example, will put the selected item as the last one on the grid.

[manuarora700]

Order works like a charm, thanks @luis-Applicationcare

[gregg-cbs]

As an fyi:
Order does not move the column sizes. If you have two columns: 500px auto and you do order to flip them, the first column will still be 500px. Where as some of us might want to reverse it so you get: auto 500px . This is not possible with order.

It seems it is also not possible with the direction: rtl property.

[olets]

You can do that with grid-column-start. Note that you'll need to add grid-row-start: auto to any cells that need to display out of order, otherwise you simply shift the entire grid.

https://play.tailwindcss.com/kWVynq6Scm

I also have a plain css codepen of this from before Tailwind supported it https://codepen.io/henry/pen/poJVZer

[Phreeshad]

Just add dir="rtl" to the tag, or direction: rtl to your css style source.

[bdlowery]

This is not a good solution at all. Never change the reading direction of something in CSS unless the actual language you are using will be read from right to left.

[Charleswilkins]

You can use direction property to reverse a grid x-axis order. Nested elements will be reversed too so you have to make sure to add additional styles to fix this behavior. SkyWard Alpine