CSS Grid Generator
Build CSS Grid layouts visually — set columns, rows, gaps, alignment, and item spans, see the result live, and copy clean CSS in one click. No signup, runs entirely in your browser.
⏱ 8 min read · Complete guide below
Container
Items
Preview
CSS Output
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
}How the CSS Grid Generator Works
- 1Set grid-template-columns — type a value directly or click a preset chip. Common patterns:
repeat(3, 1fr)for equal columns,200px 1frfor a fixed sidebar, orrepeat(auto-fill, minmax(150px, 1fr))for a responsive grid. - 2Adjust gap, alignment, and row sizing using the container controls. Changes appear in the preview instantly.
- 3Configure individual items — set col-span and row-span to make items occupy multiple tracks, or override alignment per item with justify-self and align-self.
- 4Copy the CSS output and paste it into your stylesheet. Only non-default values are included, so the output stays clean and minimal.
CSS Grid vs Flexbox — When to Use Each
CSS Grid is a two-dimensional layout system — it controls rows and columns simultaneously. Flexbox is one-dimensional — it works along a single axis at a time. Use Grid when the overall page or component structure needs items to align across both rows and columns (page layouts, card grids, dashboards). Use Flexbox for smaller, linear arrangements inside those grid cells (a button group, a nav bar, a form row). The two are complementary: a typical page uses Grid at the macro level and Flexbox inside individual components.
Tips for Better CSS Grid Layouts
Use fr units for fluid columns
Replace fixed pixel widths with fr units so columns scale proportionally. repeat(3, 1fr) creates three equal columns that fill the container regardless of viewport size.
Responsive grids with auto-fill
repeat(auto-fill, minmax(200px, 1fr)) creates a grid that automatically adjusts column count as the container resizes — no media queries needed for basic responsiveness.
Mix fixed and fluid tracks
250px 1fr gives a fixed-width sidebar and a fluid main area. The fr column takes all remaining space after the fixed column is placed — ideal for two-column page layouts.
Use gap instead of margins
The gap property adds space between grid tracks without adding extra space at the edges. This is cleaner than using margins on items, which create unwanted outer gaps.
Span items for featured content
Set col-span to 2 or 3 on a featured card to make it stand out in a uniform grid. Combine with row-span to create magazine-style layouts where a hero item dominates a section.
Name grid areas for clarity
For complex page layouts, use grid-template-areas to assign names like "header", "sidebar", "main". It makes the layout intent self-documenting and much easier to rearrange with media queries.
The fr Unit and minmax(): Fluid, Responsive Tracks
The feature that makes CSS Grid feel modern is the fr unit — a fraction of the available space. Instead of calculating pixel widths, you describe proportions: 1fr 1fr 1fr makes three equal columns, and 2fr 1fr makes the first column twice as wide as the second. The browser does the arithmetic, dividing the leftover space after any fixed-size tracks are placed. This means 250px 1fr gives you a fixed 250px sidebar and a main column that fluidly fills whatever remains — the classic two-column layout in a single line of CSS.
Pairing fr with minmax() unlocks true responsiveness. minmax(200px, 1fr) tells a track to be at least 200px but grow to fill available space, so columns never get uncomfortably narrow. Combined with repeat() and the auto-fillor auto-fit keyword, this produces a grid that reflows on its own: repeat(auto-fit, minmax(200px, 1fr)) fits as many 200px-plus columns as the container allows and wraps the rest to new rows — a fully responsive card grid with no media queries at all. This one line is among the most useful patterns in modern CSS.
Named Grid Areas: Layouts You Can Read
For page-level layouts, Grid offers a remarkably readable feature: grid-template-areas. You give regions names and then draw the layout as ASCII-art strings. A classic “holy grail” page — header, sidebar, main, footer — can be written so the CSS literally looks like the layout it produces, with rows like "header header", "sidebar main", and "footer footer". Each element is then assigned to its area by name with grid-area: header.
The payoff is twofold. The layout becomes self-documenting — anyone reading the CSS can see the structure at a glance — and it becomes trivially rearrangeable: to move the sidebar to the other side or stack everything into one column on mobile, you simply rewrite the area strings inside a media query, without touching the HTML at all. For complex, named page structures, this is often clearer and more maintainable than line-based placement.
Explicit and Implicit Grids
It helps to understand that a grid has two parts. The explicit grid is the one you define directly with grid-template-columns and grid-template-rows. But when you place more items than the explicit grid has room for, the browser creates an implicit grid to hold the overflow — adding rows (or columns) automatically. You control the size of these auto-created tracks with grid-auto-rows and grid-auto-columns.
This matters in practice: often you define only your columns and let the rows be created implicitly as content flows in, which is exactly what you want for something like a gallery of unknown length. Knowing the distinction explains why a grid sometimes “just works” as you add items, and gives you the hooks (grid-auto-rows) to control how those extra rows are sized rather than leaving it to the content.
Grid's Alignment Superpowers
Grid brings a full, two-dimensional alignment toolkit that makes positioning content effortless. Within each cell, justify-items aligns content horizontally and align-items vertically, while justify-self and align-self override those for individual items. To align the whole grid inside a larger container, you use justify-content and align-content. Because these work on both axes at once, centring something perfectly — long a CSS headache — can be as simple as display: grid; place-items: center, a shorthand that sets both alignment properties in one go.
Mastering Grid comes down to a few big ideas working together: describe proportions with fr, make tracks flexible with minmax(), build responsive grids with auto-fit, name regions for readable page layouts, and lean on Grid's alignment properties for effortless positioning. Use the generator above to experiment with each of these against a live preview — changing a value and immediately seeing the layout respond is by far the fastest way to build a real intuition for how Grid thinks.
Frequently Asked Questions
What is CSS Grid and when should I use it?
CSS Grid is a two-dimensional layout system for the web. It lets you arrange elements in rows and columns simultaneously. Use it when you need to control both axes at once — page-level layouts, card grids, dashboards, image galleries, and any design that requires items to align across rows and columns. For single-axis layouts (a row of buttons, a vertical list), Flexbox is usually simpler.
What does the fr unit mean?
The fr (fractional unit) represents a fraction of the available space in the grid container. For example, "1fr 2fr 1fr" creates three columns where the middle column gets twice as much space as the outer two. fr units are calculated after any fixed-size columns (px, %, etc.) have been assigned their space, so they work well mixed with fixed widths: "200px 1fr" gives a 200px sidebar and a fluid main column.
What does repeat() do?
repeat() is a shorthand that lets you define repeating track patterns. "repeat(3, 1fr)" is equivalent to "1fr 1fr 1fr". You can also use repeat(auto-fill, minmax(150px, 1fr)) to create a responsive grid that automatically fills the row with as many 150px-minimum columns as fit, with each column growing to fill remaining space.
How does grid-column span work for items?
Setting col-span to 2 on an item generates "grid-column: span 2", meaning that item occupies two column tracks instead of one. Combined with row-span, you can create items that occupy any rectangular area within the grid. The browser places all other items around the spanning item automatically.
What is the difference between justify-items and justify-content?
justify-items controls how each item is aligned within its own grid cell (horizontal axis). justify-content controls how the entire grid is aligned within the grid container when the grid is smaller than the container. In most cases you will use justify-items to position content within cells, and justify-content only when the grid has a fixed total width narrower than the container.
What is the difference between justify-items and justify-self?
justify-items is a container property that sets the default alignment for all items. justify-self overrides that default for a specific item. For example, you might set justify-items: stretch on the container (all items fill their cells) but set justify-self: center on a single item to center just that one element.
Is my code stored anywhere?
No. The CSS Grid Generator runs entirely in your browser. No layout data, configuration, or CSS output is sent to any server. Everything stays local and is discarded when you close the tab.