0

I'm looking for the correct CSS grid syntax to wrap as many child elements in a row and then wrap when no more room.

I have an example set here: https://codepen.io/velnias2015/pen/xeeJrZ

Markup:

<div class="container">
<span>Spain</span>
<span>France</span>
<span>Germany</span>
<span>Ireland</span>
<span>United Kingdom</span>
<span>Uruguay</span>
</div>

CSS

  display: grid;
  grid-auto-flow: column;
  grid-gap: 0.5rem;

Right now my problem is that the content is not wrapping. Every child element can have a different width based on content. I just want to have as many per row as it can fit, even just 1 and then wrap.

StevieB
  • 6,263
  • 38
  • 108
  • 193
  • 1
    check this: https://stackoverflow.com/a/50718701/8620333 – Temani Afif Apr 29 '19 at 21:46
  • checkout https://stackoverflow.com/questions/43129360/ and https://stackoverflow.com/questions/55809466/ (but maybe flexbox is more suited for this: https://stackoverflow.com/questions/55556049) – kukkuz Apr 30 '19 at 01:45

1 Answers1

1

Add display: flex; and flex-wrap: wrap; to your container class. Also, because this collapses the margin, add margin: 2px; to your container span class.

Christopher Bennett
  • 803
  • 1
  • 8
  • 20
  • Sorry, perhaps I misunderstood. Did you want the codepen example re-made using css grid? If so, go with Temani's link, or check this out too: https://stackoverflow.com/questions/43129360/css-grid-wrapping – Christopher Bennett Apr 30 '19 at 00:06