JSFiddle - React, Tailwind, and code Playground

by ian_smithz

HTML

<div class="square-container">
  <div class="square large">
    <div class="content">xxx</div>
  </div>
  <div class="square">
    <div class="content"></div>
  </div>
  <div class="square">
    <div class="content">xxx</div>
  </div>
   <div class="square">
    <div class="content">xxx</div>
  </div>
   <div class="square">
    <div class="content">xxx</div>
  </div>
   <div class="square">
    <div class="content">xxx</div>
  </div>
   <div class="square">
    <div class="content">xxx</div>
  </div>
</div>

CSS

.square-container{
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(2, auto);
    grid-gap: 1vw;
    background-color: gray;
}

.square {
  background-color: lightgreen;
  position: relative;
}

.square.large {
  grid-column: span 2;
  grid-row: span 2;
}

.square-container > div::before {
  content: "";
  padding-bottom: 100%;
  display: block;
}



body { margin: 0; }