Hacker News Reader

Comment by paulddraper | Hacker News Reader

I might be a grid-noob, but let's take a super-duper common situation:

I want to left align one element and right align another, keeping them in the same row.

Flex makes this very easy:

    <div style="display:flex; justify-content:space-between">
      <div>Left</div>
      <div>Right</div>
    </div>

Does grid also make this easy?

View on HN

As another grid-noob, I thought I'd try to tackle this one. It seems to require only one additional style to define the grid:

    <div style="display:grid; grid:auto/repeat(auto-fit,minmax(min-content,0)); justify-content:space-between;">
      <div>Left</div>
      <div>Right</div>
    </div>

There's one gotcha: repeat() doesn't seem to accept min-content as its own value, so I had to use minmax(min-content,0).

It's strictly less effort to do this with flex, but I expect that as soon as you have more than two single-word divs as children, Grid becomes more useful.

Reply on news.ycombinator.com