CSS
la grille
Recherche…
Introduction
La disposition de grille est un nouveau et puissant système de mise en page CSS qui permet de diviser facilement un contenu de page Web en lignes et en colonnes.
Remarques
Le niveau 1 du module CSS Grid Layout est, depuis le 9 septembre 2016, une recommandation candidate W3C. Il est considéré comme étant en phase de test ( https://www.w3.org/Style/CSS/current-work) .
À compter du 3 juillet 2017, les navigateurs Internet Explorer 10 et 11 et Edge de Microsoft ne prennent en charge qu'une version antérieure de la spécification utilisant un préfixe de fournisseur.
Exemple de base
| Propriété | Valeurs possibles |
|---|---|
| afficher | grille / grille en ligne |
La grille CSS est définie comme une propriété d'affichage. Elle s'applique uniquement à un élément parent et à ses enfants immédiats.
Considérez le balisage suivant:
<section class="container">
<div class="item1">item1</div>
<div class="item2">item2</div>
<div class="item3">item3</div>
<div class="item4">item4</div>
</section>
Le moyen le plus simple de définir la structure de balisage ci-dessus en tant que grille consiste à définir simplement sa propriété display sur grid :
.container {
display: grid;
}
Cependant, cela entraînera invariablement tous les éléments enfants à s'effondrer les uns sur les autres. C'est parce que les enfants ne savent pas actuellement comment se positionner dans la grille. Mais on peut leur dire explicitement.
Nous devons d'abord indiquer à l'élément de grille .container le nombre de lignes et de colonnes qui constitueront sa structure et nous pouvons le faire en utilisant les propriétés grid-columns et grid-rows (notez la pluralisation):
.container {
display: grid;
grid-columns: 50px 50px 50px;
grid-rows: 50px 50px;
}
Cependant, cela ne nous aide toujours pas beaucoup car nous devons donner un ordre à chaque élément enfant. Nous pouvons le faire en spécifiant les valeurs de grid-row grid-column et grid-column qui lui indiqueront où il se trouve dans la grille:
.container .item1 {
grid-column: 1;
grid-row: 1;
}
.container .item2 {
grid-column: 2;
grid-row: 1;
}
.container .item3 {
grid-column: 1;
grid-row: 2;
}
.container .item4 {
grid-column: 2;
grid-row: 2;
}
En attribuant à chaque élément une valeur de colonne et de ligne, il identifie l'ordre des articles dans le conteneur.
Voir un exemple de travail sur JSFiddle . Vous aurez besoin de voir ce dans IE10, IE11 ou bord pour que cela fonctionne car ce sont actuellement les seuls navigateurs supportant la mise en page Grille (avec préfixe fournisseur -ms- ) ou d' activer un drapeau dans Chrome, Opera et Firefox selon caniuse pour pour tester avec eux.