Skip to content

Comment on Show HN: Layoutit – An interactive CSS Grid generatorparent

Comments

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.

AboutSource Built by g1lg1l

Hackerly is an independent reader for Hacker News, built on the public HN API. Not affiliated with Y Combinator.