JSFiddle - React, Tailwind, and code Playground

by Neeraj Yadav

HTML

<div class="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>

  <div>4</div>
  <div>5</div>
  <div>6</div>

  <div>7</div>
  <div>8</div>
  <div>9</div>
</div>

CSS

.container {
  max-width: 500px;
  margin: 0 auto;
  display: grid;
  /* grid-template-columns: 25% 50% 25%;
  grid-template-columns: 1fr 2fr 1fr; */
  grid-template-columns: repeat(3, 1fr);
}

.container div {
  padding: 12px 0;
  background: crimson;
  text-align: center;
  color: #fff;
}

.container div:nth-child(even) {
  background: grey;
}