Website grids
Use 12 columns for flexible homepages, landing pages and portfolio layouts.
Free CSS grid calculator for web designers
Build clean layout grids instantly.
Choose columns, gap and container width. Preview your CSS grid and copy clean code for websites, landing pages and design systems.
Columns12
Gap24px
Column78px
Responsive rhythm
Adjust gaps and container width to create calm spacing across screen sizes.
Clean CSS
Copy a simple grid snippet and adapt it directly in your project.
What is a grid calculator?
A grid calculator helps you create structured layouts with consistent columns and spacing. It is useful for websites, landing pages, dashboards, portfolios and design systems.
CSS Grid makes it easier to divide a layout into columns. Set the number of columns, adjust the gap and copy the CSS directly into your project.
Use this tool when you want your layout to feel organised, responsive and easier to build.
Frequently asked questions
What is CSS Grid?
CSS Grid is a layout system in CSS that lets you create rows and columns for web layouts.
How many columns should I use?
12 columns are common for web design because they divide easily into halves, thirds and quarters. Smaller layouts may work well with 4, 6 or 8 columns.
What is a grid gap?
The grid gap is the space between columns or rows. Consistent gaps help your layout feel calm and organised.