.gridlayout {
	display: grid;
	grid-gap: 1em 1em;
	grid-template-columns: repeat( 4, 1fr );
}

/** Définition des tailles */
.gridlayout {
	/** Du parent */
	@for $i from 1 through 6 {
		&.grid-#{$i} {
			grid-template-columns: repeat( $i, 1fr );
		}

		/** Chaque enfant peut modifier sa propre taille */
		@for $y from 1 through 6 {
			@if ( $y <= $i ) {
				&.grid-#{$i} > .gridw-#{$y} {
					grid-column: auto / span $y;

					@if ( $y > 1 ) {
						@media ( max-width: $media__medium ) {
							grid-column: auto / span 2;
						}
					}
				}
			}
		}
	}
}

/** Définition des hauteur des enfants */
.gridlayout {
	@for $i from 1 through 6 {
		> .gridh-#{$i} {
			grid-row: auto / span $i;

			@media ( max-width: $media__medium ) {
				grid-row: auto / span 1 !important;
			}
		}
	}
}

/** Mages */
.gridlayout {
	@for $i from 0 through 6 {
		&.grid-margin-#{$i} {
			margin: #{$i}em  0;
		}
	}
}

/** Gouttières */
.gridlayout {
	@for $i from 0 through 6 {
		&.grid-gap-#{$i} {
			grid-gap: #{$i}em  #{$i}em;
		}
	}
}

/** Media queries */
.gridlayout {
	@for $i from 1 through 6 {
		@if ( $i > 2 ) {
			@media ( max-width: $media__medium ) {
			&.grid-#{$i} {
					grid-template-columns: repeat( 2, 1fr ) !important;
				}
			}
		}
		@if ( $i > 1 ) {
			@media ( max-width: $media__small ) {
			&.grid-#{$i} {
					grid-template-columns: repeat( 1, 1fr ) !important;
				}
			}
		}

	}
	> * {
		@media ( max-width: $media__small ) {
			grid-column: auto / span 1 !important;
		}
	}
}