Je viens de découvrir css-grid, je trouve cela hyper intéressant surtout du coté responsive.
Je me posais donc la question, plutôt que de "s'embeter" avec du flex, ne serait-il pas plus facile de n'utiliser que du css grid ?
Est-ce opportun de n'utiliser que ça à l'heure actuelle ou le responsive prime ?
Ou faut-il l'utiliser avec parsimonie et le combiner à d'autres choses ? A-t-il une fonction bien déterminée ? L'utilise-t-on seulement pour le contenu et laisse-t-on le header footer en flex classique ?
Toutes ces questions afin d'avoir de bonne pratique et ne pas utiliser l'un ou l'autre alors qu'il n'est pas nécéssaire ou superflu.
Alors à mon avis, flex et grid sont complémentaires, parce qu'ils amènent deux approches différentes. D'ailleurs, il me semble que le travail sur le futur de CSS est aussi sur la manière de combiner ces deux manières de faire — sauf erreur pour permettre entre autres éviter d'avoir un conteneur supplémentaire en cas de "cellule grid" qui doit contenir des "éléments flex".
De mon point de vue, flex permet une organisation et une répartition des éléments… flexible soit que ce n'est pas figé : les éléments peuvent être sur la même ligne ou non selon la taille de l'écran.
Au contraire de grid, qui va plus ou moins transformer le HTML ciblé en tableau, donc les cellules sont à des emplacements précis.
C'est très simplifié et probablement que les deux comportements expliqués ci-dessus peuvent peut-être réalisés avec l'une ou l'autre manière, mais tout n'est pas possible à l'un et à l'autre — sans quoi un consensus se serait dégagé et une seule manière de faire serait maintenue.
flex et grid sont effectivement complémentaire et s'ajoute à la panoplie d'affichage que display nous offre. L'un ne remplace pas l'autre et pour l'affichage en grille, ces deux là renvoi la méthode float vers son usage classique (pas destiné a construire une grille, p.s. ne pas troller sur ce détail, ce n'est pas le sujet) .
Pour l'affichage en grille (1d ou 2d) , selon la structure HTML, les contenus et leur contenus, display propose : flex, grid et table. (en block ou inline) . Il y a aussi les Column CSS , plutôt pour du texte et des zone réduites que pour le layout principal.
Il y a 2 différences majeures à comprendre à propos de flex et grid pour choisir l'un ou l'autre. (1d ou 2d, construction depuis le parent ou les enfants)
une grille en flex (2009) Les enfants construisent la grille au fur et à mesure qu'ils sont introduit dans le flux. Chaque nouvelle ligne ou colonne (selon la direction initialisée) se comporte comme une nouvelle grille en une dimension. Chaque grille produite dans un élément flex est construite par les enfants, la taille des cellule n'est pas configurable depuis le parent, seul la taille des enfants peut-être individuellement déterminée. https://drafts.csswg.org/css-flexbox/ (2024)
une grille en grid (2011) est construite et configurée à partir du parent, elle n'affiche qu'une grille en 2 dimensions. les enfant sont dispatché dans la grille au fur et à mesure qu'ils arrivent dans le flux par défaut. On peut leur assigné plusieurs cellule que ce soit sur une ligne ou une colonne ou les deux. https://www.w3.org/TR/css-grid-3/ (2024)
On comprend mieux qu'ils ne se ressemblent que de loin une fois ces deux différences comprises . grid est plutôt destiné aux layout d'une page alors que flex est souvent plus adapté aux layout des zones secondaires. Mais ce ne sont que des styles et leurs usages ne modifient pas la validité d'un document.
Les Column CSS (1999) - 2024 https://www.w3.org/TR/css-multicol-1/ On peut dire que c'est hérité du print (média papier) et à pour but de mettre en forme un texte pour qu'il soit facilement lisible.
Le display:table (1998) ne sert plus à grand chose depuis longtemps, à part peut-être pour la fluidité du table-layout en auto ou un alignement vertical ici ou là en dehors d'un contexte de flex,grid ou inline-block. On peut l'ignorer https://www.w3.org/TR/1998/PR-CSS2-19980324/tables.html#q2
fan de PluXml , cuisinier et codeur amateur.Thèmes pour PluXml ? Oui Des plugins? Oui