Différences entre versions de « 2018-037 »
De Mi caja de notas
| Ligne 5 : | Ligne 5 : | ||
== [[Apprendre la Grille CSS]] == | == [[Apprendre la Grille CSS]] == | ||
| + | |||
| + | ### [https://gridbyexample.com/patterns/header-asmany-footer/ En-tête, pied de page, panneau central contenant autant d'éléments que possible] | ||
| + | |||
| + | Cet exemple montre un modèle à deux colonnes, avec en-tête et pied de page. Le panneau central contient un certain nombre de cases. Nous voulons en avoir autant dans chaque rangée que possible, avec les boîtes alignées en rangées et en colonnes. | ||
| + | |||
| + | Cette technique signifie que nous n'avons pas besoin d'utiliser des requêtes média, car une grille de mise en page flexible nous convient parfaitement. | ||
| + | |||
| + | La solution de repli utilise Flexbox, nous devons contraindre les éléments dans la disposition flex afin d'obtenir l'apparence de l'alignement bidimensionnel. | ||
| + | |||
| + | J'utilise minmax à deux endroits dans ma définition de grille : | ||
| + | |||
| + | - Pour créer la liste des colonnes de pistes d'un minimum de 200 pixels et d'un maximum de 1fr. | ||
| + | - En outre, lors de la définition de lignes, je souhaite que mes lignes aient une hauteur minimale de 100 pixels, mais qu'elles s'étendent à la hauteur de tout ce qui y est placé. Donc les lignes ont un maximum d'auto. | ||
| + | |||
| + | #### Techniques utilisées pour créer cette mise en page | ||
| + | |||
| + | * [Minmax](https://gridbyexample.com/video/series-minmax/) | ||
| + | * [auto-fill and auto-fit](https://gridbyexample.com/video/series-auto-fill-auto-fit/) | ||
| + | * [Feature Queries](https://gridbyexample.com/video/feature-queries/) | ||
| + | |||
| + | |||
| + | |||
| + | Des astuces et des techniques pour les mises en page de repli peuvent être trouvées dans mon [Anti-sèche : Grid Fallbacks and Overrides Cheatsheet](https://rachelandrew.co.uk/css/cheatsheets/box-alignment). | ||
== [[salle de bains]] == | == [[salle de bains]] == | ||
* visite plombier [[SOGI]] > détection de fuite chez [[Lauriane Roche]] - douche à l'italienne non conforme | * visite plombier [[SOGI]] > détection de fuite chez [[Lauriane Roche]] - douche à l'italienne non conforme | ||
Version actuelle datée du 6 février 2018 à 09:49
« Quand le dernier arbre sera abattu,la dernière rivière asséchée, le dernier poisson péché l'homme va s'apercevoir que l'argent n'est pas comestible. »
— proverbe indien
Apprendre la Grille CSS
Cet exemple montre un modèle à deux colonnes, avec en-tête et pied de page. Le panneau central contient un certain nombre de cases. Nous voulons en avoir autant dans chaque rangée que possible, avec les boîtes alignées en rangées et en colonnes.
Cette technique signifie que nous n'avons pas besoin d'utiliser des requêtes média, car une grille de mise en page flexible nous convient parfaitement.
La solution de repli utilise Flexbox, nous devons contraindre les éléments dans la disposition flex afin d'obtenir l'apparence de l'alignement bidimensionnel.
J'utilise minmax à deux endroits dans ma définition de grille :
- Pour créer la liste des colonnes de pistes d'un minimum de 200 pixels et d'un maximum de 1fr. - En outre, lors de la définition de lignes, je souhaite que mes lignes aient une hauteur minimale de 100 pixels, mais qu'elles s'étendent à la hauteur de tout ce qui y est placé. Donc les lignes ont un maximum d'auto.
- Techniques utilisées pour créer cette mise en page
- [Minmax](https://gridbyexample.com/video/series-minmax/)
- [auto-fill and auto-fit](https://gridbyexample.com/video/series-auto-fill-auto-fit/)
- [Feature Queries](https://gridbyexample.com/video/feature-queries/)
Des astuces et des techniques pour les mises en page de repli peuvent être trouvées dans mon [Anti-sèche : Grid Fallbacks and Overrides Cheatsheet](https://rachelandrew.co.uk/css/cheatsheets/box-alignment).
salle de bains
- visite plombier SOGI > détection de fuite chez Lauriane Roche - douche à l'italienne non conforme