section{
	border : 1px dashed #DD5735;
}
article{
	border : 1px solid #eee;
}
.simple{
    display : grid;
    grid-template-rows: auto;
	grid-template-columns: 150px auto;
}
.simpleAlt {
	display: grid;
	grid-template: auto / 150px auto;
}
.repeat {
	display: grid;
	grid-template-rows: repeat(3, auto);
	grid-template-columns: repeat(4, auto);
}
.gap {
	display: grid;
	grid-template: repeat(3, auto) / repeat(4, auto);
	row-gap: 2em;
	column-gap: 4px;
}
.gapAlt {
	display: grid;
	grid-template: repeat(3, auto) / repeat(4, auto);
	gap: 2em 4px;
}
.justifyICenter{
	display: grid;
	grid-template: repeat(3, auto) / repeat(4, auto);
	justify-items: center;
}
.justifyIStart{
	display: grid;
	grid-template: repeat(3, auto) / repeat(4, auto);
	justify-items: start;
}
.justifyIEnd{
	display: grid;
	grid-template: repeat(3, auto) / repeat(4, auto);
	justify-items: end;
}
.alignCenter{
	display: grid;
	grid-template: repeat(3, auto) / repeat(4, auto);
	align-items: center;
	height: 50vh;
}
.alignStart{
	display: grid;
	grid-template: repeat(3, auto) / repeat(4, auto);
	align-items: start;
	height: 50vh;
}
.alignEnd{
	display: grid;
	grid-template: repeat(3, auto) / repeat(4, auto);
	align-items: end;
	height: 50vh;
}
.alignStretch{
	display: grid;
	grid-template: repeat(3, auto) / repeat(4, auto);
	align-items: stretch;
	height: 50vh;
}
.justifyCCenter{
	display: grid;
	grid-template: repeat(3, auto) / repeat(4, auto);
	justify-content: center;
}
.justifyCStart{
	display: grid;
	grid-template: repeat(3, auto) / repeat(4, auto);
	justify-content: start;
}
.justifyCEnd{
	display: grid;
	grid-template: repeat(3, auto) / repeat(4, auto);
	justify-content: end;
}
.justifyCBetween{
	display: grid;
	grid-template: repeat(3, auto) / repeat(4, auto);
	justify-content: space-between;
}
.justifyCAround{
	display: grid;
	grid-template: repeat(3, auto) / repeat(4, auto);
	justify-content: space-around;
}
.alignCCenter{
	display: grid;
	grid-template: repeat(3, auto) / repeat(4, auto);
	align-content: center;
	height: 50vh;
}
.alignCStart{
	display: grid;
	grid-template: repeat(3, auto) / repeat(4, auto);
	align-content: start;
	height: 50vh;
}
.alignCEnd{
	display: grid;
	grid-template: repeat(3, auto) / repeat(4, auto);
	align-content: end;
	height: 50vh;
}
.alignCSpaceBetween{
	display: grid;
	grid-template: repeat(3, auto) / repeat(4, auto);
	align-content: space-between;
	height: 50vh;
}
.alignCSpaceAround{
	display: grid;
	grid-template: repeat(3, auto) / repeat(4, auto);
	align-content: space-around;
	height: 50vh;
}
.alignCSpaceEvenly{
	display: grid;
	grid-template: repeat(3, auto) / repeat(4, auto);
	align-content: space-evenly;
	height: 50vh;
}


/**********************************************************************************************************/


.gridItems {
	display: grid;
	grid-template: repeat(3, auto) / repeat(4, auto);
	gap: 1em;
}
.gridItems .area-header {
	grid-row-start: 1;
	grid-row-end: 2;
	grid-column-start: 1;
	grid-column-end: 5;
}
.gridItems .area-main {
	grid-row-start: 2;
	grid-row-end: 3;
	grid-column-start: 1;
	grid-column-end: 3;
}
.gridItems .area-sidebar {
	grid-row-start: 2;
	grid-row-end: 3;
	grid-column-start: 4;
	grid-column-end: 5;
}
.gridItems .area-footer {
	grid-row-start: 3;
	grid-row-end: 4;
	grid-column-start: 1;
	grid-column-end: 5;
}

/* template-items alt */
.gridItemsAlt {
	display: grid;
	grid-template: repeat(3, auto) / repeat(4, auto);
	gap: 1em;
}
.gridItemsAlt .area-header {
	grid-row: 1 / 2;
	grid-column: 1 / 5;
}
.gridItemsAlt .area-main {
	grid-row: 2 / 3;
	grid-column: 1 / 3;
}
.gridItemsAlt .area-sidebar {
	grid-row: 2 / 3;
	grid-column: 4 / 5;
}
.gridItemsAlt .area-footer {
	grid-row: 3 / 4;
	grid-column: 1 / 5;
}

/* template-items */
.gridAreas {
	display: grid;
	grid-template: repeat(3, auto) / repeat(4, auto);
	gap: 1em;
}
.gridAreas .area-header {
	grid-area: 1 / 1 / 2 / 5;
}
.gridAreas .area-main {
	grid-area: 2 / 1 / 3 / 3;
}
.gridAreas .area-sidebar {
	grid-area: 2 / 4 / 3 / 5;
}
.gridAreas .area-footer {
	grid-area: 3 / 1 / 4 / 5;
}

/* template-areas alt */
.gridAreasAlt {
	display: grid;
	grid-template:repeat(4, auto);
	grid-template-areas:
		"header header header header"
		"main main sidebar"
		"footer footer footer footer";
	gap: 1em;
}
.gridAreasAlt .area-header {
	grid-area: header;
}
.gridAreasAlt .area-main {
	grid-area: main;
}
.gridAreasAlt .area-sidebar {
	grid-area: sidebar;
}
.gridAreasAlt .area-footer {
	grid-area: footer;
}