---
title: "Repères et alignements pour positionner vos blocs"
description: "Profitez des repères visuels affichés pendant le déplacement ou le redimensionnement d'un bloc pour aligner précisément vos éléments dans une section."
url: https://docs.vivlab.com/editor/interaction/canvas-grid
---

# Repères et alignements

Pendant que vous [déplacez](https://docs.vivlab.com/editor/interaction/move.md) ou [redimensionnez](https://docs.vivlab.com/editor/interaction/stretch.md) un bloc, l'éditeur affiche en surimpression plusieurs repères visuels pour vous aider à aligner précisément vos éléments. Ces repères ne s'affichent **que pendant l'interaction** et disparaissent une fois le bloc relâché.

## Trame de la grille

La canvas est structurée par une grille de colonnes et de lignes invisibles en temps normal. Pendant un mouvement, de **fines lignes grises** apparaissent pour rendre cette grille visible. Les blocs s'alignent automatiquement sur cette grille, ce qui garantit une mise en page cohérente.

Les lignes principales (toutes les 32 colonnes sur desktop, 24 sur mobile) sont pointillées et plus marquées que les lignes secondaires.

## Lignes d'alignement

Quand votre bloc en cours de mouvement aligne un de ses bords ou son centre avec un autre bloc de la même section, une **ligne violette** s'affiche pour confirmer l'alignement. Six alignements sont détectés :

- Bord **gauche**, **droite**, **haut**, **bas**.
- Centre **horizontal** ou centre **vertical**.

Cela vous évite de tâtonner pour aligner deux blocs au pixel près : il suffit de glisser jusqu'à voir apparaître la ligne, puis de relâcher.

## Repères de taille équivalente

Quand votre bloc a la même largeur ou la même hauteur qu'un autre bloc de la section, des **traits roses** s'affichent autour des deux blocs pour vous le signaler. Pratique pour donner exactement la même taille à plusieurs cartes côte à côte.

## Indicateurs d'espacement

Dès que plusieurs blocs sont espacés régulièrement entre eux (même intervalle des deux côtés ou plus), des **pastilles noires** affichent la valeur de l'écart en cellules de grille. C'est ainsi qu'on confirme que trois colonnes sont également espacées, ou qu'un bouton est centré entre deux paragraphes à distance égale.

## Centrage dans la section

Si vous centrez un bloc par rapport au centre de sa section parente (horizontalement, verticalement ou les deux), un **trait pointillé violet** traverse la section pour confirmer le centrage exact.