CodePen Embed - flex-gap

<ul class="gap-sample1">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
</ul>

/* ul li reset,decoration */
*{
  margin:0;
  padding:0;
}
ul li{
  list-style:none;
}
ul{
  width:250px;
  margin:0 auto;
}
/* gap-sample1 */
.gap-sample1{
  display:flex;
  flex-wrap:wrap;
  justify-content: center;
  gap:20px;
  background:#d2eafc;
}
.gap-sample1 li{
  padding:20px;
  background:#ccc;
  border-radius:4px;
}

This Pen is owned by emi. on CodePen.

See more by @works_emi on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.