Guide de mise en page de grille CSS Fr Unit
le Module de disposition de grille CSS a été expédié avec un nouvelle unité CSS appelé le fr unité. Aussi simple que cela puisse être, fr est le abréviation du mot “fraction”. La nouvelle unité permet de découper rapidement la grille en colonnes ou en rangées proportionnelles. En conséquence, la création de des grilles totalement réactives et flexibles devient presque une brise.
Comme l’unité fraction a été introduite avec le module Grid Layout, vous pouvez l’utiliser dans n’importe quel navigateur supporte la grille CSS. Si vous souhaitez également prendre en charge les anciens navigateurs, voici un excellent Polyfill de grille CSS cela vous permet d'utiliser non seulement le fr unité, mais d'autres caractéristiques de la grille, ainsi.
Utilisation de base
D'abord, regardons un grille de base qui utilise l'unité de fraction. La disposition ci-dessous divise l’espace en trois colonnes d'égale largeur et deux rangées d'égale hauteur.
Le HTML d'appartenance est composé de six divs marqué avec le .boîte classe, à l'intérieur d'un .emballage div.
1.2.3.4.5.6.
Pour utiliser le module Grid Layout, vous devez ajouter le affichage: grille; Propriété CSS pour le wrapper. le Grille-modèle-colonnes la propriété utilise le fr unité en tant que valeur; la le rapport des trois colonnes est 1: 1: 1.
Pour les lignes de la grille (grid-template-rows propriété), je n’ai pas utilisé le fr unité, car cela n'a de sens que si l'emballage a une hauteur fixe. Sinon, cela peut produire des résultats étranges sur certains appareils. Cependant, même dans ce cas, le fr unité maintient le ratio (et c'est énorme).
le fossé propriété ajoute une grille de 10px entre les cases. Si vous ne voulez pas d'espace, supprimez cette propriété.
.wrapper display: grid; Grille-modèle-colonnes: 1fr 1fr 1fr; grid-template-rows: 200px 200px; intervalle de grille: 10 px; .box color: white; text-align: center; taille de police: 30px; rembourrage: 25px;
Notez que le CSS ci-dessus ne contient pas de style de base tel que les couleurs d’arrière-plan. Vous pouvez retrouvez le code complet dans la démo à la fin de l'article.
Changer le ratio
Bien sûr, vous ne pouvez pas utiliser seulement 1: 1: 1 mais tout rapport que vous voulez. Ci-dessous, j'ai utilisé Fractions 1: 2: 1 qui divise également l'espace en trois colonnes mais la colonne du milieu sera deux fois plus large comme les deux autres.
J'ai aussi augmenté la valeur de fossé afin que vous puissiez voir comment cela change la mise en page. Fondamentalement, le navigateur déduit l'écart de grille de la largeur de la fenêtre (dans cet exemple, les écarts de grille s’ajoutent à 80 px), et tranche le reste selon les fractions données.
.wrapper display: grid; Grille-modèle-colonnes: 1fr 2fr 1fr; grid-template-rows: 200px 200px; intervalle de grille: 40 px;
Combiner fr avec d'autres unités CSS
Vous pouvez combiner la fr unité avec toute autre unité CSS ainsi que. Par exemple, dans l'exemple ci-dessous, j'ai utilisé le 60% 1fr 2fr ratio pour ma grille.
Donc comment ça fonctionne? le navigateur assigne les 60% de la largeur de la fenêtre à la première colonne. Ensuite, il divise le reste de l’espace en fractions 1: 2..
La même chose pourrait aussi être écrite comme 60% 13,33333% 26,66667%. Mais franchement, pourquoi quelqu'un voudrait-il utiliser ce format? Un énorme avantage de l'unité de fraction est qu'il améliore la lisibilité du code. De plus, c'est complètement précis, comme le pourcentage correspond toujours à 99,9999%.
.wrapper display: grid; Grille-modèle-colonnes: 60% 1fr 2fr; grid-template-rows: 200px 200px; intervalle de grille: 10 px;
En dehors des pourcentages, vous pouvez également utiliser d'autres unités CSS en même temps que l'unité de fraction, par exemple pt, px, em, et rem.
Ajouter des espaces avec fr
Et si vous ne voulez pas que votre conception soit encombrée et ajouter des espaces à votre grille? L'unité fraction a également une solution facile pour cela.
Comme vous pouvez le voir, cette grille a une colonne vide alors qu'il conserve toujours les six cases. Pour cette mise en page, nous devons découper l'espace en quatre colonnes au lieu de trois. Donc, nous utilisons le 1fr 1fr 1fr 1fr valeur pour le Grille-modèle-colonnes propriété.
Nous ajoutons la colonne vide à l'intérieur du grille-template-zones propriété, en utilisant le notation par points. Fondamentalement, cette propriété vous permet de référence des zones de grille nommées. Et, vous pouvez nommer des zones de la grille avec le surface de la grille propriété que vous devez utiliser séparément pour chaque domaine.
.wrapper display: grid; Grille-modèle-colonnes: 1fr 1fr 1fr 1fr; grid-template-rows: 200px 200px; intervalle de grille: 10 px; grid-template-areas: "box-1 box-2. box-3" "box-4 box-5. box-6"; .box-1 grid-area: box-1; .box-2 grid-area: box-2; .box-3 grid-area: box-3; .box-4 grid-area: box-4; .box-5 grid-area: box-5; .box-6 grid-area: box-6;
Les espaces blancs ne doit pas nécessairement former une colonne, ils peut être n'importe où dans la grille.
le répéter() une fonction
Vous pouvez également utiliser le fr unité avec la répéter() une fonction pour un syntaxe plus simple. , cela n’est pas nécessaire si vous n’avez qu’une simple grille mais que vous pouvez vous en servir quand vous le souhaitez. implémenter une mise en page compliquée, par exemple un grille imbriquée.
.wrapper display: grid; Grille-modèle-colonnes: répéter (3, 1fr); / * grid-template-columns: 1fr 1fr 1fr; * / grid-template-rows: 200px; intervalle de grille: 10 px;
le répéter (3, 1fr) syntaxe résultats dans la même mise en page comme 1fr 1fr 1fr. La mise en page ci-dessous est identique à celle du premier exemple.
Si vous augmenter le multiplicateur à l'intérieur de répéter() fonction, vous aurez plus de colonnes. Par exemple, répéter (6, 1fr) résulte en six colonnes égales. Dans ce cas, toutes nos boîtes sera dans la même rangée, ce qui signifie qu’il suffit d’utiliser une seule valeur (200px) pour la grid-template-rows propriété.
.wrapper display: grid; Grille-modèle-colonnes: répéter (6, 1fr); grid-template-rows: 200px; intervalle de grille: 10 px;
Vous pouvez utiliser répéter() plus d'une fois. Par exemple, l’exemple suivant donne une grille dans laquelle les trois dernières colonnes sont deux fois plus large comme les trois premiers.
.wrapper display: grid; Grille-modèle-colonnes: répéter (3, 1fr) répéter (3, 2fr); grid-template-rows: 200px; intervalle de grille: 10 px;
Vous pouvez également combiner répéter() avec d'autres unités CSS. Par exemple, vous pouvez utiliser Répétition de 200px (4, 1fr) 200px comme code valide.
Si vous êtes intéressé par comment créer des mises en page complexes avec le module CSS Grid, le répéter() fonction et la fr unité Rachel Andrew a un article de blog intéressant sur la façon dont vous pouvez le faire.
Une démo pour expérimenter
finalement, voici la démo que j'ai promise. Il utilise le même code que le premier exemple de cet article. Branchez-le et voyez ce que vous pouvez réaliser avec le fr unité.
