/* Excercise 1 */
.container1
{
    display:grid;
    grid-template-rows: 50px 50px;
    grid-template-columns: 50px 50px;
    gap:100px 120px ;
}

.container1 > div 
{
    border:1px solid blue;
}



/*Excercise 2 */
.container2 {
    display: grid;
    grid-template-rows: 100px 100px 100px;
    grid-template-columns: 100px 100px 100px;
  }
  
  .item {
    background-color: orange;
    border: 1px solid black;
    text-align: center;
  }
  
  .first-row {
  background-color: pink;
  }
  
  .last-column {
  background-color: lightblue;
  }


  /* Excercise 3 */

  .container3 {
    display: inline-grid;
    grid-template: 40px 40px 40px 40px 40px / 40px 40px 40px 40px 40px;
    background-color: lightblue; 
  }
  
  .room1 {
    border: 1px solid;
    font-size: 50%;
    text-align: center;
  }
  
  #living-room1 {
    
    grid-area: 1 / 1 / 3 / 6 ;

  }
  
  #kitchen1 {
    grid-column: 4 / 6;
    grid-row: 3 / 6;
  }
  
  #bedroom1 {
    grid-column:1 / 3;
    grid-row-start: 3;
    grid-row-end: 5;
  }
  
  #bathroom1 {
    grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start: 3;
    grid-row-end: 6;
  }
  
  #closet1 {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 5;
    grid-row-end: 6;
  }

  /*Excercise 4 */
  
  .container {
  display: inline-grid;
  grid-template: 40px 40px 40px 40px 40px / 40px 40px 40px 40px 40px;
  background-color: lightblue; 
  grid-template-areas:
    "living-room living-room living-room living-room living-room"
    "living-room living-room living-room living-room living-room"
    "bedroom bedroom bathroom kitchen kitchen"
    "bedroom bedroom bathroom kitchen kitchen"
    "closet closet . . ."    
}

.room {
  border: 1px solid;
  font-size: 50%;
  text-align: center;
}

#living-room {
   grid-area:  living-room;
}

#kitchen {
  grid-area: kitchen;
}

#bedroom {
  grid-area: bedroom;
}

#bathroom {
  grid-area: bathroom;
}

#closet {
  grid-area: closet;
}