Grid Generator
Generate a custom CSS grid system tailored to your needs.
Settings
Result
About this tool
This generator builds the code for a responsive grid whose column count changes with the screen size. It fits a list of cards, a product gallery or a dashboard layout. You set 1 to 12 columns for mobile, tablet and desktop, a gap in pixels, and a container that is either capped at 1000px or full width.
The code comes in three flavors. Tailwind CSS gives you grid-cols classes with md and lg prefixes. Bootstrap gives you row-cols classes, which the framework caps at six columns, with the gap set through its gutter variables. Plain CSS gives you a stylesheet with two media queries, at 768 and 1024px, along with a sample HTML structure.
How to use it
- Under Select Framework, pick Tailwind CSS, Bootstrap or CSS, then choose the Container Size.
- Fill in Columns for Mobile, Columns for Tablet and Columns for Desktop, then the Gap (in pixels).
- Use the Mobile, Tablet and Desktop buttons in the Result panel to check each layout.
- Click Generate Grid, then Copy CSS Code, or Copy HTML Code when using plain CSS.
Frequently asked questions
Which breakpoints are used?
The plain CSS version switches layouts at 768px for tablet and 1024px for desktop. The Tailwind CSS and Bootstrap versions rely on each framework's own md and lg prefixes instead.
Why is Bootstrap limited to six columns?
Bootstrap's row-cols classes only go from 1 to 6. If you ask for more columns, the tool caps the value at six and adds a comment to the generated code so you know it happened.
Does the tool generate the HTML too?
In plain CSS mode, yes: a container, the grid and three sample items, copied separately from the CSS. For Tailwind CSS and Bootstrap, the output is already HTML with the classes in place, ready for your own items.
Are my settings sent anywhere?
No. The code is generated in your browser with no network request. The framework, column counts, gap and container size are only remembered in the browser's local storage.