Grilles CSS

> Le module CSS Grid layout (modèle de disposition en grille) est un module de la spécification CSS qui permet de créer des mises en page en divisant l'espace d'affichage en régions utilisables par une application ou en définissant des relations de taille, position et d'empilement entre les éléments HTML.

> Comme les tableaux, la grille permet d'aligner des éléments sous forme de colonnes et de lignes mais à la différence des tableaux, la grille n'a pas de structure de contenu. Ainsi, on peut créer de nombreuses mises en page qui n'auraient pas été possibles avec les tableaux. Ainsi, les éléments fils d'un conteneur en grille peuvent être positionnés afin qu'ils se chevauchent ou qu'ils se comportent comme des éléments positionnés.

source https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Grid_Layout

pages maintenant

• cours interactif amorcé le 2018-008 et 2018-009

1. Aperçu

- Un système de grille CSS à deux dimensions - Utilisé pour mettre en page les grands blocs de pages ou petits éléments de l'interface-utilisateur - La grille est une spécification puissante et peut se combiner à d'autres parties CSS telles que flexbox. Elle peut vous aider à créer des mises en page qui auraient été précédemment impossibles à bâtir en CSS. Tout commence par la création d'une grille sur votre conteneur `display: grid`

Layout

Une grille est un ensemble de lignes horizontales et verticales

• colonnes et lignes
• les éléments peuvent être placés sur la grille

Définitions

Pour travailler avec une grille, vous devez définir un conteneur. Créez-le avec :

   #container {
       display: grid;
   }

   <main id="container">

A

B

C

D

E

F

   </main>

item / enfant

Tout descendant/enfant d'un conteneur grid

   <main id="container">

A

B

pas un enfant de la grille

D

E

F

   </main>

lignes de grille

• n'importe laquelle des lignes de la grille


Il faut noter qu'on définit les pistes d'une grille et non pas les lignes qui en résultent. La grille génère des lignes numérotées que l'on utilise pour positionner les éléments. Dans cette grille de 3 colonnes et 2 rangées, nous avons quatre lignes de colonnes.


piste

• une rangée ou une colonne
• fixe ou blexible
• px, %, fr


cellule

• une cellule unique dans la grille


zone

• une zone sur la grille

Un élément peut s'étendre sur plusieurs cellules d'une rangée ou d'une colonne, et cela crée une zone. Les zones doivent être rectangulaires - on ne peut pas créer de forme en L par exemple. La zone colorée ci-dessous s'étend sur deux rangées et deux colonnes.


gouttière

Les gouttières entre les cellules sont définies à l'aide des propriétés [`grid-column-gap`](https://developer.mozilla.org/fr/docs/Web/CSS/grid-column-gap) et [`grid-row-gap`](https://developer.mozilla.org/fr/docs/Web/CSS/grid-row-gap), ou de la propriété raccourcie [`grid-gap`](https://developer.mozilla.org/fr/docs/Web/CSS/grid-gap). Dans l'exemple ci-dessous nous créons une gouttière de dix pixels de large entre les colonnes, et une gouttière de 1em de hauteur entre les rangées.

See the Pen Les gouttières by Christophe Ducamp (@xtof-party) on CodePen.

<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>

L'espace utilisé par les gouttières sera pris en compte avant l'assignation de la place restante aux pistes définies avec l'unité `fr`. La taille des gouttières est calculée comme celle des pistes, mais on ne peut pas placer d'élément dans une gouttière. Au niveau du positionnement des éléments sur les lignes, la gouttière se comporte comme une ligne épaisse.

Placement d'un élément

• placez les items sur la grille en utilisant les numéros de ligne, les noms ou un ciblant une zone de la grille.
• la grille a un placement par défaut (le placement des items auxquels ne sont pas donnés une position explicite).

Alignement

• contrôler l'alignement d'item
• contrôle d'alignement de la grille en entier

z-index

• contrôle le contenu qui se chevauche; superposition
• Plus d'un article peut être placé dans une cellule de la grille
• les zones peuvent se chevaucher partiellement

Cf détails sur https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Grid_Layout/Les_concepts_de_base On peut contrôler l'ordre dans lequel les éléments s'empilent en utilisant la propriété `z-index`. Si nous donnons à `box2` un `z-index` inférieur à celui de `box1` il s'affichera sous `box1` dans la pile. > voir exemple sur https://codepen.io/xtof-party/details/govwVy/

unité fr

Les pistes peuvent être définies en utilisant n'importe quelle unité de longueur. La Grille introduit également une unité de longueur supplémentaire pour nous aider à créer des pistes de grille flexibles. La nouvelle unité `fr` représente une fraction de l'espace disponible dans le conteneur de la grille. La définition de grille qui suit créerait trois pistes de même largeur qui croissent et rétrécissent en fonction de l'espace disponible.

   #container {
       display: grid;
       grid-template-columns: 1fr 1fr 1fr;
   
   }
   
   
   <main id="container">

A

B

C

D

E

F

   </main>
   

ce qui est la même chose que

   #container {
       display: grid;
       grid-template-columns: repeat(3, 1fr);
   }

2. Grille

Surligner les éléments de grille dans Firefox


3. inline-grid

See the Pen Grille niveau inline by Christophe Ducamp (@xtof-party) on CodePen.

<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>