Grid сетка (html,css)

Не получается понять в чем проблема нужна сетка грида где 3 строки, первая на всю ширину, вторые две на половину, третии по трети но выходит что отображает все криво в одном месте и только 1 третью

<main>
  <div class="large" >large</div>
  <div class="medium" >medium</div>
  <div class="medium" >medium</div>
  <div class="small" >small</div>
  <div class="small" >small</div>
  <div class="small" >small</div>
<main>

main{
  
  display: grid;
  grid-template-areas: 
    " . large ."
    "medium . medium"
    "small small small";
}

.large{
    height:100px;
    background-color: red !important;
    grid-area: large;
}
.medium{
    height:100px;
    background-color: yellow !important;
    grid-area: medium;

}
.small{
    height:100px;
    background-color: green !important;
    grid-area: small;

}