Catégories
Astuces et Design

Grille pour la mise en page, Flexbox pour les composants

Mon frère est un nouveau diplômé en génie informatique et il termine actuellement son stage en développement front-end. Il a appris à la fois la grille CSS et la flexbox, mais j'ai remarqué un modèle que je vois beaucoup sur le Web. Il ne peut pas décider quand utiliser la grille ou la flexbox. Par exemple, il a utilisé une grille CSS pour mettre en page un en-tête de site Web et a mentionné que le processus n'était pas fluide car il jouait grid-column et a essayé de le peaufiner jusqu'à ce qu'il ressemble à la conception.

Pour être honnête, je n'aime pas ça, et j'ai également recherché une ressource qu'il peut utiliser pour apprendre les différences entre la grille et la flexbox, avec des exemples sur les deux, mais je n'en ai pas trouvé. J'ai décidé d'écrire un article approfondi qui couvre tout sur ce sujet. J'espère que vous l'avez trouvé clair!

introduction

Avant de plonger dans les concepts et les exemples, je veux m'assurer que vous comprenez la principale différence entre la grille CSS et la flexbox. CSS Grid est un module de mise en page multidimensionnelle, ce qui signifie qu'il a des colonnes et des lignes. Flexbox peut disposer ses éléments enfants sous forme de colonnes ou de lignes, mais pas les deux.

Si vous ne connaissez pas la grille CSS et la flexbox, je vous recommande de lire cet article visuel par vous-même. Si vous les connaissez, c'est cool, essayons de les différencier, quand les utiliser et pourquoi.

La différence entre Grid et Flexbox

Permettez-moi d'être clair à ce sujet, il n'y a aucun moyen direct de décider entre la grille CSS et la flexbox. En plus de cela, il n'y a pas correct ou Incorrect façon de les utiliser. Cet article est une sorte de guide recommande en utilisant une technique pour un cas d'utilisation spécifique. Je vais expliquer le concept général, puis entrer dans des exemples, et le reste est à vous d'explorer et d'expérimenter davantage.

/* Flexbox wrapper */
.wrapper {
    display: flex;
}

/* Grid wrapper */
.wrapper {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-gap: 16px;
}

Avez-vous remarqué quelque chose? Flexbox présente une liste d'éléments en ligne, tandis que la grille CSS en a fait une grille de colonnes et de lignes. Flexbox aligne l'alignement dans une rangée. Cela peut être une colonne si nous voulons.

/* Flexbox wrapper */
.wrapper {
    display: flex;
    flex-direction: column;
}

Comment décider lequel utiliser

Décider entre la grille CSS et la flexbox peut être un peu difficile (parfois), surtout si vous êtes nouveau dans CSS. Je peux t'entendre! Voici quelques questions initiales de lancement que je me pose en choisissant entre elles:

  • Comment les éléments enfants du composant sont affichés? En ligne ou sous forme de colonnes et de lignes?
  • Comment le composant devrait-il fonctionner sur différentes tailles d'écran?

La plupart du temps, si le composant que vous visualisez a tous ses éléments enfants affichés en ligne, alors flexbox est probablement la meilleure solution ici. Prenons l'exemple suivant:

Cependant, si vous voyez des colonnes et des lignes, la grille CSS est la solution pour votre cas.

Maintenant que j'ai expliqué la principale différence entre eux, passons à des exemples plus spécifiques et apprenons à décider.

Cas d'utilisation et exemples

Dans la section suivante, je vais discuter en détail des différents cas d'utilisation pour la flexbox et la grille.

Grille CSS

Barre principale et latérale

Lorsque vous avez une barre latérale et principale, la grille CSS est une solution parfaite pour les construire. Considérez la maquette suivante:

Voici comment je procéderais en CSS:

 class="wrapper">
    
    
Main
@media (min-width: 800px) {
    .wrapper {
        display: grid;
        grid-template-columns: 200px 1fr;
        grid-gap: 16px;
    }
    
    aside {
        align-self: start;
    }
}

Si align-self n’ont pas été utilisés pour

@media (min-width: 500px) {
    .wrapper {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        grid-gap: 16px;
    }
}

.card {
    display: flex; /* (1) */
    flex-direction: column; /* (2) */
}

.card__content {
    flex-grow: 1; /* (3) */
    display: flex; /* (4) */
    flex-direction: column;
}

.card__link {
    margin-top: auto; /* (5) */
}

Permettez-moi d'expliquer le CSS ci-dessus.

  1. Faire la carte comme un emballage flexbox.
  2. La direction est une colonne, ce qui signifie que les éléments de la carte sont empilés.
  3. Laisser le contenu de la carte se développer et remplir l'espace restant.
  4. Faire le contenu de la carte comme un emballage Flexbox.
  5. Enfin, en utilisant margin-top: auto pour pousser le lien vers le bas. Cela le gardera positionné à la fin quelle que soit la hauteur de la carte.

Comme vous l'avez vu, la combinaison de la grille CSS et de la flexbox n'est pas difficile. Ces deux outils peuvent nous donner de nombreuses façons de mettre en œuvre des mises en page sur le Web. Utilisons-les correctement et combinons-les seulement en cas de besoin comme ci-dessus.

Remplacement et prise en charge d'anciens navigateurs

Utilisation de CSS @supports

Il y a quelques mois, j'ai reçu un tweet disant que mon site Web était cassé dans IE11. Après l'avoir vérifié, j'ai remarqué un comportement très étrange. Tout le contenu du site Web est réduit dans la zone supérieure gauche. Mon site Web n'était pas utilisable!

Oui, c'est mon site Web – un site Web de développeur front-end, sur IE11. Au début, j'étais confus, pourquoi cela se produit-il? Je me souvenais que la grille CSS est prise en charge dans IE11, mais c'est l'ancienne version publiée par Microsoft. La solution est très simple, qui consiste à utiliser @supports pour utiliser uniquement la grille CSS pour les nouveaux navigateurs.

@supports (grid-area: auto) {
    body {
        display: grid;
    }
}

Permettez-moi de l'expliquer. j'ai utilisé grid-area car il n'est pris en charge que dans la nouvelle spécification de grille CSS, de mars 2017 à aujourd'hui. Étant donné qu'IE ne prend pas en charge @supports requête, la règle entière sera ignorée. Par conséquent, la nouvelle grille CSS sera utilisée uniquement pour la prise en charge des navigateurs.

Utilisation de Flexbox comme solution de rechange pour la grille CSS

Si Flexbox ne convient pas pour afficher une grille d'éléments, cela ne signifie pas que ce n'est pas bon pour le repli. Vous pouvez utiliser flexbox comme solution de rechange pour la grille CSS pour les navigateurs non pris en charge. J'ai travaillé sur un outil qui fait exactement cela.

@mixin grid() {
  display: flex;
  flex-wrap: wrap;

  @supports (grid-area: auto) {
    display: grid;
    grid-gap: 16px 16px;
  }
}

@mixin gridAuto() {
  margin-left: -16px;

  > * {
    margin-bottom: 16px;
    margin-left: 16px;
  }

  @media (min-width: 320px) {
    > * {
      width: calc((99% / #{2}) - 16px);
      flex: 0 0 calc((99% / #{2}) - 16px);
    }
  }

  @media (min-width: 768px) {
    > * {
      width: calc((99% / #{3}) - 16px);
      flex: 0 0 calc((99% / #{3}) - 16px);
    }
  }

  @supports (grid-area: auto) {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    margin-left: 0;

    > * {
      width: auto;
      margin-left: 0;
      margin-bottom: 0;
    }
  }
}

Le code de secours ci-dessus fonctionne comme ci-dessous:

  1. Ajouter display: flex et flex-wrap: wrap à l'élément wrapper.
  2. Vérifie si la grille CSS est prise en charge, si oui, alors display: grid sera utilisé à la place.
  3. En utilisant le sélecteur > *, nous pouvons sélectionner les éléments enfants directs du wrapper. En les sélectionnant, nous pouvons ajouter une largeur ou une taille spécifique à chacun.
  4. Bien sûr, la marge entre chacun est nécessaire et sera remplacée par grid-gap dans le cas où la grille CSS est prise en charge.

Voici un exemple d'utilisation du mixin Sass.

.wrapper {
  @include grid();
  @include gridAuto();
}

Démo

Quand les choses tournent mal pour la grille et la flexbox

Pendant que je faisais une revue de code pour mon frère, j'ai remarqué quelques utilisations incorrectes de la grille CSS ou de la flexbox et j'ai pensé que cela pourrait être utile si j'en mettais en évidence certaines.

L'une des motivations de cet article était cette erreur. J'ai remarqué que mon frère utilise une grille CSS pour implémenter un en-tête de site Web.

Il a mentionné des choses comme "c'était complexe, la grille css est difficile .. etc". À la suite de l'utilisation d'une méthode de mise en page incorrecte, il a eu une idée que la grille CSS est complexe. Ce n'est pas le cas, et toute sa confusion vient du fait de l'utiliser pour quelque chose qui ne convient pas.

Prenons l'exemple suivant que j'ai remarqué.

.site-header {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
}

.site-nav {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
}

La grille CSS a été utilisée deux fois, la première fois pour l'en-tête entier et la seconde pour la navigation. Il a utilisé grid-column pour affiner l'espacement entre les éléments et d'autres choses étranges dont je ne me souviens pas, mais vous avez compris!

Utilisation de la grille CSS pour les onglets

Une autre utilisation incorrecte de la grille CSS consiste à l'appliquer sur un composant d'onglets. Considérez la maquette suivante.

Le code CSS incorrect ressemble à ceci:

.tabs-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

D'après le code ci-dessus, je peux voir que le développeur a supposé que le nombre d'onglets n'était que de trois. En conséquence, il a utilisé 1fr 1fr 1fr pour disposer les colonnes. Cela peut facilement se casser si le nombre de colonnes a changé.

Surutilisation de Flexbox ou Grid

N'oubliez pas que l'ancienne méthode de mise en page peut être parfaite pour le travail. L'utilisation excessive de la flexbox ou de la grille peut augmenter la complexité de votre CSS avec le temps. Je ne veux pas dire qu'ils sont complexes, mais les utiliser correctement et dans le bon contexte, comme expliqué dans les exemples de cet article, c'est beaucoup mieux.

Par exemple, vous avez la section de héros suivante avec une demande pour centrer horizontalement tout le contenu de celle-ci.

Cela peut être fait en utilisant text-align: center. Pourquoi utiliser Flexbox alors qu'il existe une solution plus simple?

Conclusion

Ouf, c'était beaucoup sur les différences entre l'utilisation de la grille CSS et de la flexbox. Ce sujet était à l’esprit depuis longtemps et je suis heureux d’avoir eu la chance d’écrire à ce sujet. N'hésitez pas à envoyer vos commentaires par e-mail ou Twitter @ shadowed9!

Merci pour la lecture.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *