We’ll discuss the display values pertinent to CSS Grid Layout – grid, inline-grid, and subgrid. Then, let’s jump in at the deep end by putting together a simple grid layout in a flash.

 

  
       
       
     
  
      
       Header
      
  
      
       Aside 1
      
  
      
       Section
      
  
      
       Aside 2
      
  
      
       Footer
      
      
     

 

.container {
     display: grid;  grid-gap: 5px;  grid-template-areas:    "header"    "section"    "aside-1"    "aside-2"    "footer";}@media (min-width: 700px) {
     .container {    grid-template-areas:      "header header header"      "aside-1 section aside-2"      "footer footer footer";  }}/* All Grid Items */.container > * {
     background-color: mediumseagreen;  font-size: 80px;}header {
     grid-area: header;}aside:nth-of-type(1) {
     grid-area: aside-1;}section {
     grid-area: section;}aside:nth-of-type(2) {
     grid-area: aside-2;}footer {
     grid-area: footer;}