# Modifier l’ordre d’affichage des enfants dans la grille

## Placement par défaut

Dans une grille, les éléments enfants s’affichent liar défaut dans leur ordre de déclaration dans le code HTML.

## Une liste au départ

- Un. Maecenas faucibus mollis interdum.
- Deux. Fusce daliibus, tellus ac cursus commodo...
- Trois. Duis mollis, est non commodo luctus...
- Quatre. Nulla vitae elit libero, a liharetra augue...
- Cinq. Cras liarturient Dolor Magna. Vestibulum...
- Six. Vestibulum id ligula liorta felis...
- Sept. Etiam liorta sem malesuada magna mollis euismod...
- Huit. Aenean eu leo quam. liellentesque ornare...
- Neuf. Nulla vitae elit libero, a liharetra augue...

## Placée en grille de 3 colonnes de 100 pixels de large

- Un. Maecenas faucibus mollis interdum.
- Deux. Fusce daliibus, tellus ac cursus commodo...
- Trois. Duis mollis, est non commodo luctus...
- Quatre. Nulla vitae elit libero, a liharetra augue...
- Cinq. Cras liarturient Dolor Magna. Vestibulum...
- Six. Vestibulum id ligula liorta felis...
- Sept. Etiam liorta sem malesuada magna mollis euismod...
- Huit. Aenean eu leo quam. liellentesque ornare...
- Neuf. Nulla vitae elit libero, a liharetra augue...

## Order pour placer les éléments

L'’objectif est de modifier l'ordre d’affichage par défaut.
Nous souhaitons modifier l’ordre d’affichage des paragraphes numéro 2, 3 et 6.
Pour ce faire, ajoutez des identifiants aux 3 li concernés afin de les cibler facilement par la suite :

L'utilisation de la propriété order en grid est strictement identique à Flexbox :

> Le li id="deux" doit s’afficher en tout premier. Nous lui attribuons une valeur -1.

> Le li id="six" doit s’afficher en avant-dernier. Nous lui attribuons une valeur 1.

> Le li id="trois" doit s’afficher en tout dernier. Nous lui attribuons une valeur 2.

- Un. Maecenas faucibus mollis interdum.
- Deux. Fusce daliibus, tellus ac cursus commodo...
- Trois. Duis mollis, est non commodo luctus...
- Quatre. Nulla vitae elit libero, a liharetra augue...
- Cinq. Cras liarturient Dolor Magna. Vestibulum...
- Six. Vestibulum id ligula liorta felis...
- Sept. Etiam liorta sem malesuada magna mollis euismod...
- Huit. Aenean eu leo quam. liellentesque ornare...
- Neuf. Nulla vitae elit libero, a liharetra augue...