W3C home > Mailing lists > Public > public-css-archive@w3.org > July 2019

Re: [csswg-drafts] more options beside of `column` and `row` for `flex-direction` and `flex-auto-flow` (#3622)

From: Stanislav Lashmanov via GitHub <sysbot+gh@w3.org>
Date: Fri, 12 Jul 2019 20:42:59 +0000
To: public-css-archive@w3.org
Message-ID: <issue_comment.created-511026891-1562964178-sysbot+gh@w3.org>
A simplest use-case is when your responsive layout differs from the placement of elements in DOM.

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

<style>
.columns
{
  display: grid;
  grid-template-columns: repeat(3, 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.

-- 
GitHub Notification of comment by CyberAP
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/3622#issuecomment-511026891 using your GitHub account
Received on Friday, 12 July 2019 20:43:01 UTC

This archive was generated by hypermail 2.4.0 : Tuesday, 5 July 2022 06:41:50 UTC