Maîtriser les mises en page réactives : réaliser des conceptions complexes avec CSS Grid

Créer des mises en page réactives est un défi courant pour les développeurs Web. Dans ce blog, nous explorerons comment réaliser une conception réactive spécifique en utilisant différentes techniques CSS, en nous concentrant sur pourquoi CSS Grid est la meilleure approche pour cette mise en page particulière.

Le défi

Nous devons créer une mise en page où :

Vue du bureau :

• DIV 1 et DIV 3 s'empilent verticalement à gauche, chacune occupant 50 % de la colonne de gauche.
• DIV 2 occupe toute la hauteur de la colonne de droite.

Vue mobile :

• Les trois divs s'empilent verticalement.

Pourquoi Flexbox n'est pas à la hauteur

Flexbox est excellent pour les mises en page unidimensionnelles, mais a du mal avec les mises en page bidimensionnelles complexes comme la nôtre. Voici pourquoi :

 <div class="container">
   <div class="item">DIV 1</div>
   <div class="item">DIV 2</div>
   <div class="item">DIV 3</div>
 </div>

.container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px;
}

.item {
    background-color: #40c4ff;
    color: white;
    padding: 20px;
    text-align: center;
    box-sizing: border-box;
}

.item:nth-child(1),
.item:nth-child(3) {
    flex: 1 1 calc(50% - 10px);
}

.item:nth-child(2) {
    flex: 1 1 50%;
}

@media (max-width: 768px) {
    .item {
        flex: 1 1 100%;
    }
}

Problèmes avec Flexbox

Dans cette configuration flexbox :

• DIV 2 ne peut pas ajuster automatiquement sa hauteur pour correspondre à la hauteur combinée de DIV 1 et DIV 3.
• Flexbox est principalement destiné aux dispositions unidimensionnelles (en ligne ou en colonne), et non aux arrangements bidimensionnels complexes.

La solution de grille CSS

CSS Grid excelle dans la création de mises en page bidimensionnelles, ce qui le rend parfait pour ce défi.

 <div class="container">
   <div class="item">DIV 1</div>
   <div class="item">DIV 2</div>
   <div class="item">DIV 3</div>
 </div>

.container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 10px;
    padding: 10px;
}

.item {
    background-color: #40c4ff;
    color: white;
    padding: 20px;
    text-align: center;
    box-sizing: border-box;
}

.item:nth-child(1) {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
}

.item:nth-child(2) {
    grid-column: 2 / 3;
    grid-row: 1 / 3;
}

.item:nth-child(3) {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
}

@media (max-width: 768px) {
    .container {
        display: flex;
        flex-direction: column;
    }
    .item {
        width: 100%;
    }
}

Explication

Disposition de la grille :

• Définit une grille avec deux colonnes et deux lignes.
• Positionne DIV 1 dans la première colonne et la première ligne.
• Positionne DIV 2 dans la deuxième colonne, s'étendant sur deux lignes.
• Positions DIV 3 en première colonne et deuxième ligne.

Conception réactive :

• Pour les écrans de 768 px ou moins, la disposition passe à Flex, empilant les éléments verticalement.

Conclusion

Bien que Flexbox soit idéal pour les mises en page unidimensionnelles plus simples, CSS Grid offre la puissance et la flexibilité nécessaires pour les conceptions bidimensionnelles plus complexes. En utilisant CSS Grid, nous pouvons facilement obtenir la mise en page réactive souhaitée avec un minimum de code et un contrôle maximum.

N'hésitez pas à adapter cet exemple à vos propres projets et profitez des avantages de l'utilisation de CSS Grid pour vos mises en page réactives !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!