longest, shortest longest-reverse and shortest-reverse should be more slik

Hi @perymimon, I think it's not really possible to do longest/shortest because often the size of the grid container is dependent on how content is laid out inside it. But row-reverse/column-reverse should be doable and certainly makes sense to add.

What is the use case for this?

I'd like to see a bit more here before this goes on the meeting agenda. I definitely agree with Mats that we need use cases to guide the discussion.

@astearns This isn't the first time I've seen this request, and the workarounds being used were changing the grid's direction to get the reverse behavior. I'd rather avoid people doing that.

A simplest use-case is when your responsive layout differs from the placement of elements in DOM.

<div class="columns">
  <div class="item">FOO</div>
  <div class="item">BAR</div>
</div>

<style>
.columns
{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

@media (max-width: 600px)
{
  .columns
  {
    grid-template-columns: auto;
    grid-auto-flow: row-reverse;
    /* BAR renders before FOO */
  }
}
</style>

And I actually need that a lot. Writing .columns > :nth-child(1) is cumbersome and doesn't really go well with a component-based approach.

Trivial use case for reverse is content that writing from right to left. like Hebrew and Arabic

Another one is when I build a game and want players cards flow from right to left

Use cases :
longest-dimension : fill the page with cards.
when a user open the page with width screen like desktop I want to render them horizontally . and when it open it on narrow but tall, like phone, I want to render them vertically . same Idea as if a user split his screen to two panel and now I have more room vertically.

btw, what are the use cases for support all

longest-dimension : for auto flow to column or row the longest one;
shortest-dimension: for auto flow to column or row the shortest one;
longest-dimension-reverse : for auto flow to column or row the longest one but in reverse order;
shortest-dimension-reverse: for auto flow to column or row the shortest one but in reverse order;

in flex ?

Trivial use case for reverse is content that writing from right to left. like Hebrew and Arabic

This is automatically handled. Reverse direction in Hebrew would go from left to right, because by default Grid and Flex will use right-to-left.

The proposal here is to add row-reverse, column-reverse, and maybe also wrap-reverse, to grid-auto-flow--consistent with flex-flow.

The CSS Working Group just discussed [css-grid-1] Add more directional values to grid-auto-flow, and agreed to the following:

• RESOLVED: Add row-reverse, column-reverse, and wrap-reverse

I've edited the row-reverse, column-reverse, and wrap-reverse values into the css-grid-3 editor's draft.