Share
Dans ce tutoriel, nous allons prendre la grille de notre précédent tutoriel et l'utiliser comme un terrain de jeu pour approfondir la réflexion sur Grid. Nous améliorerons la manière dont nous définissons nos gouttières, explorons les schémas flexibles, la fr unité et présenter le répéter() une fonction.
Le but de Grid est de nous permettre de contrôler correctement la mise en page sur le Web. Nous allons donc fluidifier notre grille statique avant d'aller plus loin. Si vous vous rappelez, nous définissions notre grille avec des mesures de pixels statiques:
grid-template-columns: 150px 150px 150px; grid-template-rows: auto auto auto; intervalle de grille: 20px;
Il est tout à fait possible d’utiliser d’autres unités ici, comme ems ou rems par exemple. Ou même des unités plus inhabituelles comme vh et vmin.
Dans ce cas, nous allons changer nos unités de pixels pour les pourcentages.
Grille-modèle-colonnes: 33,33% 33,33% 33,33%;
Hmm, c'est un peu brouillon, mais ça fait un peu le boulot. Vous remarquerez que la largeur des colonnes s’élève maintenant à 100%; nos gouttières en seront automatiquement déduites. fossé acceptera les unités fixes ou flexibles, ce qui signifie que nous pouvons combiner à la perfection les colonnes de fluide et les gouttières fixes sans calculs complexes de notre part.
Écrivons ceci est une manière plus ordonnée, en utilisant le répéter() une fonction:
Grille-modèle-colonnes: répéter (3, 33,33%);
Cela dit “Répéter 33,33% trois fois” nous donnant trois colonnes. Et nous ne même pas avoir besoin la grid-template-rows déclaration parce que le auto la valeur est assignée quand même par défaut.
Remarque: quand les colonnes sont définies en utilisant% value, elles utiliseront exactement ces valeurs et ajouteront fossé en haut. Vous remarquerez que la grille ci-dessus a été poussée vers la droite car elle est maintenant large à 99,99% plus les lacunes.
Une dernière amélioration peut être apportée à notre grille simple et elle résoudra le problème de largeur que nous venons de mentionner; nous allons présenter le fr, ou fraction unité. Une seule unité fr décrit “Un morceau de tous les morceaux dans lesquels nous divisons cela”. Par exemple, nous pourrions déclarer nos colonnes en utilisant:
Grille-modèle-colonnes: 1fr 1fr 1fr;
Ici, il y a un total de trois unités fr, donc chaque colonne aura un tiers de largeur. Voici un autre exemple:
Grille-modèle-colonnes: 2fr 1fr 1fr
Maintenant, il y a un total de quatre unités fr, de sorte que la première colonne occupe la moitié de la largeur disponible, les deux autres colonnes représentant chacune un quart..
Ces unités sont vraiment puissantes, surtout en combinaison avec d’autres unités de mesure:
Grille-modèle-colonnes: 300px 1fr 3fr 20%;
Ici, nous avons déclaré quatre colonnes:
Cela ressemble à ceci: il met parfaitement en évidence le placement automatique alors que nos neuf éléments se déplacent pour combler les lacunes:
Mais revenons à notre grille d'origine. Remplaçons la valeur 33.33% maladroite et inexacte par 1fr:
Grille-modèle-colonnes: répéter (3, 1fr);
Stylo fini:
Donc, pour récapituler:
Accentsconagua
répéter() la fonction nous fera gagner du temps et maintiendra nos feuilles de style maintenables.Nous avons parcouru un long chemin en seulement deux tutoriels, mais vous êtes maintenant le fier propriétaire d'une grille très soignée et concise! Dans le prochain tutoriel, nous allons explorer les zones de la grille, en regardant les envergure mot clé et quelques mises en page pratiques.
fr unité sur W3C