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.
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.
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.