Calculateur de grille de mise en page (colonnes, gouttières, grille 8pt)
Saisissez la largeur d'écran ou de page, le nombre de colonnes, la gouttière et les marges pour obtenir des largeurs de colonne exactes, avec un aperçu sur grille 8pt. En px et en mm
Chargement de l’outil…
Saisissez la largeur totale, le nombre de colonnes, la gouttière et les marges latérales pour obtenir la largeur d'une colonne et de toute suite de colonnes. Utile pour une grille web de 12 colonnes ou pour diviser une page imprimée en millimètres.
Mode d’emploi
- Choisissez px ou mm sous « Unité », puis une « Largeur prédéfinie », ou saisissez la « Largeur totale ».
- Saisissez « Colonnes », « Gouttière » et « Marge ». Si les marges diffèrent, réglez « Marges latérales » sur « Gauche et droite ».
- Lisez « Largeur de colonne » et le tableau « Largeurs cumulées », et vérifiez le badge de la grille choisie sous « Unité de grille ». Si elle est hors grille, essayez la largeur totale indiquée dans la note.
- Activez « Comparer trois points de rupture » pour voir trois largeurs à la fois, puis appuyez sur « Copier le CSS » pour récupérer le code.
Fonctionnement
- Largeur de colonne = (largeur totale − marge gauche − marge droite − gouttière × (colonnes − 1)) ÷ colonnes. Largeur de n colonnes = largeur de colonne × n + gouttière × (n − 1).
- Avec une « Largeur maximale du contenu », un total plus large garde le contenu à cette largeur et répartit le reste entre les marges.
- En mode mm, l'unité de grille est en points : 1 pt = 0,3528 mm, et 1 mm = 3,78 px à 96 dpi.
- Vos valeurs sont conservées dans le navigateur de cet appareil.
Questions fréquentes
- Quelle est la largeur d'une colonne dans une grille de 1200 px à 12 colonnes ?
- Avec une gouttière de 24 px et sans marges, (1200 − 24 × 11) ÷ 12 = 78 px. Avec une gouttière de 32 px, 70,67 px.
- Que faire si la colonne n'est pas sur la grille de 8 px ?
- La note donne le multiple le plus proche et la largeur totale qui le produit : une colonne de 78 px passe à 80 px avec un contenu de 1224 px. Un léger changement de gouttière ou de marges fonctionne aussi.
- Combien de colonnes pour une page A4 ?
- Il n'y a pas de réponse unique. Deux ou trois conviennent au texte ; six ou douze facilitent le mélange de photos et de tableaux. Saisissez A4 210 mm, marges 15 mm et gouttière 4 mm pour comparer.
- Comment utiliser le CSS copié ?
- .container fixe la largeur du contenu et le remplissage latéral ; .grid fixe les colonnes et l'écart. Un élément sur plusieurs colonnes reçoit grid-column: span 4. En mode mm, l'extrait contient aussi des marges @page pour l'impression.