Utilisation des grilles CSS (grid)

Oxygen utilise en majorité le Flex CSS (https://css-tricks.com/snippets/css/a-guide-to-flexbox/) mais il existe également une autre possibilité en CSS pour créer des modèles, les grilles (grid). Une bonne ressource pour la compréhension : https://css-tricks.com/snippets/css/complete-guide-grid/

Simplement on pourrait simplifier en disant que nous allons créé comme son nom l'indique une grille, et nous allons pouvoir utiliser toutes les cellules à notre guise. Suivant la conception de celle-ci nous allons pouvoir avoir une grille totalement "responsive".

Pour un exemple simple, je vais commencé par créé une section dans Oxygen avec la classe container à laquelle je vais appliqué un css personnalisé au lieu d'utiliser le flex. La première étape étant de déterminer combien nous voulons de colonnes (columns) et de lignes (rows). Pour cet exemple simple nous allons créer une grille avec 4 colonnes de 25vw (soit un quart de la largeur de l'écran) et pareil pour les lignes (4* 25vh soit quatre fois un quart de la hauteur de l'écran). Code css dans la section (n'oubliez pas la classe container) :

display:grid; 
margin:0 auto; 
grid-template-columns : repeat(4, 25vw); 
grid-template-rows : 25vh 25vh 25vh 25vh; 
justify-items: stretch; 
align-items: stretch;

Note : les colonnes et lignes peuvent utiliser d'autres valeurs (px, %, ...) mais aussi une valeur propre au grid qui est fr, correspond uniquement à une fraction 10fr pouvant être considérée comme 10 cellules de 10%. Mais attention que grid-template-columns: 1fr 50px 1fr 1fr; vous donnera 3 fois un tiers de la largeur MOINS 50 px, dans ce cas 1fr n'est pas égal à 33.33% de la largeur.

Une fois cette grille mise en place chaque élément (item) vont pouvoir être assigné dans la grille, mais ils pourront couvrir au minimum une cellule, ou plusieurs (attention au z-index en cas de superposition). Pour cet exemple simple je veux créer 4 div formant la taille de l'écran et une centrée en superposition. NOTE : si j'avais uniquement utilisé deux colonnes et deux lignes, j'aurais pu avoir le résultat pour mes quatre div mais je n'aurais pas pu centré la div au milieu. Une grille avec plus de colonnes et de lignes permet des positionnements plus précis et des grilles plus complexes.

Créons maintenant 5 div avec la classe item. Une fois qu'elles sont créées, nous allons de nouveau mettre le css personnalisé comme ceci,

//première div
grid-column:1/3;
grid-row:1/3;

//seconde div
grid-column:3/5;
grid-row:1/3;

//troisième div
grid-column:1/3;
grid-row:3/5;

//quatrième div
grid-column:3/5;
grid-row:3/5;

//cinquième div
grid-column:2/4;
grid-row:2/4;

J'ai également, juste pour l'exemple, affecté un rayon de bordure de 50% pour former une ellipse au centre. Notre première div va partir de 1 à 3, 1 correspond au point le plus à gauche de la colonne et 2 à la fin du premier élément de la grille pour avoir l'élément sur deux cellules il faudra donc aller jusqu'à 3. Pareil en hauteur. Le dernier élément que je veux centré sera donc décalé d'une cellule et commencera à 2 pour finir une cellule avant la fin à 4. Pareil en hauteur.

Le résultat est visible ici : https://oxygen.bulgaweb.com/puissance-du-grid-css/ NOTE : nous n'avons pas exactement la taille de l'écran à cause du menu (header) qui n'est pas calculé dans la grille.

Voici un exemple simple, vous pourrez, grâce à la puissance de ce css facilement ajouter un espace entre vos cellules avec le GAP, aligner le contenu de vos cellules avec JUSTIFY-ITEMS et ALIGN-ITEMS. Une bonne maîtrise de ce css permet des mises en place plus complexe.

NE PAS OUBLIER que vous pouvez également changer la position de vos éléments en responsive en utilisant les breakpoints entre les différentes tailles d'écrans.

Un autre exemple où j'ai appliqué ce css pour un client : https://neo-x.be/