JSFiddle - React, Tailwind, and code Playground

by Artem

HTML

<div class="grid">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
</div>

CSS

.grid {
  display: grid;
  width: 500px;
  height: 150px;
  
  grid-template-columns: 2fr 1fr;
  grid-template-rows: [header-top] auto [header-bottom] 50px [main-top] 50px [main-top-2] 1fr [main-bottom];
  grid-template-areas: "banner    banner"
                       "container menu";
  }
.grid > :nth-child(1) {
    background-color: #FCC;
  
    grid-column-start: banner-start;
    grid-column-end: banner-end;
  
    grid-row-start: header-top;
    grid-row-end: header-bottom;
}

.grid > :nth-child(2) {
    background-color: #CFC;
  
    grid-row-start: main-top;
    grid-row-end: main-top-2;
}

.grid > :nth-child(3) {
    background-color: #CCF;
    
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: main-top-2;
    grid-row-end: main-bottom;
}