Une brève discussion sur les raisons pour lesquelles la grille CSS est plus adaptée à la création de mises en page que Bootstrap

Pourquoi CSS Grid est-il plus adapté à la mise en page que Bootstrap ? Cet article vous présentera les raisons. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

CSS Grid est une toute nouvelle façon de créer des mises en page. C'est la première fois qu'un système de mise en page approprié est développé, et il est natif du navigateur. nous donne A apporté de nombreux avantages.

Lorsque vous le comparez au framework Bootstrap le plus populaire d'aujourd'hui, les avantages de la grille deviennent particulièrement clairs. Non seulement vous pouvez créer des mises en page qui étaient auparavant irréalisables sans l'introduction de JavaScript, mais votre code sera plus facile à réaliser. maintenir et comprendre.

【Recommandations associées : "tutoriel vidéo CSS" "tutoriel bootstrap》】

Dans cet article, je vais vous expliquer pourquoi. Les balises

seront plus propres

Par rapport à Bootstrap, l'utilisation de la grille rendra votre HTML plus propre Bien que ce ne soit pas l'avantage le plus important, c'est peut-être le premier. chose que vous remarquez.

Pour illustrer, j'ai créé une mise en page afin que l'on puisse comparer le code requis pour les deux versions.

Remarque : je l'ai un peu conçu dans l'exemple donné, mais cela n'a rien à voir avec notre comparaison Bootstrap, je ne garde donc que la mise en page part Le CSS de

Bootstrap

examine d'abord les balises Bootstrap qui doivent être créées.

Il y a deux choses à noter ici :

• Chaque ligne nécessite une balise <div> <li>Utiliser nom de classe pour spécifier la mise en page (<code>col-xs-2)

À mesure que la complexité de cette mise en page augmente, le HTML augmente également.

S'il s'agissait d'un site Web réactif, cela aurait l'air plus compliqué :




Voyons maintenant l'utilisation de la disposition en grille :



Je pourrais utiliser des éléments sémantiques ici, mais j'utilise toujours div pour contraster avec Bootstrap.

De toute évidence, la disposition de la grille semble plus simple. Finis les noms de classe laids et les balises div supplémentaires requises pour chaque ligne. Il s'agit simplement d'un conteneur et des éléments à l'intérieur.

est différent de Bootstrap en ce sens qu'à mesure que la complexité de la mise en page augmente, la complexité de la balise de mise en page Grid n'augmentera pas beaucoup.

BootstrapL'exemple n'a pas besoin d'ajouter de CSS, il suffit de le citer. CSS GridDoit absolument être ajouté. Plus précisément, c'est comme ceci :




Cela peut être un argument que certaines personnes avancent en faveur de Bootstrap : vous n'avez pas besoin de vous soucier du CSS, juste définissez-le dans la mise en page HTML. Mais, comme vous l’aurez compris, le couplage entre étiquette et mise en page peut devenir un gros problème en matière de flexibilité.

Plus flexible

Supposons que vous souhaitiez modifier la mise en page en fonction de la taille de l'écran. Par exemple, tirez le menu vers la rangée supérieure pour l'afficher sur les appareils mobiles.

En d'autres termes, la mise en page passe de ceci :



à ceci :



Grille CSS

C'est très simple à utiliser CSS Grid, il suffit d'ajouter un media query, et la mise en page devient ce que vous voulez comme par magie.



Vous pouvez réorganiser la mise en page ainsi sans vous soucier de l'ordre d'écriture des balises HTML, ce qui est un grand avantage pour les développeurs et les concepteurs !

BootStrap

Si vous souhaitez faire la même chose dans Bootstrap, vous devez modifier le code HTML et ajuster l'ordre des balises.



Pour cette exigence, il ne suffit pas d'utiliser MediaQuery, vous devez également utiliser JavaScript.

Cet exemple est le plus grand avantage de la grille que j'ai expérimenté

N'est plus limité à 12 colonnes

C'est pas un gros problème, mais ce problème m'a dérangé plusieurs fois, car le système de grille de Bootstrap est divisé en 12 colonnes, si vous voulez une mise en page à 5 colonnes, vous serez emmêlé, ou 7 colonnes, 9 colonnes, ou autre chose. Convergé en 12 colonnes.

CSS Grid Il n'y a pas de limite, vous pouvez faire en sorte que la grille corresponde exactement au nombre que vous souhaitez. Il s'agit d'une grille à 7 colonnes :



est obtenue en réglant grid-template-columns : repeat(7, 1fr), comme ceci :



Prise en charge des navigateurs

Bien sûr, la prise en charge des navigateurs doit être discutée, au moment de la rédaction, 75 % du trafic mondial des sites Web prend en charge CSS Grid



CSS Grid est un module de mise en page qui nous permet de modifier la mise en page du document sans perturber l'ordre des balises. Autrement dit, la grille CSS est un outil purement visuel qui, lorsqu’il est utilisé correctement, ne devrait avoir aucun impact sur l’expression du contenu du document. Donc : le manque de prise en charge de CSS Grid dans les anciens navigateurs n’affecte pas l’expérience du visiteur, cela rend simplement l’expérience différente.

Adresse originale : https://hackernoon.com/how-css-grid-beats-bootstrap-85d5881cf163

Pour plus de connaissances liées à la programmation, veuillez visiter : Vidéo de programmation ! !