/* **************************
	Holy Grail Layout with CSS Grid
************************** */

.banner { -ms-grid-row: 1; -ms-grid-column: 1; -ms-grid-column-span: 3; grid-area: header; }
.plaatshouder_bl { -ms-grid-row: 2; -ms-grid-row-span: 2; -ms-grid-column: 1; grid-area: spacer1;}
.navigatiebalk { -ms-grid-row: 2; -ms-grid-column: 2; grid-area: navigation; }
.plaatshouder_br { -ms-grid-row: 2; -ms-grid-row-span: 2; -ms-grid-column: 3; grid-area: spacer2; }
.pad { -ms-grid-row: 3; -ms-grid-column: 2; grid-area: breadcrumb; }
.links { -ms-grid-row: 4; -ms-grid-column: 1; grid-area: left; }
.midden { -ms-grid-row: 4; -ms-grid-column: 2; grid-area: main; }
.rechts { -ms-grid-row: 4; -ms-grid-column: 3; grid-area: right; }
.plaatshouder_ol { -ms-grid-row: 5; -ms-grid-column: 1; grid-area: spacer3;}
.voet { -ms-grid-row: 5; -ms-grid-column: 2; grid-area: footer; } 
.plaatshouder_or { -ms-grid-row: 5; -ms-grid-column: 3; grid-area: spacer4;}

.grid-container {
  display: grid;
  display: -ms-grid;
  -ms-grid-rows: auto auto auto auto auto;
      grid-template-areas:
    'header header header'
    'spacer1 navigation spacer2'
    'spacer1 breadcrumb spacer2'
    'left main right'
    'spacer3 footer spacer4';
  grid-template-columns: 200px 1fr 200px;
  -ms-grid-columns: 200px 1fr 200px;
  grid-gap: 0px;
  background-color : #f7f7f7;
  width : 100%;
  margin-left : 0;
  margin-right : 0;
  padding : 0;
  line-height : 1.5em;
}




@media screen and (max-width: 600px) {

  .banner { -ms-grid-row: 1; -ms-grid-column: 1; grid-area: header; }
  .navigatiebalk { -ms-grid-row: 2; -ms-grid-column: 1; grid-area: navigation; }
  .pad { -ms-grid-row: 3; -ms-grid-column: 1; grid-area: breadcrumb; }
  .links { -ms-grid-row: 4; -ms-grid-column: 1; grid-area: left; }
  .midden { -ms-grid-row: 5; -ms-grid-column: 1; grid-area: main; }
  .rechts { -ms-grid-row: 6; -ms-grid-column: 1; grid-area: right; }
  .voet { -ms-grid-row: 7; -ms-grid-column: 1; grid-area: footer; } 

  .grid-container {
    display: grid;
    display: -ms-grid;
    -ms-grid-rows: auto;
    grid-template-areas:
      'header'
      'navigation'
      'breadcrumb'
      'left'
      'main'
      'right'
      'footer';
    grid-template-columns: 100%;
    -ms-grid-columns: 100%;
    grid-template-rows: 20px
                        20px
                        20px
                        20px 
                        1fr
                        20px 
                        20px;
    -ms-grid-rows: 20px
                  20px
                  20px
                  20px 
                   1fr
                  20px 
                  20px;



    grid-gap: 0px;
    background-color : #f7f7f7;
    width : 100%;
    margin-left : 0;
    margin-right : 0;
    padding : 0;
    line-height : 1.5em;
  }
}