Grid by Example

Flexbox ou Grid Layout ? - Alsacreations
▻https://www.alsacreations.com/article/lire/1794-flexbox-ou-grid-layout.html

CSS : combiner Flexbox et Grid layout pour l’organisation des pages web.
Voir aussi :
– ▻https://bigint.fr/blog/2018-12-19/CSS-Grid-ou-Flexbox-les-deux-bien-sr
– ▻https://la-cascade.io/utiliser-grid-ou-flexbox
– sur MDN :
. ressources pour grid layout :
concepts de base : ▻https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout
Références : ▻https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Grid_Layout
Exemples : ►https://gridbyexample.com/examples
. ressources pour flexbox : ▻https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Flexible_Box_Layout

#CSS #grid #flexbox #layout

Common UI Patterns
▻http://gridbyexample.com/patterns

A collection of built #patterns to use as starting points, complete with fallbacks. Remember that you do not need to use these for full page #layout, they could as easily be a small component in a design.

https://gridbyexample.com/img/pattern1.png https://gridbyexample.com/img/pattern5.png

#css #grids

CSS Grid Layout arrive, préparez-vous ! – La Tête dans le Flux
▻https://blog.goetter.fr/2016/11/30/css-grid-layout-arrive-preparez-vous/comment-page-1/#comment-616

En résumé :
Grid Layout est un module de positionnement parfait pour construire ses templates et ses grilles, bref l’architecture globale de la page
Flexbox est parfait pour les composants qui constituent l’intérieur de nos gabarits : navigations, sliders, fiches produits, etc.

L’idée serait de pouvoir se passer de bootstrap pour gérer les grilles dans les pages HTML...

Voir aussi :
– comparatif de toutes les possibilités pour des grilles en CSS : float, inline-block, table-cell, columns, flexbox, grid ▻https://blog.goetter.fr/2014/10/27/le-point-sur-les-grilles-en-css

Grid layout :
– le positionnement par grid layout : ▻http://www.alsacreations.com/article/lire/1388-css3-grid-layout.html
– le site de référence pour grid layout, page des exemples : ►http://gridbyexample.com/examples
– des exemples avancés d’utilisation de grid layout : ▻https://blog.goetter.fr/2016/01/02/grid-layout-vers-la-grille-parfaite
– une sélection de références par le gourou d’Alsacréation : ▻https://www.alsacreations.com/astuce/lire/1739-CSS-Grid-Layout-les-ressources-indispensables-pour-apprendre.htm
– plein d’exemples de layout basés sur grid : ►https://gridbyexample.com/examples
– l’outil de développement de Firefox spécialisé pour l’inspection des grilles : ►https://www.mozilla.org/en-US/developer/css-grid

Flexbox :
– revue exhaustive des caractéristiques de flex : ▻https://chriswrightdesign.com/experiments/flexbox-adventures
– une présentation complète et progressive de flexbox : ▻https://la-cascade.io/flexbox-guide-complet
– exploration des possibilités de CSS flexbox (flex, flex-item, order...) : ►http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
– un générateur de code pour les propriétés flex : ▻http://the-echoplex.net/flexyboxes
– des exemples de grilles en flex : ►https://philipwalton.github.io/solved-by-flexbox

Et pour la norme :
– Flexible box : ▻https://www.w3.org/TR/css-flexbox-1
– Grid layout : ▻https://www.w3.org/TR/css-grid-1

#css, #flex, #flexbox, #grid, #grid_layout, #grille #bootstrap