JSFiddle - React, Tailwind, and code Playground

by Jussia

HTML

<div>
  <table class="flex">
  <tr class="item">
    <td>a 1</td>
  </tr>
  <tr class="item">
    <td>a 2</td>
  </tr>
  <tr class="item">
    <td>a 3</td>
  </tr>
  <tr class="item">
    <td>a 4</td>
  </tr>
  <tr class="item">
    <td>a 5</td>
  </tr>
  <tr class="item">
    <td>a 6</td>
  </tr>
  <tr class="item">
    <td>a 7</td>
  </tr>
  <tr class="item">
    <td>a 8</td>
  </tr>
</table>
</div>

CSS

th, td {
  border: 1px solid black;
}


.flex{
	display: table-row;
	flex-wrap: wrap;
	
	max-width: 700px; /* макс ширина */
	margin: 0 auto; /* выровняем по центру */
}

.item{
	flex:1 1; /* отнимем margin и скажем растягиваться */
	margin:5px;
	box-sizing:border-box; /* чтобы внутренний отступ не влиял когда там будет текст... */
	min-width:16%; /* мин. ширина блока, чтобы переносились на другой ряд */
	
	padding:50px 20px; 
  font-size:400%;
  text-align:center; 
  background:#b5ced8; /* для красоты */
}