/* Le code CSS de la démo */

/* template */
.test-simple {
	display: grid;


	/* lignes : auto */
	grid-template-rows: auto;

	/*
	autre exemple
	2 lignes : 200px 300px
	grid-template-rows: 200px 300px;
	*/

	/* 2 colonnes car 2 valeurs : 150px et auto */
	grid-template-columns: 150px auto;

	/*
	autre exemple
	3 colonnes car 3 valeurs : 150px 10% auto
	grid-template-columns: 150px 10% auto;
	*/
}
.test-simple-alt {
	display: grid;

	/*
	 utilise grid-template-row et grid-template-columns
	 valeurs séparées par le /

	 grid-template: row / columns
	*/
	grid-template: auto / 150px auto;
}
.test-repeat {
	display: grid;

	/*
	repeat(3, auto) >> 3 lignes en taille , (height) auto
	*/
	grid-template-rows: repeat(3, auto);
	/*
	repeat(4, auto) >> noombre_de_ colonnes , height
	*/
	grid-template-columns: repeat(4, auto);
	/* autre exemplee :
	3 colonnes : 20% 30% auto
	grid-template-columns: 20% 30% auto;
	*/

}

/* gap */
.test-gap {
	display: grid;
	grid-template: repeat(3, auto) / repeat(4, auto);
	row-gap: 2em; /* largeur de la goutière ligne (espace entre les lignes) */
	column-gap: 4px; /* largeur de la goutière colonne (espace entre les colonne) */
}
.test-gap-alt {
	display: grid;
	grid-template: repeat(3, auto) / repeat(4, auto);
	gap: 2em 4px; /* largeur goutière : ligne colonne */
}

/* justify-items */
.test-justify-items-center {
	display: grid;
	grid-template: repeat(3, auto) / repeat(4, auto);
	justify-items: center;
}
.test-justify-items-start {
	display: grid;
	grid-template: repeat(3, auto) / repeat(4, auto);
	justify-items: start;
}
.test-justify-items-end {
	display: grid;
	grid-template: repeat(3, auto) / repeat(4, auto);
	justify-items: end;
}

/* align-items */
.test-align-items-center {
	display: grid;
	grid-template: repeat(3, auto) / repeat(4, auto);
	align-items: center;
	min-height: 24em;
}
.test-align-items-start {
	display: grid;
	grid-template: repeat(3, auto) / repeat(4, auto);
	align-items: start;
	min-height: 24em;
}
.test-align-items-end {
	display: grid;
	grid-template: repeat(3, auto) / repeat(4, auto);
	align-items: end;
	min-height: 24em;
}
.test-align-items-stretch {
	display: grid;
	grid-template: repeat(3, auto) / repeat(4, auto);
	align-items: stretch;
	min-height: 24em;
}

/* justify-content */
.test-justify-content-center {
	display: grid;
	grid-template: repeat(3, auto) / repeat(4, auto);
	justify-content: center;
}
.test-justify-content-start {
	display: grid;
	grid-template: repeat(3, auto) / repeat(4, auto);
	justify-content: start;
}
.test-justify-content-end {
	display: grid;
	grid-template: repeat(3, auto) / repeat(4, auto);
	justify-content: end;
}
.test-justify-content-between {
	display: grid;
	grid-template: repeat(3, auto) / repeat(4, auto);
	justify-content: space-between;
}
.test-justify-content-around {
	display: grid;
	grid-template: repeat(3, auto) / repeat(4, auto);
	justify-content: space-around;
}

/* align-content */
.test-align-content-center {
	display: grid;
	grid-template: repeat(3, auto) / repeat(4, auto);
	align-content: center;
	min-height: 24em;
}
.test-align-content-start {
	display: grid;
	grid-template: repeat(3, auto) / repeat(4, auto);
	align-content: start;
	min-height: 24em;
}
.test-align-content-end {
	display: grid;
	grid-template: repeat(3, auto) / repeat(4, auto);
	align-content: end;
	min-height: 24em;
}
.test-align-content-between {
	display: grid;
	grid-template: repeat(3, auto) / repeat(4, auto);
	align-content: space-between;
	min-height: 24em;
}
.test-align-content-around {
	display: grid;
	grid-template: repeat(3, auto) / repeat(4, auto);
	align-content: space-around;
	min-height: 24em;
}
.test-align-content-evenly {
	display: grid;
	grid-template: repeat(3, auto) / repeat(4, auto);
	align-content: space-evenly;
	min-height: 24em;
}

/* template-items */
.test-items {
	display: grid;
	grid-template: repeat(3, auto) / repeat(4, auto);
	gap: 1em;
}
/* */
.test-items .area-header {
	grid-row-start: 1; 			/* de la ligne  1 */
	grid-row-end: 2; 			/* à la ligne 2 */
	grid-column-start: 1;		/* de la colonne 1 */
	grid-column-end: 5;			/* à la colonne 5 */
}
.test-items .area-main {
	grid-row-start: 2;
	grid-row-end: 3;
	grid-column-start: 1;
	grid-column-end: 3;
}
.test-items .area-sidebar {
	grid-row-start: 2;
	grid-row-end: 3;
	grid-column-start: 4;
	grid-column-end: 5;
}
.test-items .area-footer {
	grid-row-start: 3;
	grid-row-end: 4;
	grid-column-start: 1;
	grid-column-end: 5;
}

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

/* template-areas */
.test-areas {
	display: grid;
	grid-template: repeat(3, auto) / repeat(4, auto);
	gap: 1em;
}
.test-areas .area-header {
	/* grid-area: num_de_ligne_debut num_de_col_debut num_de_ligne_fin num_de_col_fin  */
	grid-area: 1 / 1 / 2 / 5;
}
.test-areas .area-main {
	grid-area: 2 / 1 / 3 / 3;
}
.test-areas .area-sidebar {
	grid-area: 2 / 4 / 3 / 5;
}
.test-areas .area-footer {
	grid-area: 3 / 1 / 4 / 5;
}

/* template-areas alt */
.test-areas-alt {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr; /* fr : fraction */
	grid-template-areas:
		"haut haut haut haut"
		"principal principal principal sidebar"
		"bas bas bas bas";
	gap: 1em;
}
.test-areas-alt .area-header {
	grid-area: haut;
}
.test-areas-alt .area-main {
	grid-area: principal;
}
.test-areas-alt .area-sidebar {
	grid-area: sidebar;
}
.test-areas-alt .area-footer {
	grid-area: bas;
}

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

	.test-areas-alt {
		grid-template-columns: 1fr; /* fr : fraction */
		grid-template-areas:
			"haut"
			"sidebar"
			"principal"
			"bas";
	}

}