IconVault logoIconVault
Sign in

Grid Calculator - Free Online Design Tool | IconVault

Calculate CSS grid columns visually: container width, gaps, responsive breakpoints and copy-paste CSS. Free.

All tools

Grid Calculator

Visual grid math with responsive presets

5 of 5 free uses left

Preset

Container width1200px
Columns12
Gap24px

Each column

78.0px

(1200 - 24 x 11) / 12

Breakpoints

@mediapx:cols
@mediapx:cols

Visual preview

1200px container, 12 cols, 24px gap

78
78
78
78
78
78
78
78
78
78
78
78

Each cell shows its computed column width in pixels.

Generated CSS

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
  max-width: 1200px;
}

@media (max-width: 768px) {
  .grid {
    grid-template-columns: repeat(8, 1fr);
  }
}

@media (max-width: 480px) {
  .grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

About this tool

IconVault's Grid Calculator answers the oldest layout question: how wide is each column? Enter your container width, column count and gap, and get the exact column width in pixels with a live visual preview. Add responsive breakpoints and the tool generates the media queries for you. Completely free and runs fully in your browser.

Presets for desktop, laptop, tablet, mobile and Bootstrap containers get you started in one click, and the generated CSS uses `repeat()` and `1fr` so it stays clean and maintainable.

Frequently asked questions

Popular searches

grid calculatorcss grid calculatorcolumn width calculatorgrid column calculatorcss grid layout calculatorcalculate grid columnsgrid gap calculatorresponsive grid calculatorbootstrap grid calculator12 column grid calculatorgrid system calculatorweb grid calculatorlayout grid calculatorcss grid generatorgrid-template-columns calculatorrepeat fr calculatorcontainer width columnshow wide is a grid columngrid mathcolumn gutter calculatordesign grid calculator1200px 12 column grid1440 grid columnstablet grid 8 columnsmobile grid 4 columnsgrid breakpoints generatormedia query grid generatorresponsive columns csscss grid media queriesgrid visualizersee grid columnsgrid preview toolfrontend layout mathweb design grid systemgrid spacing toolgutter width calculatorgrid framework calculatorcss grid repeat1fr column widthgrid-template-columns repeatlayout calculator onlinedesign system gridgrid tokens calculatorfree grid toolgrid cheat sheetcss grid tutoriallearn css gridgrid layout examplespage grid calculatorgrid column width calculator

More tools

Font Pairing

Curated heading and body font pairs with live preview

Font Preview

Preview 200+ Google Fonts with your own text

Glassmorphism Generator

Design frosted glass cards and copy the CSS

Gradient Text

Gradient headlines with live preview and CSS

Coming soon

CLI

Coming soon

Figma plugin

Coming soon

VS Code extension

Coming soon

Chrome extension

Coming soon

AI icon generator

Coming soon

Team workspaces

Coming soon

View all 10+ tools →