/*Beginning grid CSS*/
  ,, 
.grid {
display: grid;
grid-template-columns:auto auto auto;  /*repeat(7, 1fr);7 columns*/
grid-template-rows:100px 100px 100px /*100px*/;
 }
  
 
                                   
.section1 {
grid-column:1;
grid-row:1;
background-color:white;
color:black;
text-align:center;
Font-size:20px;
}  



.section2 {
grid-column:1;
grid-row:2;
background-color:chocolate;
color:white:text-align:center
Font-size:20px;
}

.section3 {
grid-column:1;
grid-row:3;
background-color:deeppink;
color:white;
text-align:center;
Font-size:20px;
}
        
.section4 {
grid-column:2;
grid-row:1;
background-color:darksalmon;
color:white;
text-align:center;
Font-size:20px;
}
.section5 {
grid-column:2;
grid-row:2;
background-color:cyan;
 color:white;
 text-align:center;
Font-size:20px;
}                 


.section6 {
grid-column:2;
 grid-row:3;
background-color:cadetblue;
color:white;
text-align:center;
 Font-size:20px;                    
}

.section7 {
grid-column:3;
 grid-row:1;
background-color:black;
 color:white;
text-align:center;
Font-size:20px;
}                          


.section8 {
grid-column:3;
 grid-row:2;
 background-color:white;
color:white;
text-align:center;
Font-size:20px;
}


.section8 {
grid-column:3;
grid-row:3;
background-color:red;
color:white;
text-align:center;
Font-size:20px;
    


body, html {
  height: 100%;
}



  .body {
    background-color: lightblue;
  }
  
  
  
  h1 {
    background-color: green;
  }
  
  
  div {
    background-color: lightblue;
  }