JSFiddle - React, Tailwind, and code Playground

by piiantom

HTML

<grid-container>
  <grid-item>1</grid-item>
  <grid-item>2</grid-item>
  <grid-item>3</grid-item>
</grid-container>

CSS

grid-container {
  display: grid;
  grid-template-columns: 15% 1fr 25%;
  grid-auto-rows: 50px; /* for demo */
  grid-gap: 10px;
  grid-template-areas: "column-1 column-2 column-3";
}

grid-item:nth-child(1) { grid-area: column-1; }
grid-item:nth-child(2) { grid-area: column-3; }
grid-item:nth-child(3) { grid-area: column-2; }

@media ( max-width: 500px ) {  
  grid-container { 
        grid-template-columns: 1fr 1fr; 
        grid-template-areas: " column-1 column-3 " 
                             " column-2 column-2 ";
   }
}

/* non-essential decorative styles */
grid-item {
  border: 1px solid gray;
  background-color: lightgreen;
  display: flex;
  align-items: center;
  justify-content: center;
}
grid-item:nth-child(2) {
  background-color: orange;
}