Largeur de colonne d'une grille
Calculateur
Résultats
- Largeur de colonne (px)
- 78
- Largeur du contenu (px)
- 1,200
- Largeur totale des gouttières (px)
- 264
- Colonne plus gouttière (px)
- 102
Résultats de design et d'impression
| Largeur de colonne (px) | 78 |
| Largeur du contenu (px) | 1,200 |
| Largeur totale des gouttières (px) | 264 |
| Colonne plus gouttière (px) | 102 |
Diagramme formula-map
- Largeur de colonne (px)
- 78
- Largeur du contenu (px)
- 1,200
- Largeur totale des gouttières (px)
- 264
- Colonne plus gouttière (px)
- 102
Détail de la formule
Formule
column = (container − 2 × margin − (columns − 1) × gutter) ÷ columns= 78
Note
Modèle simplifié : il s'agit de relations prépresse et typographiques standard calculées sur des valeurs nominales. Le foisonnement réel, l'épaisseur et le retrait du papier, les limites d'encrage d'un profil donné, les métriques de police et les tolérances de reliure varient selon le fournisseur et le travail ; confirmez avec votre imprimeur et une épreuve avant le tirage.
Plus dans Design et impression
Voir tout →Questions fréquentes
Comment la largeur de colonne est-elle calculée dans un système de grille ?+
Soustrayez l'espace total des gouttières (nombre de gouttières multiplié par leur largeur) de la largeur totale du conteneur, puis divisez le reste par le nombre de colonnes. Un conteneur de 1200px avec 12 colonnes et des gouttières de 20px laisse 1000px de colonnes, soit environ 83px par colonne.
Pourquoi ajouter plus de colonnes réduit-il la largeur de chaque colonne plus vite que prévu ?+
Parce que chaque colonne supplémentaire ajoute aussi une gouttière de plus, donc à la fois le numérateur (largeur disponible après les gouttières) diminue et le diviseur (nombre de colonnes) augmente — l'effet s'accumule plutôt que de croître de façon linéaire.
Combien de colonnes ma grille devrait-elle utiliser ?+
12 colonnes est la norme la plus courante en mise en page web, car ce nombre se divise également en moitiés, tiers, quarts et sixièmes, offrant des options flexibles pour le nombre de colonnes qu'un élément peut occuper. Des mises en page plus simples utilisent parfois 4 à 6 colonnes.
Les marges comptent-elles de la même façon que les gouttières dans ce calcul ?+
Non — les marges sont l'espace à l'extérieur des colonnes les plus externes (entre la grille et le bord du conteneur), tandis que les gouttières sont l'espace entre les colonnes. Les deux doivent être soustraites de la largeur totale, mais sont habituellement suivies comme des valeurs distinctes puisqu'elles sont souvent dimensionnées différemment.
Pourquoi un élément couvrant « X colonnes » ressort-il plus étroit que X fois la largeur d'une colonne ?+
Parce qu'un élément couvrant plusieurs colonnes n'inclut que les gouttières internes entre ses propres colonnes, pas de gouttière supplémentaire à chaque extrémité — donc sa largeur est (X x largeur de colonne) + ((X-1) x largeur de gouttière), et non simplement X fois la largeur d'une seule colonne.