JSFiddle - React, Tailwind, and code Playground

by he yan

HTML

<div id="container">
  <div id="header">header</div>
  <div id="main">main</div>
  <div id="hot">hot</div>
  <div id="tag">tag</div>
  <div id="footer">footer</div>
</div>

CSS

#header {
  grid-area: header;
}
#main {
  grid-area: main;
}
#hot {
  grid-area: hot; 
}
#tag {
  grid-area: tag;
}
#footer {
  grid-area: footer;
}

#container {
  display: grid;
  grid-template-columns: 3fr 1fr;
  grid-gap: 10px;
  grid-auto-rows: 100px;
  grid-template-areas: 
    "header header"
    "main hot"
    "main tag"
    "footer footer";
}

#container > div {
  background-color: #8ca0ff;
  width: 100%;
  height: 100%;
  text-align: center;
}

@media (max-width: 500px) {
  #container {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 2px;
    grid-auto-rows: 50px;
    grid-template-areas: 
      "header"
      "hot"
      "main"
      "tag"
      "footer";
  }
}