Le CSS Grid est un outil de l'éditeur Wix studio qui permet de construire des layouts / mises en page précis en divisant une section en colonnes et rangées. Chaque élément vient se placer dans une cellule, ce qui rend l’organisation du contenu plus claire et plus stable.

Différences entre Cellules et grille CSS dans Wix studio

Le CSS grid une alternative aux cellules de l’éditeur Wix Studio : le CSS Grid permet de modifier totalement la mise en page sur tablette et mobile.

• Les cellules peuvent seulement être échangées entre elles sur les différents points de rupture. Avec le CSS Grid, vous pouvez par exemple afficher une grille 4×5 (4 colonnes, 5 rangées) sur ordinateur, 8×3 sur tablette et 9×2 sur mobile.

• Vous pouvez déplacer vos éléments (boutons, textes, images) d’une case à une autre avec le CSS Grid, contrairement aux cellules où un élément est bloqué dans une cellule précise, ce qui vous obligerait dans certains cas à copier-coller et masquer l’élément.

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

Comment créer une grille CSS dans Wix Studio ?

Dans l’éditeur, sélectionnez une section puis activez la grille.Vous pouvez ensuite :

• Ajouter des colonnes et des lignes

• Ajuster les tailles

• Placer les éléments dans chaque cellule

Bonnes pratiques pour structurer une section wix studio avec le CSS Grid

La meilleure méthode Selon moi :

• Dans votre section, ajoutez d'abord un container que vous élargissez au maximum.

• Créer une grille CSS dans votre container.

  
  

  

• Choisissez le nombre de colonnes et de rangées en ordinateur ( vous pourrez le changer en tablette et mobile

  

• Placez vos élements dans les cases que vous souhaitez, en cliquant sur les cases ou en indiquant les cases dans l'inspecteur à droite.

  

Vous avez la liberté totale du nombre de colonnes, de rangée, et de l'emplacement de vos éléments sur tous les points de rupture.

Vous pouvez choisir la taille / la largeur et hauteur de chaque cellule : Par défault, il s'agit d'une fraction, mais vous pouvez utiliser les %, ou vous adapter à la taille de l'élement à l'intérieur de la cellule ( Max-content et Min-Content). Ces derniers peuvent être très utiles pour des mises en page plus complexes.

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

Oui, le CSS grid est à la base du responsive design sur Wix studio. Les cellules sont suffisantes pour des grilles de sections avec une mise en pages simple, mais dès que l'on multiplie les colonnes et les rangées, le CSS grid est beaucoup plus flexible, responsive et organisé.

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

Cas d'usage typique avec un répéteur ( non adapté aux débutants complets) : les piles vont vous permettre d'attacher des éléments entre eux. Mais vous aurez toujours le même écart donc les images ne sont pas alignés. Avec le CSS grid, l'image est dans la rangée 2, et alignée en bas, le texte est dans la case 1, aligné en haut, et la rangée 1 à été paramètrée en "Max-content" pour s'adapter à la taille du texte.