CSS Grid подходит для содержимого и переноса

Question

Я ищу правильный синтаксис сетки CSS, чтобы обернуть как можно больше дочерних элементов подряд, а затем обтянуть, когда места больше нет.

У меня есть пример, заданный здесь: https://codepen.io/velnias2015/pen/xeeJrZ

Разметка:

<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;

Сейчас моя проблема заключается в том, что содержимое не переносится.Каждый дочерний элемент может иметь различную ширину в зависимости от содержимого.Я просто хочу, чтобы в строке было как можно больше записей, даже 1, а затем завернуть.

Answer 1

Добавьте display: flex; и flex-wrap: wrap; в свой контейнерный класс. Кроме того, поскольку это приводит к уменьшению поля, добавьте margin: 2px; к вашему container span классу.