CSS Grid vs. Bootstrap : tout ce que vous devez savoir – Java Code Geeks


Une interface utilisateur de haute qualité est un élément essentiel pour chaque site Web d’entreprise. Une interface bien conçue offre aux utilisateurs une expérience intuitive et efficace, ce qui affecte positivement leur perception de la marque. Il existe plusieurs outils ou grilles de mise en page qui aident à définir mise en page du site Web et le placement des éléments de l’interface utilisateur. Les mises en page peuvent également jouer un rôle important dans les conceptions affichées sur différentes tailles d’écran ou appareils. Par exemple, une conception de bureau peut la plupart du temps être trop encombrée pour une conception d’écran mobile. Cependant, les développeurs Web peuvent utiliser certains des meilleurs frameworks CSS créer sites Web compatibles avec les navigateurs et pages Internet.

Dans le scénario d’interface Web d’aujourd’hui, CSS est le moyen par lequel nous contrôlons la mise en forme et l’apparence du contenu HTML. Il existe différentes manières de contrôler la disposition des éléments sur une page. Dans ce blog, nous discutons et comparons deux principaux modèles de mise en page (CSS Grid et Bootstrap) qui facilitent le placement efficace des éléments sur une page. Nous effectuerons également une comparaison détaillée entre CSS Grid et Bootstrap afin que vous puissiez prendre une décision éclairée en sélectionnant le modèle de mise en page le mieux adapté.

Bien que la comparaison CSS Grid vs. Bootstrap puisse ressembler à une comparaison « des pommes vs des oranges », mais au fur et à mesure que vous continuez à lire le blog ; vous obtiendrez sûrement une image plus claire de cette comparaison.

CSS Grid vs Bootstrap : la base de comparaison

Grille CSS est principalement utilisé lorsque nous sommes plus rigides sur la mise en page et que nous voulons que notre contenu circule sur la page selon la mise en page souhaitée. CSS Grid a été inspiré par « id ». alors que le système de grille de Bootstrap est basé sur le Boîte flexible CSS système de mise en page. Bootstrap est en concurrence directe avec CSS Grid, établissant une forte comparaison avec le système de disposition en grille de CSS Grid.

Dans les sections suivantes de ce blog, nous essaierons d’établir des comparaisons solides entre CSS Grid et le wrapper de Bootstrap sur Flexbox. Toute référence à Bootstrap fait référence au système Grid utilisé dans Bootstrap (qui est basé sur Flexbox).

Donc, en règle générale, « content out » est pour Bootstrap et « layout in in” est pour CSS Grid.

Si nous voulons contrôler la mise en page dans le sens des lignes ou des colonnes, nous devons opter pour la grille basée sur Flexbox de Bootstrap. D’un autre côté, vous devriez opter pour CSS Grid si vous voulez un contrôle de la mise en page à la fois sur la ligne et la colonne.

Lire: 23 frameworks CSS réactifs et légers

CSS Grid vs Bootstrap : comparaison détaillée

La plupart du temps, le débat pour choisir entre la mise en page Bootstrap et CSS Grid commence par la discussion du nombre d’axes que les utilisateurs peuvent contrôler pour le contenu tout en travaillant avec la mise en page.

Qu’est-ce qu’une grille CSS ?

CSS Grid est un mécanisme de mise en page qui garantit que la structure statique d’un site Web ou d’une application reste fonctionnelle et utilisable. Il comprend des lignes et des colonnes pour créer des colonnes et des lignes ordonnées constituées de cellules. Dans CSS Grid, le contenu peut être contrôlé dans le sens des lignes et des colonnes (c’est-à-dire dans le sens 2D).

Le module CSS Grid Layout permet aux développeurs de créer des mises en page basées sur une grille où les éléments se positionnent automatiquement dans le conteneur de grille avec un algorithme de dimensionnement flexible. L’algorithme de placement automatique distribue les articles efficacement en utilisant l’espace disponible, en équilibrant la quantité d’espace consommée par le contenu et en emballant les articles aussi étroitement que possible. Cette approche facilite la réactivité du site Web (ou de l’application Web).

L’objectif d’un site Web réactif est de fournir une expérience de visualisation optimale – lecture et navigation faciles avec un minimum de redimensionnement, de panoramique et de défilement – sur une large gamme d’appareils (des ordinateurs de bureau aux téléphones mobiles). Maintenant, vous pouvez tester vos sites Web ou votre application Web sur plus de 50 écrans Android et iOS avec ce logiciel gratuit vérificateur de conception réactif appelé Navigateur LT.

LT Browser est livré avec une multitude de fonctionnalités qui améliorent votre expérience de test et fournissent un environnement confortable pour une conception réactive comme les outils de développement.

TÉLÉCHARGER LE NAVIGATEUR LT

Si vous débutez avec LT Browser, reportez-vous à notre didacticiel LT Browser pour commencer avec les tests réactifs.

Qu’est-ce qu’une grille d’amorçage ?

Bootstrap est une boîte à outils HTML, CSS et JavaScript gratuite et open source permettant de développer des composants Web simples à utiliser. Le puissant système de grille permet à tout concepteur/développeur de mettre en œuvre un large éventail de mises en page de manière simplifiée.

Le système Bootstrap Grid est construit sur une disposition à douze colonnes qui est réactive et super flexible. Il peut être utilisé pour créer n’importe quoi, des pages de contenu simples aux pages de destination complexes. De plus, le système de modules construit avec Flexbox à l’esprit permet aux développeurs de créer des mises en page qui répondent à différentes tailles d’écran.

Comment fonctionnent les grilles CSS et Bootstrap ?

CSS Grid divise l’espace du site Web en lignes et en colonnes, qui peuvent être allouées en largeur fixe en spécifiant les pixels ou la fraction (en utilisant fr) de l’espace disponible à allouer à une section désignée. Avec CSS Grid, vous créez des mises en page flexibles qui fonctionnent sur n’importe quelle taille d’écran.

Dans Flexbox ou le système Bootstrap Grid, le contrôle est en 1 dimension uniquement, c’est-à-dire que la ligne parente ou la ligne flexible est la direction dans laquelle les éléments peuvent être contrôlés, et la distribution de l’espace se fait sur la ligne flexible (la ligne). Ici, chaque nouvelle ligne est une nouvelle ligne flex dans le conteneur flex.

Contrôle 1D dans Flexbox

HTML

<div class="wrapper">
   <div>One</div>
   <div>Two</div>
   <div>Three</div>
   <div>Four</div>
   <div>Five</div>
</div>

CSS

.wrapper {
 width: 500px;
 display: flex;
 flex-wrap: wrap;
}
 
.wrapper>div {
 flex: 1 1 150px;
}

SORTIR

Dans le code ci-dessus, les divs enfants sont ajustées à l’écran en fonction de la taille de l’écran. Si nous réduisons la taille de l’écran, le contenu passera à la ligne flex suivante car nous avons défini le flex-wrap comme « wrap ». Donc, si nous voulons que les éléments s’alignent, alors nous voulons un contrôle dimensionnel 2D, que CSS Grid donne. Ici, nous pouvons dire combien d’éléments max peuvent être présents d’affilée, et ceux-ci ne diminueront pas à mesure que nous pressons l’écran. Cela peut également être contrôlé en utilisant l’option de flux automatique dans CSS Grid.

Contrôle 2D dans CSS Grid

HTML

<div class="wrapper">
   <div>One</div>
   <div>Two</div>
   <div>Three</div>
   <div>Four</div>
   <div>Five</div>
</div>

CSS

.wrapper {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
}

SORTIR

Si nous voulons placer le contenu précisément sur une page, alors CSS Grid est meilleur, mais si nous voulons la flexibilité de la mise en page, alors nous devrions opter pour Bootstrap. Dans Bootstrap, il est difficile de prédire le comportement à certains points d’arrêt ou fenêtres, et l’utilisateur peut finir par obtenir des résultats de mise en page inattendus (c’est peut-être le compromis avec la flexibilité que l’on obtient avec la mise en page Flexbox).

CSS Grid aide également à créer des contenus inhabituels, asymétriques et qui se chevauchent. Nous pouvons certainement utiliser z-index dans Bootstrap pour placer du contenu qui se chevauche. Cependant, il est un peu difficile de contrôler l’asymétrie et le chevauchement des contenus à l’aide de Bootstrap. Dans CSS Grid, nous pouvons contrôler la colonne de début et de fin de chaque contenu qui se chevauche et créer des mises en page spécifiques.

CSS Grid utilise ‘fr’ (unité fractionnaire, une unité d’espace d’écran disponible) pour définir les limites d’espace que chaque élément de ligne de grille doit prendre (comme indiqué dans l’exemple ci-dessus). D’autre part, Bootstrap utilise le système de colonnes dans sa grille pour définir l’espace que chaque colonne occuperait dans une ligne.

Bootstrap peut accueillir un maximum de 12 colonnes d’affilée, et celles-ci peuvent également être combinées selon les fenêtres pour donner un contrôle plus fin à l’expérience de l’utilisateur final. Enfin, nous discuterons d’exemples spécifiques pour rendre les choses plus claires sur le système de grille.

CSS Grid et Bootstrap donnent à l’utilisateur conceptions réactives. Mais CSS Grid n’a pas de points d’arrêt de grille prédéfinis, alors que Bootstrap a des points d’arrêt prédéfinis basés sur les requêtes média de largeur minimale. Cela signifie qu’ils s’appliquent à ce point d’arrêt et à tous ceux au-dessus.

  • Les points d’arrêt réactifs de Bootstrap sont les suivants :
    • Les largeurs < 576 px sont appelées très petites (xs)
    • Largeur >= 576 px comme petit (sm)
    • Largeur >= 768 px comme support (md)
    • Largeur >= 992 px aussi grand (lg)
    • Largeur >= 1200 px en extra large (xl)
  • Les niveaux de grille peuvent être mis à jour (le nombre et la largeur des points d’arrêt) en modifiant les valeurs des propriétés $grid-breakpoints et $container-max-widths dans les fichiers sass de Bootstrap.

Système de colonnes et points d’arrêt de la grille dans Bootstrap

col-* sont utilisés pour les petits écrans supplémentaires
col-sm-* utilisé pour les petits écrans
col-md-* utilisé pour les écrans moyens
col-lg-* utilisé pour les grands écrans
col-xl-* utilisé pour les écrans extra-larges

<div class="row">
   <div class="col-12 col-md-8">.col-12 .col-md-8</div>
   <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<div class="row">
   <div class="col-6 col-md-4">.col-6 .col-md-4</div>
   <div class="col-6 col-md-4">.col-6 .col-md-4</div>
   <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<div class="row">
   <div class="col-6">.col-6</div>
   <div class="col-6">.col-6</div>
</div>

Sortie en écran moyen

Sortie sur petit écran

Dans Bootstrap, la largeur de la colonne est toujours spécifiée en pourcentage par rapport au conteneur flex. Alors que dans CSS Grid, soit le contenu est autorisé à utiliser de l’espace selon ses besoins, soit l’utilisation de ‘fr’ (unité fractionnaire) est utilisée pour contrôler le nombre de colonnes min-max placées dans une ligne.

CSS Grid est généralement utilisé lorsque les calculs pour placer les éléments sur la page sont trop importants dans Flexbox ou Bootstrap. Il peut être appliqué dans des scénarios où nous finissons par utiliser calc() pour contrôler la largeur ou la hauteur des éléments dans les éléments de notre grille Bootstrap. Dans ce cas, nous devrions toujours envisager d’utiliser CSS Grid, principalement parce que CSS Grid nous donne plus de contrôle. Deuxièmement, nous abandonnons la flexibilité des boîtes flexibles si nous contrôlons bien le placement des éléments. CSS Grid nous donne un contrôle plus fin sur les éléments en utilisant des fonctions telles que minmax() et des unités fractionnaires. Les mises en page algorithmiques sont principalement réalisées à l’aide de CSS Grid.

Bootstrap est un framework pour la conception frontale, tandis que CSS Grid est un module natif de CSS, donc aucune importation de module supplémentaire n’est requise pour eux. Cela économise le temps de génération du projet et minimise la taille de l’ensemble. Ainsi, l’utilisation de CSS Grid peut également montrer des gains en termes de vitesse et de temps de réponse du site Web.

Pour atteindre le même objectif ou la même mise en page, nous pourrions finir par écrire plus de balisage dans le cas de Bootstrap par rapport à CSS Grid. Pour rendre la conception réactive et adaptée aux différentes fenêtres, nous devons explicitement prendre en compte les différentes tailles de grille. Dans le cas de CSS Grid, nous pouvons contrôler ce comportement en utilisant des mises en page algorithmiques, qui nécessitent beaucoup moins de code ou de balisage.

CSS Grid vs Bootstrap : similitudes

Outre toutes les différences entre la mise en page CSS Grid et le système de mise en page basé sur Flexbox de Bootstrap, il existe également des similitudes entre elles.

  • Le système nous permet d’ordonner explicitement les éléments de la grille et l’ordre source des éléments de la grille n’a pas d’importance.
  • Nous pouvons utiliser des mots-clés pour justifier-item/self-*, align-item/self-* pour contrôler l’alignement des éléments de la grille dans une ligne et la cellule de la colonne (colonne à l’intérieur de la grille).

CSS Grid vs. Bootstrap : prise en charge et compatibilité du navigateur

Le plus grand obstacle auquel la grille CSS a été confrontée pour gagner en popularité était la faiblesse compatibilité entre navigateurs. Jusqu’en 2017, CSS Grid n’était pris en charge que par Google Chrome et Firefox, tandis qu’Internet Explorer, Microsoft Edge, Opera et même Safari ne prenaient pas en charge le navigateur pour CSS Grid. Cependant, CSS Grid a connu de nouvelles améliorations dans la prise en charge des navigateurs depuis 2017.

Conclusion

Le choix de la mise en page de la grille de votre page Web dépend de la manière dont nous souhaitons que notre contenu ou notre mise en page soit hiérarchisé. Nous pouvons certainement en choisir un pour nos implémentations, mais cela dit, la combinaison de CSS Grid et de Bootstrap peut également aider l’utilisateur à créer des mises en page impressionnantes.

S’il vous plaît laissez-nous savoir dans les commentaires si vous avez des questions ou si vous souhaitez discuter d’un concept en détail.



Source link