Généralités sur les CSS grid layout (modèle de disposition en grille)

Thèmes abordés

Généralités sur les CSS grid layout, modèle de disposition en grille, framework, deisgn d'une page, mise en force, HTML, container, informatique

Résumé du document

Le layout correspond au design et apparence d'une page, à sa disposition. Une grille CSS est un système de mise en forme basé sur la division de l'espace d'affichage par des lignes et des colonnes en des zones utilisables par une application. Depuis 2017 il est supporté par tous les navigateurs (natif et non préfixé) mais difficile avec Edge.

Extraits

[...] Unidimensionnel vs bidimensionnel Rachel Andrew: experte au groupe de travail CSS du W3C pas d'alignement forcé alignement est égale et flexible Flexbox Placement des items automatique dans les cellules définis Control des positions des items avec des lignes et des zones Grille css 19 III°)Frameworks liés aux grilles css[7]: Framework: ensemble de code qui fournit une organisation et un ensemble de fonctionnalités. grilles fluides utilisation de framework css: Bootstrap BluePrint Yui Pure Knacss Materialize Facilite le travail des Développeurs web au niveau de la productivité 20 III°) frameworks liés aux grilles css Knacss: Distribué librement sur gitHub sous licence WTFPL Géré par l'Agence Alsacréation Fonctionnalités basiques: grilles simples et responsives. [...]

[...] grille à 12 colonnes & un reset Un minimaliste Bout de code :pas vrai framework 21 III°) Frameworks liés aux grilles css Bootstrap: Mark Otto & jacob Thornton (2011) grille fluide en 12 colonnes basée sur l'empilement lors de la réduction de taille 4 sortes de classes pour les colonnes (col-xs-* (smartphone), col-sm-* (tablettes), col-md-*(pc), col-lg-*(grand-écran)) Grille avec un grand nombre de combinaison (inclusion,saut de colonnes) Élément typographique de HTML trouve automatiquement une forme esthétique avec Bootstrap 22 IV°)Conclusion: . Les grilles: Bi-dimensionnels . les grilles ont une partie basée sur des items et une partie basée sur un container . [...]

[...] colonnes , rangées, aires (area) 15 II°)Nature d'une grille css Alignement globale: justify-items & align-items start/end/center/stretch .container { justify-items:start;} .container{justify-items:end;} .container{justify-items:center;} .container{align-items:start;} .container{align-items:end;} .container{align-items:center;} .container{align-items/justify-items: stretch;} 16 II°) Nature d'une grille css[1]: placement individuel des items: .x{ justify/align-self: center/start/end/stretch;} remplacement : .container par .item (ici cas: item- Localisation: grid-row/column-start/end line span number span name auto exemple: .item-b {grid-column-start: grid-column-end:col4-start; grid-row-start:2; grid-row-end: span2;} propriété: valeur: 17 II°) Nature d'une grille css[11]: suppléments: le Z-index: Eléments HTML: 3D (marge, float 2D) Contrôle l'axe Z avec Z-index Z-index: trois valeurs: auto/integer/inherit - spécifie niveau empilement de l'élément courant nouveau contexte d'empilement Niveau d'empilement création d'un nouveau contexte d'empilement pour gérer le chevauchement des items. II°) Nature d'une grille css Intérêt de la grille css: Contenu: plus harmonieux structurés, plus équilibrés. [...]

[...] Les grilles : efficaces dans la création de sites responsives . [...]

[...] CSS GRID 1 Table des matières: I°)Introduction sur les grilles css: II°)Nature d'une grille: III°) Framework lié au grille css: IV°) Conclusion: 2 I°)Introduction sur les grilles CSS: Layout design, apparence d'une page disposition Grille css système de mise en forme basé sur la division de l'espace d'affichage par des lignes et des colonnes en des zones utilisables par une application en HTML: Un élément parent avec une classe container (

et des enfants directs nommés éléments de grilles (ici items

X

) Depuis 2017 supporté par tous les navigateurs (natif et non préfixé) mais difficile avec Edge 3 I°) Introduction sur les grilles css[1]: Constitution Physique d'une grille: ligne de grille piste de grille cellule de grille zone de grille 4 II°) Nature d'une grille css: Type de grille: Propriété d'une grille: Intérêt de la grille: 5 II°) Nature d'une grille css Type de grille: Verticale Verticale & Horizontale 6 II°) Nature d'une grille[1-2-3-4-5]: construction grille propriété du container Placement des éléments internes Propriété des items Partie 1 Partie II°)Nature d'une grille[1]: liste des propriétés css Cas du container : cas des items: display:grid grid-template-columns/rows/areas grid-template-columns/row-gap align/justify-content grid-auto-columns/rows grid-auto-flow align/justify-items grid column/row- start grid column/row-end justify/align-self grid-row/column/area 8 II°)Nature d'une grille css[1-4]: Partie Etude des propriétés du container: 1 mot: grid 2 rôles importants: valeur de display: .container{display:grid;} propriété: Propriété raccourcie 9 II°) Nature d'une grille CSS grid-template-rows & grid-template-columns(*): grid-template-areas(*): grid-column/row-gap: .container{grid-template-rows/columns: tracksize/linename/subgrid; } .container{grid-template-areas: grid-area-name/. /none;} .container{grid-columns/rows-gap: line-size;} 10 II°) Nature d'une grille css supplément: subgrid: Spécification de niveau 2 css: les sous-grilles ne sont pas supportés par les navigateurs le sous-réseau est unidimensionnel les lignes de sous-grilles sont imbriqués dans la grille parente (dimension et dans une autre dimension (grille implicite (dimension les items de la sous-grilles : sub-items les espaces issus de grid-column-gap de la sous grille sont hérités des espaces des parents.

[...]