[css-grid-1] Add more directional values to grid-auto-flow

[perymimon]

please consider to normalize grid-auto-flow with all value of flex-direction meen add row-reverse and column-reverse

and consider also to add the following values or similar with the same meaning to the spec:

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;

---

grid-auto-flow-property
flex-direction

[perymimon]

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

[fantasai]

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.

[MatsPalmgren]

What is the use case for this?

[astearns]

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.

[fantasai]

@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.

[CyberAP]

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.

[perymimon]

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 ?