JSFiddle - React, Tailwind, and code Playground

by Marco Abate

HTML

<div class="wrapper">
	<div class="flex-gap">
	  <div>1</div>
	  <div>2</div>
	  <div>3</div>
	  <div>4</div>
	  <div>5</div>
	  <div>6</div>
	</div>
</div>

CSS

.wrapper {
	max-width: 200px;
}

.flex-gap {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 12px;
  background-color: black;
  font-family: sans-serif;
  color: white;
  font-size: 2rem;
  width: 100%;
}

.flex-gap > div {
	background-color: green;
	padding: 14px;
	flex: 1 0 23%;
	text-align: center;
}