grid ~ la grille CSS facile

Après flexbox et flexauto, voici une mise en page des contenus avec CSS Grid 

IMPORTANT : consultez les informations dans le bandeau bleu ci-dessus pour connaitre toutes les options disponibles.

Mise en forme avec grid

Même si cette action facilite l'utilisation des règles CSS grid, elle demande un minimum de connaissance du CSS. 

Comme flexbox et flexauto, grid permet de mettre en page le contenu entre ses shortcodes.
La différence réside dans une plus grande souplesse pour définir l'emplacement, la taille et la forme des blocs. 

Pour être le plus clair possible, la définition des termes utilisés dans cette démo :

• une grille est composée de lignes (row) et de colonnes (column)
• l'intersection d'une ligne et d'une colonne définissent une cellule (cell)
• cette cellule est occupée par un contenu (item)

{up grid='a a . b'   
         "a a . b"
         'c c c b'
| mobile-grid='a' 'c' 'b'   
| main-style=bg-jauneClair;p2
| items-style-*=border:1px solid red;bg-jauneClair;up-center;p1
| css-head=#id .b[border:3px dotted orange !important]
}
   {up lorem-serie=alpha | maxi=3}
{/up grid}

L'option principale grid doit respecter ces contraintes :

• le nom des zones, comme les classes, doit commencer par une lettre. 
• chacune des lignes doit contenir le même nombre de noms de zones
• les zones doivent former des rectangles
• une zone identifiée par un point n'aura pas de contenu
• les zones d'une ligne doivent être encadrées par des guillemets (simples ou doubles)

Pour une plus grande lisibilité, le shortcode permet une description sur plusieurs lignes. Mais ce n'est pas une obligation.

Colonnes et lignes

Le nombre de colonnes est égal à la quantité de nom de zones dans les lignes. 
Leur largeur est égale à la largeur du container divisée par le nombre de colonnes.
Toutefois, les colonnes s'adaptent à leur contenu. C'est un avantage sur flexbox et flexauto.

L'exemple ci-dessous est identique au précédent hormis pour le contenu.
Nous constatons que la zone a qui contient un long texte s'agrandit au détriment des autres zones.

{up grid='a a . b'   
         "a a . b"
         'c c c b'
| mobile-grid='a' 'c' 'b'   
| items-style-*=border:1px solid red;up-center;p1
| css-head=#id .b[border:3px dotted orange !important]
}
  {up lorem=1}
  {====}
  B
  {====}
  C
{/up grid}

Nous pouvons agir sur la largeur des colonnes avec l'option grid-template-columns

Le même principe régit la hauteur des lignes avec la propriété grid-template-rows

Astuce

Mettre une image flottante pour accompagner est une chose que l'on fait souvent. La cohabitation du texte et de l'image selon la largeur d'écran n'est pas toujours heureuse.

Grid apporte une solution élégante avec l'ajustement automatique des colonnes selon le contenu.

L'option grid définit 2 colonnes c1 et c2 sur la même ligne. mobile-grid les place sur 2 lignes.
css-head centre le contenu de la colonne c1 sur mobile.

{up grid='c1 c2' | mobile-grid='c1' 'c2' | css-head=#id .c1[tc]}
image
{up lorem=2,decorate}
{/up grid}

Si vous avez du mal à vous repérer avec les noms et contenus des cellules, l'option zone-name peut vous aider. 

zone-name reçoit le nom des zones dans l'ordre d'apparition dans le contenu entre les shortcodes ouvrant et fermant.
On utilise ces noms dans les options grid et mobile-grid

Pour l'exemple, l'image est mise à droite sans modification du contenu

{up grid='texte image' | mobile-grid='image' 'texte'
  | zone-name=image,texte
  | css-head=#id .image[tc]}
image
{up lorem=1,decorate}
{/up grid}

Si vous utilisez souvent cette methode, pensez à créer un  prefset : comment programmer les jeux d'options

Mise en forme sans grid

L'action grid permet d'utiliser plus facilement le concept des grids. Une grande partie des options disponibles sont en réalité des propriétés CSS.

Voyons avec un exemple, la souplesse de l'action grid pour s'adapter à vos besoins.

jcontent-image
argumente automatiquement les champs de l'onglet "images et liens"

mq
les mediaqueries faciles

addhtml
ajouter du HTML dans la page

lorem-serie
une suite de données factices

loadmodule
charger un module

upclass2style
créer le fichier référence

geocode
récupérer les coordonnées d'une adresse postale

get
récupère des informations

upfilescleaner
déplace les fichiers et images inutilisés

lorem-place
image aux dimensions indiquées

media-audio
fichier(s) audio en HTML5

media-video
vidéo en HTML5

{up grid
| grid-template-columns=repeat(3,auto)
| tablet-bp=1060px
| tablet-grid-template-columns=repeat(2,auto)
| mobile-bp=760px
| mobile-grid-template-columns=1fr
| items-style-*=flexbloc;tc;p1;border:4px dotted orange
| items-style-2=border:4px dotted blue 
| mobile-items-style-2=background:yellow
| css-head=#id .flexbloc[display: flex;flex-flow: column; align-items: center;justify-content: space-between;]
           #id .flexbloc img[width:50%]
}
   {up jcontent-by-categories=8 | maxi=12 | main-tag=0
     | template=[h4 class="notoc"]##maintitle##[br][small]##subtitle##[/small][/h4]##image##}
{/up grid}

• Le shortcode grid entoure une action jcontent-by-categories qui affichera les 8 dernières actions de UP. 
• grid-template-columns est la propriété CSS qui définit le nombre de colonnes, soit 3 colonnes de largeur auto. 
• tablet-grid-template-columns et mobile-grid-template-columns pour définir le nombre de colonnes sur une tablette et mobile
• tablet-bp et mobile-bp fixent la largeur utilisée comme breakpoint pour passer en vue tablette et mobile.
• items-style-* contient le style pour ajouter une bordure autour de toutes les cellules.
• mobile-items-style-2 ajoute un fond jaune à la deuxième cellule en vue sur mobile
• css-head définit la classe flexbloc ajouté par l'option items-style-*. Cette façon de procéder permet plusieurs choses :
  • éviter de répéter le code CSS dans toutes les balises des cellules
  • permet de styler les images incluses dans ce bloc.

Pour mémoire, toutes les options style acceptent aussi les classes.
Par sécurité, utilisez des classes simples qui pourront être converties en style pour une définition dans le head de la page. 

Le responsive

Vous avez remarqué que le nom de certaines options commencent par mobile- ou tablet-.

Cela indique que l'argument sera appliqué pour les tailles d'écrans définis par les options mobile-bp et  tablet-bp.
Les valeurs par défaut sont de 480px et 760px

Le nom des zones

Par défaut, les zones reprennent le nom utilisé dans l'option grid.
Ce nom sera utilisé pour : 

• affecter l'attribut  CSS grid-area des éléments de contenu 
• créer une classe utilisée comme sélecteur CSS pour chacun des éléments

Nous verrons cela plus tard, mais sachez qu'en l'absence d'option grid, les items seront nommés : item-1, item-2, ...

Option zone-name

Par défaut, les contenus sont attribués dans l'ordre d'apparition des noms de zones dans l'option grid.
Relation qui est conservée pour tablet-grid et mobile-grid.

Vous pouvez modifier cet ordre avec l'option zone-name qui doit reprendre tous les noms de zone séparés par des virgules.

Option grid-repeat

Si votre grille est composée de "sous-grilles" identiques, l'option grid-repeat permet de la répéter le nombre de fois indiqué.
Dans ce cas, les cellules dupliquées reprennent le nom de la cellule origine suffixé par le rang de la répétition.

Les autres options

La plupart des options proposées sont simplement un moyen rapide d'affecter des propriétés CSS.

Je vais les énumérer ci-dessous avec un lien vers la description fournie par developer.mozilla.org

gap

tablet-gap

mobile-gap

définit les espaces (les gouttières) entre les lignes et colonnes d'une grille.
Si une seule valeur est fournie, elle sera utilisée pour les lignes et colonnes. Sinon, la première concerne les lignes et la seconde les colonnes.
Voir mdn web docs

grid-auto-columns

grid-auto-rows

grid-auto-flow

Ces 3 propriétés CSS régissent le comportement de la grille lorsque le nombre de cellules est inférieur à celui des contenus
Par défaut, ils seront ajoutés dans des cellules de la taille d'une colonne en mode auto.

Voir mdn web docs

place-content

tablet-place-content

mobile-place-content

définit la façon dont l'espace est réparti entre et autour des éléments sur les axes principal (colonnes) et secondaires (lignes)
Les valeurs courantes : start | end | center | space-around | space-between | space-everly

Voir mdn web docs

place-items

tablet-place-items

mobile-place-items

définit la position des éléments sur les axes principal (colonnes) et secondaires (lignes)
Les valeurs courantes : start end center stretch

Voir mdn web docs