JSFiddle - React, Tailwind, and code Playground

by shs400

HTML

<div class="grid-container">
  <div class="item header">1</div>
  <div class="item main">2</div>
  <div class="item footer">3</div>
  <div class="item test">4</div>
</div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div class="grid-container">
  <div class="item header">1</div>
  <div class="item main">2</div>
  <div class="item footer">3</div>
  <div class="item test">4</div>
  <div class="item test">5</div>
  <div class="item test">6</div>
</div>

CSS

.grid-container {
  width: 300px;
  height: 200px;
  display: grid;
  grid-template-rows: 100px 100px;
  grid-template-columns: 150px 150px;
  grid-auto-rows: 100px;
  grid-auto-columns: 100px;
  border: 1px solid #000;
}

.grid-container > * { 
    background-color: mediumseagreen;
}

.item:nth-child(1) {
  grid-row: 3 / 4;
  grid-column: 3 / 4;
}

.item:nth-child(4) {
  grid-row: 3 / 4;
  grid-column: 2 / 3;
  background: yellow;
}