JSFiddle - React, Tailwind, and code Playground

by mkirkland616

HTML

<div class="wrapper">
  <div class="box a">A</div>
  <div class="box b">B</div>
  <div class="box c">C</div>
  <div class="inner-wrapper box">
    <div class="box e">E</div>
    <div class="box f">F</div>
    <div class="box g">G</div>
  </div>
</div>

CSS

body {
  margin: 4px;
}

.wrapper {
    display: grid;
    grid-gap: 1px;
    grid-template-columns: repeat(4, [col] 150px);
    grid-template-rows: repeat(2, [row] auto);
    background-color: #fff;
    color: #444;
}

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

.box .box {
    background-color: #ccc;
    color: #444;
}

.a {
    grid-column: col / span 2;
    grid-row: row;
}

.b {
    grid-column: col 3 / span 2;
    grid-row: row;
}

.c {
    grid-column: col / span 2;
    grid-row: row 2;
}

.inner-wrapper{
    grid-column: col 3 / span 2;
    grid-row: row 2;
    display: grid;
    grid-gap: 1px;
    grid-template-columns: 1fr 1fr;
}

.e {
    grid-column: 1 / 3;
    grid-row: 1;
}

.f {
    grid-column: 1;
    grid-row: 2;
}

.g {
    grid-column: 2;
    grid-row: 2;
}