JSFiddle - React, Tailwind, and code Playground

by Mike Jacobson

HTML

<div class="wrapper1">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>
<div class="wrapper">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

CSS

.wrapper > div:nth-child(1) {
  background-color: red;
  grid-column-start: 1;
  grid-column-end: 4;
}
.wrapper > div:nth-child(2) {
  background-color: blue;
}
.wrapper > div:nth-child(3) {
  background-color: green;
  grid-row-start: 2;
  grid-row-end: 4;
}
.wrapper > div:nth-child(4) {
  background-color: yellow;
  grid-column-start: 2;
  grid-column-end: 4;
}
.wrapper > div:nth-child(5) {
  background-color: #445566;
}
.wrapper > div:nth-child(6) {
  background-color: #998877;
}

.wrapper {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
}

.wrapper1 {
  margin-bottom: 20px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 60px;
}

.wrapper1 > div:nth-child(1) {
  background-color: red;
}
.wrapper1 > div:nth-child(2) {
  background-color: blue;
}
.wrapper1 > div:nth-child(3) {
  background-color: green;
}
.wrapper1 > div:nth-child(4) {
  background-color: yellow;
}
.wrapper1 > div:nth-child(5) {
  background-color: orange;
}
.wrapper1 > div:nth-child(6) {
  background-color: teal;
}