6XC

Calculateur de colonnes de grille

Largeurs de colonnes pour tout conteneur, nombre de colonnes et gouttière — avec code CSS grid prêt à copier et tailles de span multi-colonnes.

818 vues

Les mathématiques des colonnes

Colonne = (conteneur − (colonnes−1) × gouttière) ÷ colonnes. Un conteneur de 1200 px avec 12 colonnes et des gouttières de 24 px donne des colonnes de 78 px ; un élément s'étendant sur 4 colonnes fait 4×78 + 3×24 = 384 px. L'outil liste chaque largeur de span afin que vous puissiez récupérer des tailles exactes dans vos fichiers de design.

En CSS, vous codez rarement cela en dur : display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px laisse le navigateur faire la division. Les valeurs en pixels comptent pour les frames Figma, les exports d'image et pour comprendre à quoi 1fr se résout réellement à vos points de rupture.

Questions fréquentes

Faut-il inclure les marges dans la largeur du conteneur ?

Non — saisissez la largeur du contenu (conteneur moins marges/padding latéraux). Une maquette de 1440 px avec 120 px de marge de chaque côté a un conteneur de travail de 1200 px.

12 colonnes ou autre chose ?

12 se divise par 2, 3, 4 et 6, c'est pourquoi c'est devenu la valeur par défaut. Les tableaux de bord denses utilisent parfois 24 ; les pages marketing simples se contentent de 6, voire 4.

Outils similaires

Générateur de dégradé CSS Concevez des dégradés CSS linéaires, radiaux et coniques avec aperçu en direct et copiez le code. Lancer Générateur d'ombre CSS (box-shadow) Concevez une box-shadow visuellement — décalages, flou, étalement, couleur, opacité et inset — avec aperçu en direct. Lancer Générateur de border-radius CSS Arrondissez chaque coin individuellement ou tous à la fois, en px ou %, avec aperçu en direct et CSS copiable. Lancer Générateur d'ombre de texte CSS Concevez un text-shadow avec décalages, flou, couleur et opacité — aperçu en direct sur un texte d'exemple. Lancer