La CSS Grid

http://griddy.io/

C'est un système de display pour gérer ta page web en terme de grille, en définissant toi même le nombre de colonne et la taille de chacune.

en premier lieu, on a notre html, par exemple avec une classe container qui contient plein d'articles.
sur le .container, dans notre css, on peut faire un
display : grid

ceci active la gestion des éléments à l'intérieur du .container en mode grid.

 ensuite, on a l'option grid-template-columns : 1fr, 100px, 1fr

par exemple, ici, cela permet de dire que les éléments seront divisés en 3 colonnes.
pour les tailles elles peuvent s'exprimer en pixel, e %, et en fr.
le FR est la mesure en FRACTION de place restante. Par exemple, ici, la colonne 2 prendra 100px tandis que les 2 autres prendront la place restante en le divisant en 2, puisqu'il y a 2 x 1fr.

le grid-template-rows : idem que le template columns, mais définit le nombre de lignes!

le align-item : comment les élément se placeront sur la hauteur
justify-item : comment les élément se placeront sur la largeur
Ces deux éléments prennet les valeurs suivantes :
- stretch : l'objet s'étirera sur toute sa largeur
- start : l'objet gardera sa taille fixe originelle sans s'étirer, et commencera au début de la colonne / ligne
- end : idem mais commencera à la fin
- center : bah... centré quoi

grid-column-gap / grid-row-gap : l'écart entre chaque colonnes / lignes!

on peut aussi utiliser la grid-template-area !

par exemple, imaginons qu'on aie mis 2 lignes et 2 colonnes.
on peut utiliser le grid-template-area pour donner des noms raccourcis à nos zones et nos colonnes, qui pourront ensuite être réutilisées dans les template.

et donc,  dans le template area, on va en fait séparer chaque ligne avec le nombre de colonnes, entre des quotes. Donc si j'avais 3 lignes et 2 colonnes, j'aurai un troisième jeu de quote. :)
ensuite, on peut réutiliser ces noms dans le reste de notre code, tant que les balises ou les classes font références à des éléments contenus dans la grille.


 de bons tutos sur les grilles :
https://la-cascade.io/css-grid-layout-guide-complet/#gac

https://www.alsacreations.com/article/lire/1388-css3-grid-layout.html

Commentaires

Enregistrer un commentaire

Posts les plus consultés de ce blog

Git Kraken

Image
Git Kraken est un logiciel de versioning pour git, mais en plus visuel. Il Facilite la revue des problème, les merge, les rebase, et toutes les opérations git. Un peu comme le git dans PhpStorm. Attention cependant à ne pas oublier le git CLI. ça reste quand même la base parce que le jour où t'as pas git Kraken ou PhpStorm sous la main, c'est quand même bien de connaître la base en ligne de commande. Pour le télécharger : https://www.gitkraken.com/
Lire la suite

Git Rebase

Le Git rebase permet de reconstruire un historique soit par rapport à une autre branche,soit reconstruire l'historique de la branche elle même. 1. Reconstruire l'historique de la branche en elle même. Mettons que vous ayez une branche. Avec 53 commits, et que parmis ces commits, nombreux sont ceux qui ne sont qu'un petit fix de 3 bouts de code, avec un message du genre, "fix". Idéalement, il vaut mieux avoir moins de commits avec des messages clairs, que pleins de commits pour une seule fonctionnalité. En général, le moins de commit il y a à la fin, le mieux c'est. la commande : git rebase -i HEAD~4 signifie : reprends tant de commit avant HEAD, HEAD étant notre point actuel. donc en gros ici : reprends 4 commit en arrière, et je vais te dire quoi faire avec (avec le fameux -i, qui va nous permettre d'interagir au fur et à mesure qu'il reconstruit l'historique de commits) 2. Reconstruire l'historique par rapport à une autre branch...
Lire la suite

Utilisation de Hover Intent

Hover Intent est un plug in Jquery qui "analyse" les mouvements de ta souris pour éviter les changements trop brusques dans le cas d'un hover, par exemple : Tu as une navbar, avec des menu, et des sous menus. si tu survole les menus, tu passes de l'un à l'autre et chaque survol de menu ouvre le sous-menu correspondant. mais parfois, en voulant déplacer ta souris sur le sous-menu, tu survoles un bref instant le menu d'à côté, e tlà, BIM, tu changes de menu! ça t'es déjà arrivé, hein? c'est chiant! Hover Intent règle ce problème, puisque si tu passe trop rapidement, il détecte qu'il ne faut pas déclencher l'évènement, et donc, ne pas afficher le menu. Un peu comme si t'avais mis un mini-timeout, sauf que là, il gère tout, tout seul. exemple : $( '#menu-menu-principal> li ' ). hoverIntent ( function () { $( this ). find ( '>.sub-menu' ). toggleClass ( "sub-menu-visible" ) ; }) ; ton html : <nav...
Lire la suite