Un exercice de style pour comparer CSS flex et CSS grid
Le damier est sur 4 colonnes et deux lignes , les contenants sont nommés dans l’ordre visuel de l’ordinateur , cela pourrait être fait en partant de celui de la version mobile, ce qui serait même plus propre au sens SEO, mobile first.
Pour l’exercice, les cartes du damier contiendront une boite CTA façon Kadence block avec un hover en version desktop, mais elles peuvent contenir ce que l’on désire.
Chaque carte a reçu une classe divx , et la div parente une classe parentdivs (pour le CSS Grid) ou parentdivf (pour le CSS Flex) pour faciliter la compréhension.
Le damier en CSS Grid
Adaptatif
CSS Grid permet de créer des mises en page qui s’ajustent automatiquement à différentes tailles d’écran.
Structuré
Il facilite l’organisation des éléments en lignes et colonnes, pour une disposition claire et ordonnée.
Facile à manipuler
CSS Grid simplifie la gestion des espaces entre les éléments avec des propriétés comme ‘gap’.
Puissant
Il permet de construire des mises en page complexes sans nécessiter de hacks ou de calculs compliqués.
Le height 100% sur le .kt-inside-inner-col (.div* .kt-inside-inner-col ) permet que tous les contenus de cartes aient la même hauteur.
selector .kt-inner-column-height-full.kt-mobile-layout-row>.wp-block-kadence-column>.kt-inside-inner-col {
height: 100%;}
.parentdivs .kt-row-column-wrap{
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(2, 1fr);
grid-column-gap: 1rem;
grid-row-gap: 1rem;
}
.parentdivs .div1 { grid-area: 1 / 1 / 2 / 2; }
.parentdivs .div2 { grid-area: 1 / 2 / 2 / 3; }
.parentdivs .div3 { grid-area: 1 / 3 / 2 / 4; }
.parentdivs .div4 { grid-area: 1 / 4 / 2 / 5; }
.parentdivs .div5 { grid-area: 2 / 1 / 3 / 2; }
.parentdivs .div6 { grid-area: 2 / 2 / 3 / 3; }
.parentdivs .div7 { grid-area: 2 / 3 / 3 / 4; }
.parentdivs .div8 { grid-area: 2 / 4 / 3 / 5; }
@media (782px <= width <= 1024px)
{
.parentdivs .kt-row-column-wrap {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(4, 1fr);
grid-column-gap: 1rem;
grid-row-gap: 1rem;
}
.parentdivs .div1 { grid-area: 1 / 1 / 2 / 2; }
.parentdivs .div2 { grid-area: 1 / 2 / 2 / 3; }
.parentdivs .div3 { grid-area: 2 / 2 / 3 / 3; }
.parentdivs .div4 { grid-area: 2 / 1 / 3 / 2; }
.parentdivs .div6 { grid-area: 3 / 1 / 4 / 2; }
.parentdivs .div5 { grid-area: 3 / 2 / 4 / 3; }
.parentdivs .div8 { grid-area: 4 / 2 / 5 / 3; }
.parentdivs .div7 { grid-area: 4 / 1 / 5 / 2; }}
@media (max-width:782px)
{
.parentdivs .kt-row-column-wrap {display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto;
grid-column-gap: 1rem;
grid-row-gap:1rem;
}
.parentdivs .div1 { grid-area: 1 / 1 / 2 / 2; }
.parentdivs .div2 { grid-area: 2 / 1 / 3 / 2; height: 150px; }
.parentdivs .div3 { grid-area: 3 / 1 / 4 / 2; }
.parentdivs .div4 { grid-area: 4 / 1 / 5 / 2; height: 150px; }
.parentdivs .div6 { grid-area: 5 / 1 / 6 / 2; }
.parentdivs .div5 { grid-area: 6 / 1 / 7 / 2; height: 150px;}
.parentdivs .div8 { grid-area: 7 / 1 / 8 / 2; }
.parentdivs .div7 { grid-area: 8 / 1 / 9 / 2;height: 150px;}
}
Le damier en CSS Flex
Souple
CSS Flexbox permet de créer des mises en page fluides où les éléments s’ajustent facilement en fonction de l’espace disponible
2
Centrage facile
Il simplifie l’alignement des éléments, notamment pour centrer verticalement et horizontalement.
4
5
Réactif
Les éléments peuvent automatiquement se redistribuer sur différentes lignes ou colonnes selon la taille de l’écran
7
Direction contrôlable
Flexbox offre un contrôle précis sur l’ordre et la direction des éléments, que ce soit en ligne ou en colonne.
.parentdivf .kt-row-column-wrap {
display: flex;
flex-wrap: wrap;
gap: 1rem; /* Équivalent à grid-gap */
}
/* Grille de base : 4 colonnes */
.kt-row-column-wrap > div {
flex: 1 1 calc(25% - 1rem); /* Chaque élément prend 25% de la largeur moins l'espace (gap) */
}
/* Disposition pour les écrans moyens (782px ≤ width ≤ 1024px) */
@media (min-width: 782px) and (max-width: 1024px) {
.kt-row-column-wrap > div {
flex: 1 1 calc(50% - 1rem); /* Chaque élément prend 50% de la largeur moins l'espace */
}
/* Inversion des div pour respecter le damier en 2 colonnes */
.div3 {
order: 4; /* Positionner après div4 */
}
.div4 {
order: 3; /* Positionner avant div3 */
}
.div5 {
order: 6; /* Positionner après div 6 */
}
.div6 {
order: 5; /* Positionner avant div53 */
}
.div7 {
order: 7; /* Positionner les autres div */
}
.div8 {
order: 8; /* Positionner les autres div */
}
}
/* Disposition pour les petits écrans (max-width: 782px) */
@media (max-width: 782px) {
.kt-row-column-wrap > div {
flex: 1 1 100%; /* Chaque élément prend 100% de la largeur */
height: auto; /* Hauteur automatique par défaut */
}
/* Hauteur spécifique pour les divs 2, 4, 6, et 8 */
.div2, .div4, .div5, .div7 {
height: 150px; /* Fixe la hauteur à 150px */
flex: none; /* Désactive la flexibilité pour maintenir la hauteur */
}
/* Inversion des div pour respecter l'alternance et l'ordre du damier mais sur 1 colonnes */
.div5 {
order: 6;
}
.div6 {
order: 5;
}
.div7 {
order: 8;
}
.div8 {
order: 7;
}
}Réduisez la taille de votre fenêtre ou utilisez l’inspecteur de code de votre navigateur pour voir ce qu’il se passe dans les différentes tailles d’écran. Le résultat des deux types CSS sont identiques. Le Css Grid reste le plus facile à manier.
Version desktop
Version tablette
Version mobile
Vous vous perdez dans le CSS pour réaliser le design de votre site?
Les sections, colonnes et lignes n’en font qu’à leur tête? Gagnez du temps et arrêtez les nuits blanches, confiez moi la réalisation de votre site Web.
