Grille-modèle-colonnes / grille-modèle-lignes - Astuces CSS

Les propriétés grid-template-rowset grid-template-columnssont les principales propriétés CSS pour établir une disposition de grille, une fois que l'élément est un contexte de grille ( display: grid;).

Il existe également -ms-grid-columnset -ms-grid-rows, qui sont l'ancienne version d'IE. Vous voudrez peut-être envisager le préfixe automatique pour obtenir ou non votre appel. Il y avait aussi une période étrange où ils étaient grid-definition-columnset grid-definition-rows, mais ce n'est plus une chose.

Voici un exemple dérivé de la documentation de Microsoft:

.grid ( display: grid; grid-template-columns: auto 100px 1fr 2fr; grid-template-rows: 50px 5em min-content auto; )

Cela définit le nombre de lignes / colonnes dans la grille ainsi que leur dimension.

Ces deux propriétés prennent en charge une liste de valeurs séparées par des espaces. Chaque valeur définira une nouvelle colonne / ligne en définissant une dimension. Une liste de 4 valeurs donnera 4 colonnes / lignes. Une seule valeur produira une seule colonne / ligne.

Valeurs acceptées comprennent la longueur (comme pxou em), les pourcentages, les fractions ( fr; voir ci - dessous), auto(ou fit-content), min-content, max-content, et minmax(), ou de la repeat()fonction.

Dans l'exemple de code ci-dessus, cela signifie:

Colonne 1 ( mot - clé auto ): la colonne est adaptée au contenu de la colonne.
Colonne 2 («100px»): la colonne a une largeur de 100 pixels.
Colonne 3 («1fr»): La colonne occupe une unité de fraction de l'espace restant.
Colonne 4 («2fr»): La colonne occupe deux unités de fraction de l'espace restant.

Ligne 1 («50px»): la ligne mesure 50 pixels de haut.
Rangée 2 («5em»): la rangée mesure 5 cm.
Ligne 3 ( mot - clé min-content ): La ligne est aussi petite que le contenu le permet.
Ligne 4 ( mot - clé auto ): la ligne est adaptée au contenu de la ligne.

répéter()

La repeat()fonction a été spécialement conçue pour ce module. Il vous permet de définir un motif répété X fois. Comme repeat(6, 1fr);. Disons que vous voulez faire 12 colonnes de même largeur espacées les unes des autres par une marge de 1%; vous pourriez définir 1fr repeat(11, 1% 1fr). C'est la même chose que 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr 1% 1fr.

L'unité fr

L' frunité peut être utilisée pour des valeurs grid-rowset grid-columns. Il signifie «fraction de l'espace disponible». Considérez-le comme des pourcentages d'espace disponible lorsque vous avez supprimé des colonnes / lignes de taille fixe et basées sur le contenu. Comme le dit la spécification:

La distribution de l'espace fractionnaire se produit une fois que toutes les tailles de ligne et de colonne basées sur la longueur ou le contenu ont atteint leur maximum.

En rapport

Notre meilleure ressource pour tout ce qui concerne la grille CSS est notre guide complet de la grille CSS.

Prise en charge du navigateur

Ces données de support de navigateur proviennent de Caniuse, qui contient plus de détails. Un nombre indique que le navigateur prend en charge la fonctionnalité dans cette version et plus.