Disposition en grille

La disposition en grille CSS3 (Cascading Style Sheets, niveau 3) (« la grille ») est une nouvelle fonctionnalité dans Internet Explorer 10 et les applications du Windows Store en JavaScript. Comme les dispositions Flexbox, les dispositions en grille offrent une plus grande fluidité qu’un positionnement à l’aide d’éléments flottants ou de scripts. Vous pouvez ainsi diviser l’espace des principales régions d’une page Web ou d’une application Web et définir la relation qui existe entre diverses parties d’un contrôle HTML en termes de taille, position et couche.Cela évite de devoir créer une disposition fixe, qui ne peut pas tirer parti de l’espace disponible dans la fenêtre du navigateur.

À l’heure où nous écrivons ce document, la disposition en grille CSS3 est encore au stade de développement. L’implémentation de la disposition en grille CSS3 dans la version préliminaire actuelle est basée sur le module de disposition en grille CSS, qui n’est pour l’instant qu’une ébauche proposée par un membre de W3C (World Wide Web Consortium).

Étant donné qu’une grille vous permet d’aligner des éléments dans des colonnes et des lignes, mais n’a pas de structure de contenu, elle permet aussi des scénarios qui ne sont pas possibles avec des tables HTML. En utilisant la grille en association avec des requêtes de média, vous pouvez autoriser l’adaptation en toute transparence de votre mise en page aux modifications apportées au facteur de forme de l’appareil, à l’orientation, à l’espace disponible et bien plus encore.

Élément de grille

Le bloc de base permettant la création de la disposition en grille est l’élément de grille, qui est déclaré en attribuant à la propriété display d’un élément la valeur -ms-grid (pour un élément de grille sous forme de bloc) ou -ms-inline-grid (pour un élément de grille inséré). (En raison de l’état préliminaire du module Disposition en grille, cette valeur et toutes les propriétés de cette section doivent être utilisées avec le préfixe Microsoft « -ms- » pour fonctionner avec Internet Explorer 10 et les applications du Windows Store en JavaScript dans Windows 8.) Par exemple, l’exemple de code suivant crée une grille dans l’élément dont l’ID est "myGrid" :


<style>
#myGrid {
  display: -ms-grid;
  background: gray;
  border: blue;
}
</style>


Tracés (colonnes et lignes)

Après avoir créé l’élément de grille, appliquez des tailles aux colonnes et aux lignes à l’aide des propriétés suivantes :

PropriétéDescription

-ms-grid-columns

Spécifie la largeur de chaque colonne dans la grille. Chaque colonne est délimitée par un espace.

-ms-grid-rows

Spécifie la hauteur de chaque ligne dans la grille. Chaque ligne est délimitée par un espace.

 

Vous pouvez dimensionner les colonnes et les lignes (collectivement appelées tracés) en utilisant les éléments suivants :

  • les unités de longueur standard ou un pourcentage de la largeur de l’objet (pour les colonnes) ou de sa hauteur (pour les lignes)
  • le mot clé auto, qui indique que la largeur de la colonne ou la hauteur de la ligne est définie en fonction des éléments qu’elle contient
  • le mot clé min-content, qui indique la largeur ou la hauteur minimale des éléments enfants et est utilisé comme largeur ou hauteur
  • le mot clé max-content, qui indique la largeur ou la hauteur maximale des éléments enfants et est utilisé comme largeur ou hauteur
  • le mot clé minmax(a, b), qui indique que la largeur ou la hauteur est comprise entre a et b en fonction de l’espace disponible
  • les unités de fraction (fr), qui indiquent que l’espace disponible doit être réparti entre les colonnes ou les lignes en fonction de leurs valeurs de fraction, comme illustré dans l’exemple suivant
Pour obtenir un exemple des unités de fraction, considérons la version étendue suivante du sélecteur d’ID "myGrid"  :

<style>
#myGrid {
  display: -ms-grid;
  background: gray;
  border: blue;
  -ms-grid-columns: auto 100px 1fr 2fr;
  -ms-grid-rows: 50px 5em auto;
}
</style>


Cette grille comporte quatre colonnes et chaque colonne apparaît comme il est décrit ici :

  • Colonne 1 (mot clé auto) : la colonne est dimensionnée selon son contenu.
  • Colonne 2 ("100px") : la largeur de la colonne est 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.

Étant donné qu’il y a trois unités de fraction dans cette grille, 1 unité de fraction divisée par 3 unités de fraction—ou 1/3—de l’espace restant, est alloué à la colonne 3. 2/3 de l’espace restant sont alloués à la colonne 4.

De même, cette grille comporte trois lignes et chaque ligne apparaît comme il est décrit ici :

  • Ligne 1 ("50px") : la hauteur de la ligne est de 50 pixels.
  • Ligne 2 ("5em") : la hauteur de la ligne est de 5 ems.
  • Colonne 3 (mot clé auto) : la colonne est dimensionnée selon son contenu.

Tracés de grille répétitifs

Si un grand nombre de colonnes ou de lignes sont identiques ou se répètent, une syntaxe de répétition peut être appliquée pour définir les colonnes ou les lignes dans un format plus compact. Les deux exemples suivants sont équivalents. Il y a une ligne et des tracés de colonne qui se répètent : une colonne de 250px suivie d’une marge de 10px.


<style type="text/css">
  #grid {
    display: -ms-grid;
    -ms-grid-columns: 10px 250px 10px 250px 10px 250px 10px 250px 10px;
    -ms-grid-rows: 1fr;
  }	

  /* Equivalent definition. */
  #grid {
    display: -ms-grid;
    -ms-grid-columns: 10px (250px 10px)[4];
    -ms-grid-rows: 1fr;
  }
</style>


Éléments de la grille

Les éléments enfants de la grille sont appelés éléments de grille. Leur positionnement s’effectue à l’aide des propriétés suivantes :

PropriétéDescription

-ms-grid-column

Indique dans quelle colonne de la grille l’élément de grille doit être placé.

-ms-grid-row

Indique dans quelle ligne de la grille l’élément de grille doit être placé.

 

Le système de numérotation des tracés est un index basé sur 1, 1 étant la valeur par défaut. Avec la grille déclarée précédemment, considérons les deux sélecteurs d’ID suivants :


#item1 {
  background: maroon;
  border: orange solid 1px;
  -ms-grid-row: 1;
  -ms-grid-column: 1;
}
#item2 {
  background: lightgray;
  border: red solid 1px;
  -ms-grid-row: 2;
  -ms-grid-column: 2;
}

Appliquons ces sélecteurs au balisage suivant :


<div id="myGrid">
  <div id="item1">Item 1</div>
  <div id="item2">Item 2</div>
</div>


Vous pouvez afficher cette page. (Internet Explorer 10 est nécessaire pour que cette page soit rendue correctement.)

Exemple d’éléments de grille

Alignement des éléments de grille

Vous pouvez positionner les éléments de grille le long des bords des cellules formées par les colonnes et les lignes sur lesquels ils s’étendent à l’aide des propriétés suivantes :

PropriétéDescription

-ms-grid-column-align

Spécifie l’alignement horizontal de l’élément de grille dans la colonne. Les valeurs possibles sont center, end, start et stretch.

-ms-grid-row-align

Spécifie l’alignement vertical de l’élément de grille dans la ligne. Les valeurs possibles sont center, end, start et stretch.

 

Modifiez le sélecteur "item2" comme suit (en ajoutant les quatre dernières lignes) :


#item2 {
  background: lightgray;
  border: red solid 1px;
  -ms-grid-row: 2;
  -ms-grid-column: 2;
  width: 40px;
  height: 30px;
  -ms-grid-column-align: end;
  -ms-grid-row-align: center;
}

En outre, ajoutez le sélecteur suivant :


#item3 {
  background: orange;
  border: maroon solid 1px;
  -ms-grid-row: 3;
  -ms-grid-column: 3;
}

Appliquons ces sélecteurs au balisage suivant :


<div id="myGrid">
  <div id="item1">Item 1</div>
  <div id="item2">Item 2</div>
  <div id="item3">Item 3</div>
</div>


Vous pouvez afficher cette page. (Internet Explorer 10 est nécessaire pour que cette page soit rendue correctement.)

Exemple d’alignement et de positionnement dans une grille

Empilement des éléments de grille

Vous pouvez empiler des éléments en les plaçant dans les mêmes colonnes ou lignes. Par défaut, un élément qui vient ensuite dans le balisage apparaît sur les éléments qui le précèdent.

Pour le démontrer, il suffit de changer le sélecteur pour l’élément 3 afin que celui-ci soit placé dans la colonne 2 et la ligne 2, qui est l’emplacement de l’élément 2 :


#item3 {
  background: orange;
  border: maroon solid 1px;
  -ms-grid-row: 2;
  -ms-grid-column: 2;
}

Étant donné que le div pour l’élément 3 vient après le div pour l’élément 2, l’élément 3 apparaît sur l’élément 2. Vous pouvez afficher cette page. (Internet Explorer 10 est nécessaire pour que cette page soit rendue correctement.)

Exemple d’empilement de grille

Pour remplacer ce comportement par défaut, utilisez la propriété z-index :

PropriétéDescription

z-index

Spécifie la couche (index z) de l’élément dans la cellule.

 

Tandis que la propriété z-index ne s’applique normalement qu’aux objets dont la propriété position n’a pas la valeur static, la propriété z-index s’applique aux éléments de grille même lorsque la propriété position a la valeur static.

Dans le sélecteur pour l’élément 3, attribuez la valeur "-1" à la propriété z-index pour replacer cet élément dans l’ordre d’empilement :


#item3 {
  background: orange;
  border: maroon solid 1px;
  -ms-grid-row: 2;
  -ms-grid-column: 2;
  z-index: -1;
}

Internet Explorer 10 place alors l’élément 2 sur l’élément 3. Vous pouvez afficher cette page. (Internet Explorer 10 est nécessaire pour que cette page soit rendue correctement.)

Étendue des éléments de grille

Vous pouvez faire en sorte que les éléments s’étendent sur plusieurs colonnes ou lignes à l’aide des deux propriétés suivantes :

PropriétéDescription

-ms-grid-column-span

Spécifie le nombre de colonnes de la grille sur lesquels l’élément peut s’étendre. La valeur par défaut est "1".

-ms-grid-row-span

Spécifie le nombre de lignes de la grille sur lesquels l’élément peut s’étendre. La valeur par défaut est "1".

 

Dans le sélecteur pour l’élément 3, attribuez la valeur "4" à la propriété -ms-grid-column-span (et attribuez à la propriété -ms-grid-column la valeur "1") pour que l’élément s’étende sur quatre colonnes (toutes les colonnes) :


#item3 {
  background: orange;
  border: maroon solid 1px;
  -ms-grid-row: 2;
  -ms-grid-column: 1;
  z-index: -1;
  -ms-grid-column-span: 4;
}

Vous pouvez afficher cette page. (Internet Explorer 10 est nécessaire pour que cette page soit rendue correctement.)

Notez que si vous tentez d’étendre l’élément au-delà du nombre de colonnes ou de lignes définies dans la grille (par exemple, dans l’exemple précédent, si vous conservez la valeur "2" pour la propriété -ms-grid-column et attribuez à la propriété -ms-grid-column-span la valeur "4", vous dépassez le nombre de colonnes définies par 1), une autre colonne ou ligne est implicitement créée et sa largeur ou hauteur est définie sur auto (dimensionnement automatique par rapport au contenu) pour chaque colonne ou ligne au-delà du nombre défini.

Informations de référence sur les API

Grid Layout

Exemples et didacticiels

Exemple de superposition de grilles CSS
Comment créer une disposition adaptative avec une grille CSS
Concevoir des sites Web adaptatifs

Démonstrations du site Internet Explorer Test Drive

Hand On: CSS3 Grid Layout
The Grid System
Gridddle

Billets IEBlog

Aperçu de la plateforme IE10 et fonctionnalités CSS pour les dispositions adaptatives

Spécification

CSS Grid Layout

 

 

Afficher:
© 2014 Microsoft