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