/* Grid Number Counter */
body {counter-reset:section;}
div.gridBox:before {content:'#'counter(section); counter-increment:section; font-size:10em; color:rgba(0,0,0,0.07); position:absolute; /*top:55%; left:50%; transform:translate(-50%,-50%);*/ width:100%; height:100%; text-align:center; /*bottom:0; right:.25em;*/}


div.gridBox {display:grid; grid-gap:10px; padding:10px; position:relative; background-color:#2196F3;}
div.gridBox div.item {background-color:rgba(255,255,255,0.75); padding:1.5rem 0; font-size:2em; text-align:center;}


div#grid1 {grid-template-columns:auto auto auto; grid-gap:0px; background-color:#9400ff;}
div#grid1 div.item {background-color:rgba(255,255,255,0.8); border:1px solid rgba(0,0,0,0.8); padding:20px; font-size:30px; text-align:center;}

div#grid2 {grid-template-columns:auto auto auto; background-color:#df00a9;}
div#grid2 div.item1 {grid-column-start:1; grid-column-end:3; background-color:white;}

div#grid3 {grid-template-columns:auto auto auto; background-color:#0a84ff;}
div#grid3 div.item1 {grid-row-start:1; grid-row-end:3; background-color:white;}

div#grid4 {background-color:#12bc00;}
div#grid4 div.item1 {grid-column:1/span 2; grid-row:1; background-color:white;}
div#grid4 div.item2 {grid-column:3; grid-row:1/span 2; background-color:white;}
div#grid4 div.item5 {grid-column:1/span 3; grid-row:3; background-color:white;}

div#grid5 {grid-template-columns:auto auto auto auto auto auto; background-color:#ea8000;}
div#grid5 div.item1 {grid-column:1/5; background-color:white;}
div#grid5 div.item5 {grid-column:2/span 3; background-color:white;}

div#grid6 {grid-template-columns:auto auto auto auto auto auto; background-color:#00b0bd;}
div#grid6 div.item1 {grid-row:1/4; background-color:white;}

div#grid7 {grid-template-columns:auto auto auto auto auto auto; background-color:#d70022;}
div#grid7 div.item1 {grid-row:1/span 2; background-color:white;}

div#grid8 {grid-template-columns:auto auto auto auto auto auto; background-color:#4b42ff;}
div#grid8 div.item8 {grid-area:1/2/5/6; background-color:white;} /* Syntax: grid-row-start / grid-column-start / grid-row-end / grid-column-end */
/*Item8 will start on row-line 1 and column-line 2, and end on row-line 5 column-line 6*/

div#grid9 {grid-template-columns:auto auto auto auto auto auto; background-color:#b5007f;}
div#grid9 div.item8 {grid-area:2 / 1 / span 2 / span 3; background-color:white;}

div#gridA {grid-template-areas:'myArea myArea myArea myArea myArea'; background-color:#058b00;}
div#gridA div.item {background-color:rgba(255, 255, 255, 0.8); text-align:center; padding:20px 0; font-size:30px;}
div#gridA div.item1 {grid-area:myArea; background-color:white;} /* Item1, is called "myArea" and will take up the place of all five columns */

div#gridB {grid-template-areas:'myArea myArea . . .'; background-color:#a47f00;}
div#gridB div.item {background-color:rgba(255, 255, 255, 0.8); text-align:center; padding:20px 0; font-size:30px;}
div#gridB div.item1 {grid-area:myArea; background-color:white;} /* Item1, is called "myArea" and will take up the place of two columns (out of five) */

div#gridC {grid-template-areas:'myArea myArea . . .' 'myArea myArea . . .'; background-color:#005a71;}
div#gridC div.item {background-color:rgba(255, 255, 255, 0.8); text-align:center; padding:20px 0; font-size:30px;}
div#gridC div.item1 {grid-area:myArea; background-color:white;} /* Item1, is called "myArea" and will take up the place of two columns (out of five), and will span two rows */

/* This grid layout contains six columns and three rows. */
div#gridD {grid-template-areas:'header header header header header header''menu main main main right right''menu footer footer footer footer footer'; background-color:#9400ff;}
div#gridD div.item {background-color:rgba(255, 255, 255, 0.8); text-align:center; padding:20px 0; font-size:30px;}
/* You can use the grid-area property to name grid items. */
div#gridD div.item1 {grid-area:header;}
div#gridD div.item2 {grid-area:menu;}
div#gridD div.item3 {grid-area:main;}
div#gridD div.item4 {grid-area:right;}
div#gridD div.item5 {grid-area:footer;}

div#gridE {grid-template-columns:auto auto auto; background-color:#df00a9;}
div#gridE div.item {background-color:rgba(255, 255, 255, 0.8); text-align:center; padding:20px 0; font-size:30px;}
/* The items do not have to be displayed in the same order as they are written in the HTML code. */
div#gridE div.item1 {grid-area:1 / 3 / 2 / 4;}
div#gridE div.item2 {grid-area:2 / 3 / 3 / 4;}
div#gridE div.item3 {grid-area:1 / 1 / 2 / 2;}
div#gridE div.item4 {grid-area:1 / 2 / 2 / 3;}
div#gridE div.item5 {grid-area:2 / 1 / 3 / 2;}
div#gridE div.item6 {grid-area:2 / 2 / 3 / 3;}

div#gridF {grid-template-columns:auto auto auto; background-color:#0a84ff;}
div#gridF div.item {background-color:rgba(255, 255, 255, 0.8); text-align:center; padding:20px 0; font-size:30px;}
/* Re-arange the Order on Small Devices. */
@media only screen and (max-width:500px) {
	div#gridF div.item1 { grid-area:1 / span 3 / 2 / 4; }
	div#gridF div.item2 { grid-area:3 / 3 / 4 / 4; }
	div#gridF div.item3 { grid-area:2 / 1 / 3 / 2; }
	div#gridF div.item4 { grid-area:2 / 2 / span 2 / 3; }
	div#gridF div.item5 { grid-area:3 / 1 / 4 / 2; }
	div#gridF div.item6 { grid-area:2 / 3 / 3 / 4; }
}