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...