Accentsconagua
Share
La manière dont nous abordons la présentation sur le Web est en train de changer, et CSS Grid Layout est à la pointe de ce changement. Ce guide de démarrage rapide mis à jour omettra les détails et les nuances au lieu de vous aider à rester coincé, maintenant.
CSS Grid Layout (connu sous le nom de "Grid" pour ses amis) a fait des pas de géant au cours de la dernière année et, en tant que tel, vous trouverez un support solide pour le navigateur, de nos jours..
caniuse.comLa grille nous permet d'organiser des éléments sur une page, en fonction des régions créées par les guides.
Au plus simple de ces guides, ou lignes de la grille, cadre horizontal et vertical pistes de la grille. Les pistes de grille servent de rangées et des colonnes, avec gouttières courir entre eux. Là où les pistes horizontales et verticales se croisent, il nous reste cellules, un peu comme nous utilisons avec des tables. Ce sont tous des termes importants à comprendre.
Dans l'image ci-dessous, vous verrez une grille de démonstration montrant:
Une grille de base, mettant en évidence les lignes, les colonnes, les lignes et les cellules de la grillePour une mise en page graphique, cela peut sembler plus familier si nous utilisons exactement la même grille, mais en séparant certaines pistes pour nous laisser des gouttières entre les zones de contenu..
Même grille, mais cette fois-ci avec une ressemblance frappante avec le drapeau finlandaisAvant de passer à autre chose, nous devons clarifier un dernier terme:
Une des nombreuses zones possibles de notre grille de démonstrationUNE zone de la grille Toute partie de notre réseau est-elle clôturée par quatre lignes de réseau? il peut comprendre un nombre quelconque de cellules de grille.
Il est temps de construire cette grille dans le navigateur! Commençons par du balisage.
Pour recréer la grille ci-dessus, nous avons besoin d'un élément conteneur; tout ce que tu aimes:
Dans ce document, nous allons placer neuf éléments enfants.
Fourchez ce stylo de démarrage si vous voulez suivre. J'ai ajouté quelques styles de base pour différencier visuellement chaque élément de la grille.
Tout d’abord, nous devons déclarer que notre élément de conteneur est une grille utilisant une nouvelle valeur pour le paramètre. afficher propriété:
.grid-1 display: grid;
Bon, c'était facile. Nous devons ensuite définir notre grille, en indiquant le nombre de pistes qu’elle aura, horizontalement et verticalement. Nous faisons cela avec le Grille-modèle-colonnes et grid-template-rows Propriétés:
.grid-1 display: grid; grid-template-columns: 150px 150px 150px; grid-template-rows: auto auto auto;
Vous remarquerez trois valeurs pour chacun. Les valeurs pour Grille-modèle-colonnes déclarez que «les trois colonnes doivent avoir une largeur de 150 pixels». Les trois valeurs pour grid-template-rows indiquer quelque chose de similaire. Chacun serait réellement auto par défaut, en prenant de la hauteur par rapport au contenu, mais nous les avons indiqués ici afin de visualiser clairement ce qui se passe.
Alors qu'est-ce qu'on a maintenant?
Chacun de nos articles a été automatiquement assigné une zone de la grille dans l'ordre chronologique. C'est pas mal, mais il manque des gouttières. Il est temps de régler ça.
Grid est livré avec une solution spécialement conçue pour déclarer les mesures de gouttière. On peut utiliser grille-colonne-gap et gap-row-gap, ou la sténographie fossé propriété.
Ajoutons une gouttière fixe de 20px à notre .grille-1 élément.
.grid-1 display: grid; grid-template-columns: 150px 150px 150px; grid-template-rows: auto auto auto; intervalle de grille: 20px;
Et maintenant, il nous reste une belle grille bien ordonnée:
Ça y est, vous êtes opérationnel avec Grid! Récapitulons les quatre étapes essentielles:
affichage: grille;.Grille-modèle-colonnes et grid-template-rows Propriétés.fossé Propriétés.Dans la prochaine partie de cette série, nous examinerons de plus près la syntaxe de Grid, explorerons les schémas de configuration flexibles, fr unité, le répéter() fonctionner, et prendre notre grille simple beaucoup plus loin. On se voit là-bas!
