Instantly share code, notes, and snippets.

Embed
What would you like to do?
Gutenberg Grid Layout
/***** 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) */
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment