Visual grid design · custom columns/rows · responsive breakpoints · named areas · 6 presets
/* Grid CSS will appear here */
CSS Grid is a two‑dimensional layout system that handles rows and columns simultaneously – the ultimate tool for complex page structures. The ng.cc online Grid generator lets you visually control column/row counts, gaps, alignment, named areas, and responsive breakpoints. Live preview updates instantly, and you can copy production‑ready CSS with one click. No need to memorise grid‑template‑columns or other complex syntax.
Adjust 1‑12 columns/rows freely. Column/row definitions support all units: fr, px, %, auto, minmax(). Any combination possible.
Use grid‑template‑areas by naming each cell; identical names merge automatically – perfect for holy grail or sidebar layouts.
4 preset breakpoints included, and you can add custom ones. Switch device sizes in preview and the @media code updates.
Basic, sidebar, card grid, dashboard, gallery, holy grail – one click to load and then tweak as needed.
| Property | Example | Description |
|---|---|---|
grid‑template‑columns | 1fr 2fr 1fr | Defines column widths; fr = fraction of free space |
grid‑template‑rows | 100px auto 80px | Defines row heights |
grid‑template‑areas | "header header" | Names grid areas for placement |
gap | 20px 15px | Row and column gaps |
justify‑items | center | start | end | stretch | Horizontal alignment inside cells |
align‑items | center | start | end | stretch | Vertical alignment inside cells |
fr unit explainedfr stands for “fraction” of the available space. For example 1fr 2fr means the second column is twice as wide as the first. You can mix with fixed units: 200px 1fr 1fr – first column fixed, remaining space split equally between the other two.
minmax()?
minmax(min, max) sets a size range. Example: minmax(100px, 1fr) means at least 100px, then expands. minmax(200px, 300px) keeps it between fixed limits. You can type it directly into the column/row input boxes.
grid‑template‑areas and grid‑area you place items by name rather than line numbers. For example, giving several cells the name “header” merges them into one region – the most elegant way to create holy grail or complex dashboards.
@media queries; you need to copy the CSS into your project. For preview, switching device sizes simulates different widths, but the current implementation forces a single column for simplicity. You can edit the generated CSS to fine‑tune.
repeat()?
repeat(3, 1fr) directly into the column/row inputs. The tool passes it unchanged to the CSS.
grid‑column: span 2 etc. on the item (you would need to add that manually), or 2) use named areas – assign the same name to several cells, and that item will cover them all. This tool focuses on the second method.
-ms‑ prefixes; our code works for 99% of production environments.
This tool is part of the ng.cc design toolkit. You might also need:
⚡ All tools run locally in your browser – no data ever uploaded. Safe for commercial projects.