JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="firstLevel">
  <div class="box red">Sports</div>
  <div class="box a">NBA</div>
  <div class="box b">NFL</div>
  <div class="box c">NHL</div>
  <div class="box d">IPL</div>
  <div class="box e">MLB</div>
  <div class="box f">MLS</div>
</div>

CSS

body {
  margin: 10px;
}

.firstLevel {
  display: grid;
  grid-template-columns: 200px 200px 200px;
  grid-auto-rows: 200px;
  grid-gap: 1em;
  background-color: #fff;
  color: #444;
}

.firstLevel::before {
  content: "";
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  /* border: 1px dashed black;  << remove commenting for illustration */
}

.firstLevel::after {
  content: "";
  grid-column: 3 / 4;
  grid-row: 1 / 2;
  /* border: 1px dashed black;  << remove commenting for illustration */
}

.box {
  background-color: gray;
  color: #fff;
  padding: 20px;
  font-size: 150%;
}

.red {
  background-color: red;
}