CSS Grid Wix Studio : créer des mises en page responsive avec la grille avancée

La grille CSS (CSS Grid, appelée grille CSS avancée dans l'éditeur) est un outil de Wix Studio qui découpe une section ou un conteneur en colonnes et en rangées. Chaque élément vient se placer dans une ou plusieurs cases de ce tableau, ce qui rend l'organisation du contenu plus claire, plus précise et plus stable sur tous les écrans.

En bref : la grille CSS s'applique à une section, un conteneur, une fenêtre pop-up, une flexbox ou un élément de répéteur. Vous pouvez changer le nombre de colonnes et de rangées, et la case de chaque élément, sur chaque breakpoint. C'est l'outil le plus puissant de Wix Studio pour le responsive, à utiliser dès que la mise en page devient complexe.

Grille CSS ou cellules : quelle différence dans Wix Studio ?

La grille CSS est l'alternative avancée aux cellules de la grille de section. La différence tient en une phrase : avec les cellules, un élément est bloqué dans sa cellule sur tous les écrans ; avec la grille CSS, sa position est un réglage que vous changez écran par écran.

• Avec les cellules, vous pouvez seulement échanger des cellules entre elles d'un point de rupture à l'autre. Avec la grille CSS, vous pouvez par exemple afficher une grille de 4 colonnes et 5 rangées sur ordinateur, 2 colonnes et 10 rangées sur tablette, puis 1 colonne sur mobile.

• Avec la grille CSS, vous déplacez vos éléments (boutons, textes, images) d'une case à une autre selon l'écran. Avec les cellules, un élément reste dans sa cellule : il faudrait le copier, le coller dans une autre cellule et masquer l'original sur certains écrans.

C’est très utile pour structurer des pages complexes : services, cartes, portfolios ou blocs avec plusieurs éléments alignés.

Où peut-on appliquer une grille CSS dans Wix Studio ?

La grille CSS avancée fonctionne sur plusieurs types d'éléments :

• les sections, à la place de la grille de section intégrée ;

• les conteneurs ;

• les fenêtres pop-up (lightbox) ;

• les flexbox ;

• les éléments de répéteur : la grille appliquée à un élément se reporte automatiquement sur tous les autres.

Comment créer une grille CSS dans Wix Studio ?

1. Sur une section : sélectionnez la section, ouvrez l'Inspecteur, descendez jusqu'à la partie Mise en page et basculez de la grille de section vers la grille CSS avancée.

2. Sur un conteneur ou un autre élément compatible : sélectionnez-le, ouvrez le menu Plus d'actions et choisissez d'appliquer une grille CSS avancée. Prenez une disposition prédéfinie, ou l'option Autre pour régler vous-même le nombre de rangées et de colonnes.

Ensuite, vous ajoutez des colonnes et des rangées (depuis l'Inspecteur, ou en tirant depuis le bord de la grille sur le canevas), vous ajustez leurs tailles et vous réglez les écarts (gaps) entre les cases.

⚠️ Une fois appliquée à une section, la grille CSS ne peut plus être retirée. Si vous supprimez toutes les rangées et colonnes, elle revient simplement à une grille 1 x 1.

Bonnes pratiques pour structurer une section avec la CSS Grid

La meilleure méthode, selon moi :

1. Dans votre section, ajoutez d'abord un conteneur et élargissez-le au maximum.

2. Appliquez une grille CSS à ce conteneur.

3. Choisissez le nombre de colonnes et de rangées pour l'ordinateur (vous pourrez le changer sur tablette et mobile).

4. Placez vos éléments dans les cases voulues, en cliquant sur les cases dans la partie Position de l'Inspecteur, ou en saisissant les numéros de colonne et de rangée. C'est aussi comme ça qu'un élément peut s'étendre sur plusieurs cases.

Vous avez une liberté totale sur le nombre de colonnes, de rangées et l'emplacement de vos éléments, sur tous les points de rupture.

Régler la taille des colonnes et des rangées : fr, %, max-content

Vous pouvez choisir la largeur de chaque colonne et la hauteur de chaque rangée. Par défaut, il s'agit d'une fraction (fr), mais vous pouvez utiliser des %, ou vous adapter à la taille de l'élément dans la case (min-content et max-content). Ces dernières options sont très utiles pour les mises en page complexes.

Pour bien choisir entre ces unités, voir aussi la fiche unités de mesure Wix Studio.

Le CSS Grid aide-t-il pour le responsive design ?

Oui, la grille CSS est à la base du responsive design sur Wix Studio. Votre grille descend en cascade de l'ordinateur vers les petits écrans, puis vous l'adaptez breakpoint par breakpoint. Les cellules suffisent pour des grilles de sections à la mise en page simple. Dès que l'on multiplie les colonnes et les rangées, la grille CSS est beaucoup plus flexible, responsive et organisée.

Quand utiliser une grille CSS plutôt que des piles ?

Cas d'usage typique avec un répéteur (pas adapté aux débutants complets) : les piles permettent d'attacher des éléments entre eux, mais l'écart reste toujours le même, donc les images ne sont pas alignées quand les titres n'ont pas la même longueur. Avec la grille CSS, le texte est dans la rangée 1, aligné en haut, l'image dans la rangée 2, alignée en bas, et la rangée 1 est réglée en max-content pour s'adapter à la taille du texte.

Pour comparer tous les outils de mise en page (cellules, piles, flexbox, grille CSS), consultez le guide du responsive Wix Studio.

Mon avis de webdesigner sur la CSS Grid

La grille CSS fait peur au début, parce que son nom évoque du code. En réalité, c'est un tableau : des colonnes, des rangées, et des éléments rangés dans des cases. Tout se règle visuellement, sans écrire une ligne de CSS.

Mon conseil : apprenez d'abord les cellules pour comprendre la logique de Wix Studio, puis passez à la grille CSS dès que vous vous surprenez à dupliquer et masquer des éléments pour le mobile. C'est le signe qu'une grille ferait le travail proprement. Pour apprendre ces réglages pas à pas, vous pouvez suivre ma formation Wix, ou me confier la mise en page en tant qu'expert Wix Studio.

Questions fréquentes sur la CSS Grid Wix Studio

Peut-on retirer une grille CSS d'une section ?

Non. Une fois appliquée à une section, elle reste. En supprimant toutes les rangées et colonnes, vous revenez à une grille 1 x 1. Si vous hésitez, testez-la d'abord sur un conteneur.

Une grille CSS peut-elle avoir une autre disposition sur mobile ?

Oui. Le nombre de colonnes et de rangées, leurs tailles et la case de chaque élément se règlent par breakpoint.

Faut-il savoir coder pour utiliser la CSS Grid de Wix Studio ?

Non. Tout se règle dans l'Inspecteur et sur le canevas. Connaître les bases du CSS (fr, max-content) aide simplement à choisir les bonnes tailles.

À propos de l’auteur Alexandre Cottret, webdesigner freelance et fondateur de Trend Design, certifié Wix Partner Legend et Wix Studio. Plus de 150 sites créés depuis 2021, 5/5 sur Malt (93 avis).

Sources : Wix : travailler avec une grille CSS avancée, Wix : choisir entre les outils Flexbox et Grid.