grid.css

/*HTML
<div class="container">
  <header>HEADER</header>
    <aside>MENU</aside>
    <main>CONTENT</main>
  <footer>FOOTER</footer>
</div>
*/
.container {
  display: grid; 
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 50px 350px 50px;
}
header {
  grid-column: span 12;
}
aside {
  grid-column: span 2;
}
main {
  grid-column: span 10;
}
footer {
  grid-column: span 12;
}
/* adaptability of the template for smartphones and tablets */
@media screen and (max-width: 768px) {
  aside {
    grid-column: span 6;
  }
  main {
    grid-column: span 6;
  }
}
@media screen and (max-width: 480px) {
  aside {
    grid-column: span 12;
  }
  main {
    grid-column: span 12;
  }
}

/* Properties that specify the size and number of columns or rows of the grid layout, respectively. */
.container {
  display: grid;
  /* 3 columns will be created */
  grid-template-columns: 40px auto 40%;
  /* 3 rows will be created */
  grid-template-rows: 250px 5vw 15rem;
}
/* You can explicitly name gridlines using square brackets: */
.container {
  display: grid;
  grid-template-columns: [start-line] 140px [line2] 250px [line3] 40px [end-line];
  grid-template-rows: [row1-start] 25rem [row1-end] 10vh [last-row];
}

/* 3 columns of 250 pixels will be created: */
.container {
  display: grid;
  grid-template-columns: repeat(3, 250px);
}
/* free space will be divided between 2 columns */
.container {
  display: grid;
  grid-template-columns: 1fr 200px 1fr;
}

/* grid template for arranging items inside a grid container */
.container {
  display: grid;
  grid-template-columns: 200px 1fr 1fr 1fr;
  grid-template-rows: repeat(4, 150px);
  grid-template-areas:
    "header header header header"
    "menu content content content"
    "menu content . content"
    "footer footer footer footer";
}
.item1 {
  grid-area: header;
  background-color: purple;
}
.item2 {
  grid-area: menu;
  background-color: yellow;
}

.item3 {
  grid-area: content;
  background-color: pink;
}
.item4 {
  grid-area: footer;
  background-color: gray;
}

// Grid item properties
.container {
  display: grid;
  grid-template-columns: [one] 1fr [two] 1fr [three] 1fr [four] 1fr [five] 1fr [six];
  grid-template-rows: [row1-start] 1fr [row1-end] 1fr 1fr;
}

.item1 {
  grid-column-start: 2;
  grid-column-end: five;
  grid-row-start: row1-start;
  grid-row-end: 3;
}


.item2 {
  grid-column: 1 / 3; /* or: 1 / span 2; */
  grid-row: 1 / 2; /* or: 1 / span 1; */
}

 /* row-start / column-start / row-end / column-end */
.item3 {
  grid-area: 4 / 2 / 5 / 4;

}