Utilisation de CSS Grid pour créer un bloc duquel le contenu dépassé partiellement aux extrémités, mais de manière harmonieuse.
Le code final reste assez complexe surtout si vous n'êtes pas familier avec CSS Grid 😬
L'une des approches les plus didactiques que j'ai pu lire pour comprendre Grid layout en CSS. J'ai d'ailleurs déjà partagé son article sur Flexbox qui était tout aussi bon.
A game for learning CSS grid layout
Encore un petit article sur CSS Grid.
Les deux sont complémentaires !
Plein de ressources utiles pour apprendre et maîtriser le positionnement CSS Grid.
Un moyen d'accomplir un layout à la Masonry avec uniquement du CSS (principalement Flexbox et :nth-child()). C'est très bien pensé malgré les quelques contraintes.
Le plus gros souci pour moi c'est que si un élément est beaucoup plus haut que les autres, les blocs ne s'adapteront pas pour autant et l'ordre de lecture s'en trouvera impacté. Mais pour une grande part des cas, c'est suffisant.
Une cheat-sheet pour grid.
Une très bonne présentation de CSS Grid qui insiste bien sur la simplicité et la logique de cette approche.
Ce mec m'a vraiment donné envie de m'y mettre :)
Les Media Queries ne sont plus la seule solution pour rendre un site responsive. Flexbox et Grid intègrent déjà pas mal d'options dans ce sens.
Les Grid CSS et Flexbox très bien illustrés.
Un affichage type comic book avec les grid CSS. C'est assez réussi :)
Via https://blog.stephaniewalter.fr/semaine-pixels-13-octobre-2017/
Un outil de Mozilla pour apprendre à utiliser les grilles CSS.
GridLayout arrive tout doucement. Flex a déjà résolu bon nombre de problèmes du passé mais Grid permet de nouvelles choses et renforce la séparation entre structure (HTML) et style (CSS).
Utiliser des multiples de 8pt pour dimensionner une UI, pour améliorer le rendu lors d'un "scaling" du navigateur et éviter les demi-pixels par exemple.
Un système de grid CSS ultra-simple qui utilise la puissance de flexbox. Et aussi un logo avec des zizis.