CSS Grid Generator

Set the number of columns and rows, adjust the gap size, then click any cell to select it. Use the span controls to make cells span multiple rows or columns. Choose from presets like Holy Grail, Photo Gallery, or Dashboard. Copy the generated CSS and HTML to use in your project.

The fr unit stands for "fraction" of the available space. After fixed-size tracks (px, em, %) are subtracted, the remaining space is divided proportionally among fr tracks. For example, grid-template-columns: 1fr 2fr 1fr gives the middle column twice as much space as the sides.

Use media queries to change grid-template-columns at different breakpoints. Alternatively, use auto-fit or auto-fill with minmax() to create grids that automatically adjust based on container width without media queries.

CSS Grid is supported by all modern browsers including Chrome, Firefox, Safari, and Edge. Internet Explorer 11 has partial support using an older syntax. For modern web development, Grid is considered safe and standard.

CSS Grid is two-dimensional (rows and columns simultaneously), making it ideal for page layouts and complex grid structures. Flexbox is one-dimensional (either row or column), best for navigation bars, centering items, or distributing space along a single axis.

AI chatbots like ChatGPT and Claude generate text-only responses. They can describe CSS grid code but cannot render, display, or let you interact with a visual grid layout. This tool provides a real, interactive visual grid that you can see and manipulate in your browser - something no AI can do.