/* CSS RESET --> in 'all.css' is een kleine CSS reset opgenomen die je naar eigen voorkeur kunt aanvullen of uitkleden */

/* BLOKJES --> Elk blokje (article) heeft een ID, die je kunt gebruiken als "namespace" om CSS alleen voor dat blokje te laten gelden */


/***********/
/* GRID */
/***********/

/****************************/
/* ID = alleen-display-grid */
/****************************/
#alleen-display-grid {
	display:grid;
}

#alleen-display-grid div:nth-of-type(1){
	background:crimson;
}
#alleen-display-grid div:nth-of-type(2){
	background:dodgerblue;
}
#alleen-display-grid div:nth-of-type(3){
	background:yellowgreen;
}


/******************************/
/* ID = grid-template-columns */
/******************************/
#grid-template-columns {
	display:grid;
	grid-template-columns:1fr 1fr 1fr;
}

#grid-template-columns div:nth-of-type(odd){
	background:crimson;
}
#grid-template-columns div:nth-of-type(even){
	background:dodgerblue;
}


/*****************/
/* ID = grid-gap */
/*****************/
#grid-gap {
	display:grid;
	grid-template-columns:1fr 1fr 1fr;
	grid-column-gap:.5em;
	grid-row-gap:1em;
}

#grid-gap div:nth-of-type(odd){
	background-color:crimson;
}
#grid-gap div:nth-of-type(even){
	background-color:dodgerblue;
}


/*******************/
/* ID = grid-lines */
/*******************/
#grid-lines {
	display:grid;
	grid-template-columns:1fr 1fr 1fr;
	grid-gap:.5em;
}

#grid-lines div:nth-of-type(1) {
  	grid-column: 1 / 3;
  	grid-row: 1;
	background-color:crimson;
}
#grid-lines div:nth-of-type(2) {
  	grid-column: 3;
  	grid-row: 1;
	background-color:dodgerblue;
}
#grid-lines div:nth-of-type(3) {
  	grid-column: 1;
  	grid-row: 2 / 4;
	background-color:yellowgreen;
}
#grid-lines div:nth-of-type(4) {
  	grid-column: 2 / 4;
  	grid-row: 2;
	background-color:gold;
}
#grid-lines div:nth-of-type(5) {
  	grid-column: 2 / 4;
  	grid-row: 3;
	background-color:crimson;
}


/***********************/
/* ID = template-areas */
/***********************/
#template-areas {
	display:grid;
	grid-template-columns:repeat(3, 1fr);
	grid-template-rows:repeat(3, 1fr);
 	grid-template-areas:
    	"a a b"
    	"c d d"
    	"c e e";
	grid-gap:.5em;
}
#template-areas div:nth-of-type(1){
	background-color:crimson;
	grid-area:a;
}
#template-areas div:nth-of-type(2){
	background-color:dodgerblue;
	grid-area:b;
}
#template-areas div:nth-of-type(3){
	background:yellowgreen;
	grid-area:c;
}
#template-areas div:nth-of-type(4){
	background-color:gold;
	grid-area:d;
}
#template-areas div:nth-of-type(5){
	background-color:crimson;
	grid-area:e;
}


/********************/
/* ID = met-een-gat */
/********************/
#met-een-gat {
	display:grid;
	grid-template-columns:repeat(3, 1fr);
	grid-template-rows:repeat(3, 1fr);
 	grid-template-areas:
    	"a a b"
    	"d . b"
    	"d c c";
	grid-gap:.5em;
}
#met-een-gat div:nth-of-type(1){
	background-color:crimson;
	grid-area:a;
}
#met-een-gat div:nth-of-type(2){
	background-color:dodgerblue;
	grid-area:b;
}
#met-een-gat div:nth-of-type(3){
	background-color:gold;
	grid-area:c;
}
#met-een-gat div:nth-of-type(4){
	background-color:yellowgreen;
	grid-area:d;
}


/********************/
/* ID = met-overlap */
/********************/
#met-overlap {
	padding:0;
	display:grid;
	grid-template-columns:repeat(5, 1fr);
	grid-template-rows:repeat(5, 1fr);
	
}

#met-overlap div {
	mix-blend-mode:darken;
}
#met-overlap div:nth-of-type(1){
	background-color:DodgerBlue;
	grid-column: 2 / 5;
  	grid-row: 3;
}
#met-overlap div:nth-of-type(2){
	background-color:Gold;
	grid-column: 3;
  	grid-row: 2  / 5;
}


/**********************/
/* ID = kolom-breedte */
/**********************/
#kolom-breedte {
	display:grid;
	grid-template-columns:1fr 2fr 3fr;
	grid-gap:.5em;
}

#kolom-breedte div:nth-of-type(1){
	background-color:crimson;
}
#kolom-breedte div:nth-of-type(2){
	background-color:dodgerblue;
}
#kolom-breedte div:nth-of-type(3){
	background-color:yellowgreen;
}