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.

[AcidOP]

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.

You are a life saver man

[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

[1mehdifaraji]

For now the only thing that works is the dir attribute or direction style. I tried to render a list of items and had to use my own custom css class called rtl which basically applies direction: rtl !important; style to the element.

<div className="grid grid-cols-1 2xl:grid-cols-3 rtl">
          {items.map(() => (
            ...
          ))}
</div>

Direction style will reverse the order of the grid items. Now the items position will start from right to left.

[desmati]

This is a pretty old thread but someone might use this trick:

I use two nested elements having dir attribute to achive this:

<div dir="rtl" className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-6">
  <div dir="ltr">
    This will always be in the last column.
  </div>
</div>

Instead of:

<div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-6">
  <div className="col-start-1 md:col-start-3 lg:col-start-6">
    This will always be in the last column.
  </div>
</div>

[aqordeon]

this is what I'm looking for!

style="direction: rtl" work as expected like flex-row-reverse

my code:

<div class="grid grid-cols-3" style="direction: rtl">

[brunobely]

You may want to reverse the direction instead of hardcoding RTL, otherwise you lose support for RTL languages.

[ajpalok]

Useing order class can be a solution I guess. As long as you have to maintain each section's order manually which can be a headache too. Read the documentation.

https://tailwindcss.com/docs/order