Resposive flex grid

by Alexey Zakharov

HTML

<div class="space_between">
  <span>item1</span>
  <span>item2</span>
  <span>item3</span>
  <span>item4</span>
  <span>item5</span>
  <span>item6</span>
  <span>item7</span>
  <span>item8</span>
  <span>item9</span>
  <span>item10</span>
  <span>item11</span>
  <ins></ins>
  <ins></ins>
  <ins></ins>
  <ins></ins>
  <ins></ins>
  <ins></ins>
  <ins></ins>
  <ins></ins>
  <ins></ins>
</div>

<div class="space_around">
  <span>item1</span>
  <span>item2</span>
  <span>item3</span>
  <span>item4</span>
  <span>item5</span>
  <span>item6</span>
  <span>item7</span>
  <span>item8</span>
  <span>item9</span>
  <span>item10</span>
  <span>item11</span>
  <ins></ins>
  <ins></ins>
  <ins></ins>
  <ins></ins>
  <ins></ins>
  <ins></ins>
  <ins></ins>
  <ins></ins>
  <ins></ins>
</div>

CSS

div { display: flex; flex-wrap: wrap; padding: 20px; margin-bottom: 20px; }
span { border: 1px solid blue; width: 100%; max-width: 160px; box-sizing: border-box; text-align: center; }
ins { border-bottom: 1px solid red; width: 100%; max-width: 160px; box-sizing: border-box; margin-top: 5px; }

.space_between { justify-content: space-between; }
.space_around { justify-content: space-around; }