Aisha K.
Mar 12, 2026
Clean layout and the results update instantly. Exactly what I needed for a quick planning check.
Unit Converters
CSS Grid Column Width Calculator
col = (width − gap × (n − 1)) / n.
Column = (container − gap × (columns − 1)) / columns. A 12-column 1200 px grid with 16 px gutters is 84 px columns. Bootstrap’s 30 px gutter era is why old comps look airy.
Container width
px → px
85.33 px
This is a fixed grid. CSS Grid with fr units will still flex.
- Container
- 1,200 px
- Columns
- 12
- Gap
- 16 px
Plain-English guide
Terms & how it works
Confused by a field? Read the short definitions here while you use the tool.
Container width
The “Container width” value used in this tool’s formula. Adjust it to see results update live.
Columns
The “Columns” value used in this tool’s formula. Adjust it to see results update live.
Gap (px)
The “Gap (px)” value used in this tool’s formula. Adjust it to see results update live.
How this calculator works
Column = (container − gap × (columns − 1)) / columns. A 12-column 1200 px grid with 16 px gutters is 84 px columns. Bootstrap’s 30 px gutter era is why old comps look airy. col = (width − gap × (n − 1)) / n. Example: 1200 px, 12 cols, 16 px gap → 84 px per column. 960 / 12 / 20 gap → 65 px.
col = (width − gap × (n − 1)) / n.
Example: 1200 px, 12 cols, 16 px gap → 84 px per column. 960 / 12 / 20 gap → 65 px.
When to use this Grid Column Width
Common use cases
- Column = (container − gap × (columns − 1)) / columns. A 12-column 1200 px grid with 16 px gutters is 84 px columns. Bootstrap’s 30 px gutter era is why old comps look airy.
- Sanity-check with this case: 1200 px, 12 cols, 16 px gap → 84 px per column. 960 / 12 / 20 gap → 65 px.
- The relationship is: col = (width − gap × (n − 1)) / n.
Localized examples
- Unit Converters: the example on this page uses the same formula as the widget.
What you get
- Fields: Container width, Columns, Gap (px)
- col = (width − gap × (n − 1)) / n.
- Example on the page: 1200 px, 12 cols, 16 px gap → 84 px per column. 960 / 12 / 20 gap → 65 px.
How to Convert Grid Column Width Step-by-Step
- 1Enter Container width, Columns, Gap (px). Use the values you have, not a catalog average, unless that is all you know.
- 2col = (width − gap × (n − 1)) / n.
- 3Worked case: 1200 px, 12 cols, 16 px gap → 84 px per column. 960 / 12 / 20 gap → 65 px.
- 4Check which dictionary the other person is using — US or UK, decimal or 1,024 — then trust the number.
Governing formula
col = (width − gap × (n − 1)) / n.
1200 px, 12 cols, 16 px gap → 84 px per column. 960 / 12 / 20 gap → 65 px.
Example: set Container width = 1,200, Columns = 12, Gap (px) = 16, then read the result.
Variable definitions
- value
Container width
The “Container width” field. Default 1200; typical range 200–4000.
- cols
Columns
The “Columns” field. Default 12; typical range 1–24.
- gap
Gap (px)
The “Gap (px)” field. Default 16; typical range 0–80.
- The conversion (col = (width − gap × (n − 1)) / n.) does not pick US vs UK gallons, SI vs binary megabytes, or Mach at altitude for you. Read the footnote on the page.
- Nothing here is uploaded for the calculation itself.
Frequently Asked Questions
fr shares leftover space after gaps. This is the fixed-px cousin.
Related calculators
Unit Converters
- Aspect RatioHeight = width × (ratio height / ratio width). 1920×1080 is 16:9. Instagram’s 1:1 is a crop, not a camera sensor. Letterboxing is you refusing to crop.
- Centimeters to Pixelspx = (cm / 2.54) × DPI. A 10 cm bar at 300 DPI is 1,181 px. A4 width 21 cm at 300 DPI is 2,480 px. Packaging die-lines still want millimeters and bleed; this is the raster step.
- Kilohertz to MegahertzDivide kHz by 1,000. AM radio in kHz, FM in MHz. 440 kHz is 0.44 MHz. 2,400 kHz is 2.4 MHz — not 2.4 GHz Wi-Fi; that is another thousand. The SI hertz prefix tool covers GHz and THz in the same grid.
- Miles to kg CO₂Default 0.404 kg/mile is a US EPA passenger-car average. Your truck is higher; a full EV is the grid’s carbon, not zero. This is tailpipe-style accounting for a planning conversation, not an offset invoice.
- Points to PixelsCSS says 1 pt = 1/72 in and 1 in = 96 px, so 12 pt is 16 px. Print at 300 DPI is a different grid. Word’s “12 pt” on paper is not your laptop’s CSS pixel.
- Resolution Pixel CalculatorMegapixels = width × height ÷ 1,000,000. 1920×1080 is 2.07 MP, not “1080p magic.” 4K UHD 3840×2160 is 8.3 MP. Phone “48 MP” modes are sensor marketing plus pixel binning — convert the actual still you exported.
Get a note when we add a planner
Occasional email when something new is worth opening. We never share your address. Unsubscribe anytime.
Discover & search
Explore More Tools
Related tools in Unit Converters — strengthening topical internal links.
Same category · 3 tools
Browse all →Meters to Kilometers
Unit Converters
A 5K is 5,000 meters, not 5 kilometers on the nose if your watch is sloppy. Divide meters by 1,000. Track races, building plans, and “how far was that hike” all live in this split.
Feet to Meters
Unit Converters
US height, ceiling height, and lumber still arrive in feet. Meter plans do not. One foot is exactly 0.3048 m — not “about a third.” Use this when a listing says 10 ft ceilings and the architect works in meters.
Inches to Centimeters
Unit Converters
Monitor diagonals, waist measurements, and photo prints still come in inches. Clothing charts in Europe come in cm. Multiply inches by 2.54. That factor is exact, not a kitchen guess.
Community
Reviews & Ratings
See what others think about this tool, then leave your own rating to help improve CalculioHub.
4.8
out of 5.0
4 reviews
Daniel R.
Feb 28, 2026
Very usable on mobile. Would love a save/export option later, but the math feels solid.
Priya S.
Feb 3, 2026
The FAQ section answered my questions before I even had to search. Smooth dark mode too.
Marcus L.
Jan 19, 2026
Simple inputs, clear outputs. This replaced three bookmarks I used to juggle.
Improve this tool
Suggestion Box
Share an idea, report a bug, or send general feedback for Grid Column Width. Your input helps shape what we build next.