JSFiddle - React, Tailwind, and code Playground

HTML

<html>
  <body>
    <main>
    <div class="spacer"></div>
      <div class="grid">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </div>
    </main>
  </body>
</html>

CSS

html, body {
  height: 100%;
  width: 100%;
}

main {
  background: #f00;
  height: 100%;
  width: 100%;
}

.spacer {
  background: orange;
  height: 10%;
}

.grid {
  display: grid;
  height: 80%;
  width: 90%;
  grid-template: 1fr 2fr 1fr / 1fr 2fr 1fr;
  margin: auto;
}

.grid div {
  background: #00f;
  border: thick solid black;
}