Gutenberg Grid Layout

wp-gutenberg-grid-layout.css

/***** CSS appliqués si le navigateur supporte grid layout ****/
@supports (grid-area: auto) {

	/* Ajustements des éléments principaux */
	
	.page-grille .entry-title {
		background-color: #d8dad9;
		margin-bottom: 2rem;
		padding: 3rem;
		text-align: center;
	}
	.page-grille .entry-content {
		display: grid;
		grid-template-columns: 1fr;
		grid-gap: 2rem;
	}
	.page-grille .entry-content h2,
	.page-grille .entry-content h3,
	.page-grille .entry-content h4 {
		background-color: #afaaaa;
		margin: 0;
		padding: 2rem;
		text-align: center;
	}
	.page-grille .entry-content .wp-block-image {
		margin-bottom: -4px;
	}
	.page-grille .entry-content p {
		margin: 0;
	}
	.page-grille .wp-block-gallery {
		margin: 0;
		padding: 0;
	}
	.page-grille .entry-content:before,
	.page-grille .entry-content:after {
		display: none;
	}

	/* Déclaration de la grille sur le parent  */
	
	.page-grille .wp-block-columns {
		display: grid;
		grid-gap: 2rem;
	}
	.page-grille .wp-block-columns.has-2-columns {
		grid-template-columns: repeat(auto-fill, minmax(41rem, 1fr));
	}
	.page-grille .wp-block-columns.has-3-columns {
		grid-template-columns: repeat(auto-fill, minmax(30rem, 1fr));
	}
	.page-grille .wp-block-columns.has-4-columns {
		grid-template-columns: repeat(4, 1fr);
	}
	
	/* Déclaration de la grille sur les enfants */
	
	.page-grille .wp-block-column {
		display: grid;
		grid-template-columns: 1fr;		
		grid-gap: 2rem;
	}
	.page-grille .wp-block-column p {
		margin: 0;
	}
	
	/* Ajustement sur le responsive */
	
	@media screen and (max-width: 1198px) {
		.page-grille .has-3-columns .wp-block-column:last-child {
			grid-column: 1 / -1;
		}
		.page-grille .wp-block-columns.has-4-columns {
			grid-template-columns: repeat(2, 1fr);
		}				
	}
	@media screen and (max-width: 550px) {
		.page-grille .entry-content .wp-block-columns {
			grid-template-columns: 1fr;
		}			
	}
  
} /* FIN @supports (grid-area: auto) */