Everything is 100% client-side. The tool holds the grid definition as plain numbers and strings, validates any named areas and serialises the “.container” rule and per-item grid-area rules right in your browser tab — no input is ever sent to a server, and there is no CDN in the processing path. You can copy just the container rule or the full CSS, and it works offline once the page is cached.

When you use repeat(auto-fit, minmax(min, 1fr)) or repeat(auto-fill, minmax(min, 1fr)), the browser fits as many columns as will hold the minimum size and wraps the rest — no media queries needed. The difference shows once the row is wider than the items need: auto-fit COLLAPSES the leftover empty tracks to zero width, so your existing items stretch to fill the whole row, whereas auto-fill KEEPS those empty tracks at full width, leaving visible gaps where future items could go. Use auto-fit when you want items to grow and fill; use auto-fill when you want a stable column rhythm.

CSS Grid is a two-dimensional system — it controls rows and columns at the same time — so it is the right tool for page-level layouts and card grids where alignment matters in both directions. Flexbox is one-dimensional, laying items out along a single row or column, which makes it the better fit for a nav bar, a toolbar or a group of buttons. In practice the two work together: Grid for the overall page, Flexbox inside a grid cell to align that cell’s contents. This generator builds Grid; a separate Flexbox playground handles the 1-D case.

grid-template-areas describes the layout as one quoted string per row, with a word for each column cell and a dot (.) for an empty cell. Repeating the same name across neighbouring cells — within a row and across rows — creates a single named area that spans them, and each child is placed with grid-area: name. The one hard rule is rectangularity: the cells sharing a name must form a filled rectangle, otherwise the whole grid-template-areas declaration is invalid and ignored. This tool paints areas cell-by-cell, checks the rectangle rule live, warns you if it fails, and emits the matching per-item grid-area rules automatically.