CSS Grid Calculator
Calculate column widths, gutters, and margins for any grid layout.
Generated CSS
CSS Grid Calculator
Use the CSS Grid Calculator to calculate column widths, gutter sizes, margins, and available grid space for your layouts. Adjust the number of columns and grid dimensions to create a precise layout for websites, user interfaces, dashboards, cards, buttons, and other design elements.
How to use the CSS Grid Calculator
Enter the number of columns, maximum width, gutter width, and margin width. The calculator instantly updates the grid preview and calculates the resulting column width based on the values you provide.
Understanding columns, gutters, and margins
Columns define the number of vertical areas in a grid. Gutters are the spaces between columns, while margins define the space between the grid and its outer edges. Together, these values determine the actual dimensions of the grid and the available width of each column.
Use grids for web and UI design
A consistent grid can help create balanced layouts across websites, landing pages, dashboards, cards, navigation elements, and other interface components. Use the calculator to experiment with different column counts, spacing values, and maximum widths before implementing your layout in CSS.