Enter the container width, the number of columns you want, the gap between columns and the outer margin. The tool calculates the width of each column and generates the matching CSS Grid code.
Enter a positive container width, at least one column, and a gutter and margin of zero or more.
Copied to clipboard.
Why use a grid system in web design
A grid system splits a page into a fixed number of columns separated by consistent gutters, then aligns every element to that structure. This gives a layout a visual rhythm that a reader notices even without being able to name it: headings, images and text blocks line up with each other instead of floating at arbitrary positions. On a responsive site, a grid also gives you a single set of rules to adapt as the viewport changes, rather than repositioning each element by hand for every screen size.
CSS Grid vs Flexbox vs Bootstrap: when to use what, and where Tailwind fits in
CSS Grid is built for two-dimensional layout, rows and columns at once, which makes it a natural fit for an overall page structure or a card layout with consistent alignment in both directions. Flexbox works on a single axis (row or column) and suits smaller components such as a navigation bar or a button group where items need to distribute or align along one line. Bootstrap's grid is a 12-column system built on top of Flexbox, delivered as ready-made classes (col-6, col-4, and so on): it remains widely taught on UK coding bootcamps and self-taught developer courses because it needs no custom CSS to get a working layout. Tailwind CSS has grown fast among the same audience with a different approach, utility classes applied directly in the markup rather than named grid components, which suits developers who want fine control without leaving their HTML. For a new project without an existing framework, plain CSS Grid usually gives a cleaner result with less markup than either.
Limits of the generated code
The code this tool produces is a starting point for a single, fixed-width breakpoint. It does not generate media queries, so the number of columns and the gutter stay the same at every screen width unless you add breakpoints yourself. In practice a design typically drops to fewer columns on a phone screen (often 4) and a mid-range count on a tablet (often 8), keeping the full count only on desktop. Reduce the column count and adjust the gutter inside a media query for each breakpoint your design needs.
Good gutter and margin practices
Common gutter values in web design are 8px, 16px and 24px, usually matching a spacing scale used elsewhere on the site (buttons, padding, margins) so the layout feels consistent rather than arbitrary. The 12-column grid itself is inherited from print design, where a page divided into 12 parts could be split evenly into halves, thirds, quarters or sixths, a property web design kept because it offers the same flexibility for column spans. A margin equal to or larger than the gutter keeps the outer edge of the layout from feeling cramped against the edge of the screen. For proportions based on a page or image ratio rather than a column count, see the Aspect Ratio Calculator, and for spacing based on the golden ratio, see the Golden Ratio Calculator.