Layout using Named Grid Lines
Line naming is incredibly useful.

Naming line wen definig a grid

One

Two

Three

Four

[main-star]

[content-start]

[content-end]

[main-end]

[main-start]

[content-start]

[content-end]

[main-end]

#container-1 {
    display: grid;  
    grid-template-columns: [main-start] 1fr [content-start] 1fr [content-end] 1fr [main-end];
    grid-template-rows: [main-start] 100px [content-start] 100px [content-end] 100px [main-end];
}
#boxOne   { grid-column-start:main-start;  grid-row-start:main-start;  grid-row-end:main-end; }     
#boxTwo   { grid-column-start:content-end; grid-row-start:main-start; grid-row-end:content-end; }     
#boxThree { grid-column-start:content-start; grid-row-start:main-start; }     
#boxFour  { grid-column-start:content-start; grid-column-end:main-end; grid-row-start:content-end; }     

Implicit grid areas from named lines

I am placed in an area named content.
I am placed in an area named
aside.

[main-start aside-start]

 [aside-end content-start]

      [content-end]

[main-end]

[main-start aside-start]

[content-start]

[content-end]

[aside-end main-end]

#wrapper {
  display: grid;  
  grid-template-columns: [main-start aside-start] 1fr [aside-end content-start] 1fr [content-end] 1fr [main-end];
  grid-template-rows: [main-start aside-start] 100px [content-start] 100px [content-end] 100px [aside-end main-end];
}
    
.thing { grid-area: content; }      
.aside { grid-area: aside; }     

Implicit Grid lines from named areas

Header
Sidebar
Main Content
Footer
Overlay

hd-start

sd-start

ft-start

 

main-start

sd-end

hd-end

main-end

ft-end

 

 

hd-start

hd-end

sd-start

main-start

ft-start

main-end

sd-end

 

 

ft-end

#wrapper {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  
  grid-template-rows: repeat(3,100px);
  grid-template-areas: "hd  hd   hd"             
                       "sd  main --"          
                       "ft  ft   ft";            
}
.overlay{                                 
  grid-column: main-start / hd-end;
  grid-row: hd-start / ft-end;     
}

Multiple lines with the same name with repeat()

I am placed from col-start line 1 to col-start 5
I am placed from col-start line 7 spanning 3 lines

How our items are placed against these lines.

I am placed from col-start line 1 to col-start 5
I am placed from col-start line 7 spanning 3 lines

[col-start]

[col-start]

[col-start]

[col-start]

[col-start]

[col-start]

[col-start]

[col-start]

[col-start]

[col-start]

[col-start]

[col-start]

#wrapper {
  display: grid;
  grid-template-columns: repeat(12, [col-start] 1fr);
}
.item1 { grid-column: col-start / col-start 5; }    
.item2 { grid-column: col-start 7 / span 3; }    

Column named col1-start followed by column named col2-start,that is being repeated.

item1
  1fr
item2
  2fr
item3
item4

[col1-start]

[col2-start]

[col1-start 2]

   [col2-start 2]

[col1-start 3]

   [col2-start 3]

[col1-start 4]

   [col2-start 4]

#wrapper {
  display: grid;
  grid-template-columns: repeat(4, [col1-start] 1fr [col2-start] 2fr);
}
.item1 { grid-column: col1-start ; }    
.item2 { grid-column: col2-start ;  }    
.item3 { grid-column: col1-start 2;      
.item4 { grid-column: col2-start 2 / col2-start 4 ; }    

The tracks as giving a line multiple names, which each have a start and end line.

item1
col-start 2 / col-end 6
item2
col-start 1 / col-end
item3
col-start 3 / span 3 col-end

[col-start]

[col-end 1 / col-start 2]

[col-end 2 / col-start 3]

[col-end 3 / col-start 4]

[col-end 4 / col-start 5]

[col-end 5 / col-start 6]

[col-end 6]

#wrapper {
  display: grid;
  grid-template-columns: repeat(4, [col1-start] 1fr [col2-start] 2fr);
}
.item1 { grid-column: col1-start ; }    
.item2 { grid-column: col2-start ;  }    
.item3 { grid-column: col1-start 2;      

We can then use that framework to layout our page. For example, to create a three column layout with a header and footer, I might
   have the following markup.

I am the header
I am the main article
I am the footer

[col-start]

[col-start 4]

[col-start 10]

#wrapper {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(12, [col-start] 1fr);
}
header,footer  {
  grid-column: col-start / span 12;
  background-color: rgba(255,153,153,.3);
}
aside.side1 {
  grid-column: col-start / span 3;
  grid-row: 2;
  background-color: rgba(153,102,204,.2);
}
article {
  grid-column: col-start 4 / span 6; 
  grid-row: 2;
  background-color: rgba(255,53,153,.2);
}
aside.side2 {
  grid-column: col-start 10 / span 3;
  grid-row: 2;
  background-color: rgba(153,102,204,.2);
}