CSS Grid Generator
Create CSS Grid layouts with a visual editor. Customize columns, rows, gaps, and alignment properties.
Grid Settings
Preview
CSS Code
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto auto auto;
column-gap: 16px;
row-gap: 16px;
justify-items: stretch;
align-items: stretch;
justify-content: start;
align-content: start;Quick Templates
What Is CSS Grid?
CSS Grid Layout is a two-dimensional layout system built into modern browsers that lets you design web pages using rows and columns simultaneously. Unlike older techniques such as floats or inline blocks, CSS Grid gives you precise control over where elements appear on both axes — horizontal and vertical — without needing to nest extra wrapper elements or fight the document flow.
Introduced in the CSS Grid Layout Level 1 specification and now supported across all major browsers, CSS Grid has become the go-to tool for building complex, responsive interfaces. Whether you're creating a photo gallery, a dashboard, a magazine-style page, or a simple product card grid, CSS Grid handles it with clean, readable code.
The CSS Grid Generator on this page gives you a visual, interactive way to configure every major grid property and instantly see the corresponding CSS code. Adjust columns, rows, gaps, and alignment using the controls — the generated CSS updates in real time and can be copied directly into your stylesheet. You also get a Tailwind CSS equivalent for projects using utility-class frameworks.
Grid is especially powerful because it separates layout concerns from content concerns. A grid container defines the structure; grid items simply slot into it. This makes maintenance much easier, since changing the layout means editing the container's CSS rather than restructuring the HTML. Combined with fr units and auto-fit/auto-fill, CSS Grid can produce intrinsically responsive layouts with almost no media queries.
How the CSS Grid Generator Works
The generator collects your chosen settings and assembles a ready-to-use CSS rule block. The output mirrors exactly what a browser would apply when you paste it into a stylesheet. Every property is set explicitly, so you can copy the result without worrying about inherited or default values interfering.
The generated CSS rule follows this structure for the grid container:
Generated CSS Grid Output
Where:
- columnTemplate= Space-separated track sizes for each column (e.g. 1fr 1fr 1fr)
- rowTemplate= Space-separated track sizes for each row (e.g. auto auto auto)
- columnGap= Horizontal gap between columns in pixels (0–64)
- rowGap= Vertical gap between rows in pixels (0–64)
- justifyItems= Inline-axis alignment of items within their cell (start | center | end | stretch)
- alignItems= Block-axis alignment of items within their cell (start | center | end | stretch)
- justifyContent= Distribution of columns within the grid container (start | center | end | space-between | space-around | space-evenly)
- alignContent= Distribution of rows within the grid container (start | center | end | space-between | space-around | space-evenly)
Tailwind CSS Equivalent
For projects built with Tailwind CSS, the generator also outputs a utility-class equivalent. Tailwind's grid utilities map directly to CSS Grid properties, though with some constraints: Tailwind uses a fixed 4-pixel spacing scale, so gap values are rounded to the nearest Tailwind step.
The Tailwind output is computed as:
grid— setsdisplay: gridgrid-cols-{columns}— sets equal fractional columns matching the column countgap-{Math.round(columnGap / 4)}— converts the pixel gap to a Tailwind spacing unit (columnGap ÷ 4, rounded to the nearest integer)
For example, a column gap of 16px becomes gap-4 (16 ÷ 4 = 4), and a gap of 20px becomes gap-5 (Math.round(20 / 4) = 5). Keep in mind that the Tailwind output represents a simplified version — custom column templates like 200px 1fr or repeat(auto-fit, minmax(200px, 1fr)) require inline styles or Tailwind's arbitrary-value syntax (grid-cols-[200px_1fr]) and are not captured in the quick Tailwind output.
The preview panel shows a live visual of your grid with numbered cells. The total number of visible cells is always columns × rows. Changing either value instantly updates the preview so you can verify the layout before copying the code.
Grid Template Columns, Rows, and the fr Unit
The two most influential properties in any CSS Grid layout are grid-template-columns and grid-template-rows. These define the track sizes — how wide each column is and how tall each row is. The generator auto-populates both templates when you change the column or row count, defaulting to equal 1fr columns and auto rows, but you can edit the text fields directly for custom layouts.
The fr unit (fraction) is unique to CSS Grid. One fr represents a fraction of the available free space in the grid container. After fixed-size and intrinsic tracks are placed, the remaining space is divided among fr tracks according to their ratio. So 1fr 1fr 1fr creates three equal columns, while 1fr 2fr gives the second column twice the width of the first.
Common column template patterns you can type directly into the generator:
| Template | Effect |
|---|---|
1fr 1fr 1fr | Three equal columns |
200px 1fr | Fixed 200px sidebar + fluid main area |
1fr 2fr | 1:2 ratio two-column layout |
repeat(3, 1fr) | Shorthand for three equal columns |
repeat(auto-fit, minmax(200px, 1fr)) | Responsive: as many columns as fit, minimum 200px each |
auto auto auto | Rows sized to their content |
For row templates, auto is the most common value — rows grow to fit their content. You can also use fixed heights like 200px, fractional sizes with fr, or the minmax() function for rows that have a minimum and maximum size.
Grid Gaps, Alignment, and Justification Properties
Beyond track sizing, CSS Grid provides a rich set of alignment properties. Understanding the distinction between the four alignment controls in this generator will help you build layouts that look right on every screen size.
column-gap and row-gap control the gutter space between tracks. Unlike margins on individual items, gaps are only inserted between tracks — never before the first track or after the last. This makes them far more reliable than manually applying margins. The generator lets you set each independently from 0 to 64px using sliders, and the pixel values are used directly in the CSS output.
justify-items controls how each grid item is aligned along the inline axis (horizontal in left-to-right languages) within its individual cell. It does not move cells around the grid — it only affects alignment within the cell's space. The stretch default makes items fill their cell horizontally; other options are start, center, and end.
align-items is the same concept but for the block axis (vertical). With stretch, grid items fill the full row height. With center, they sit in the vertical middle of their row. This is especially useful for card grids where cards should all appear the same height.
justify-content controls how the entire grid of columns is positioned within the container when the total column widths are less than the container width. This only takes effect when your columns use fixed or intrinsic sizes rather than fr units (because fr tracks absorb all remaining space). Options include space-between, which places equal space between columns, and space-evenly, which also adds equal space before the first and after the last column.
align-content mirrors justify-content on the vertical axis, distributing rows within the container when the total row heights are smaller than the container height.
CSS Grid vs Flexbox: When to Use Each
CSS Grid and Flexbox are complementary, not competing, layout systems. Flexbox is one-dimensional: it arranges items along a single axis (either a row or a column). Grid is two-dimensional: it controls both axes simultaneously. Choosing between them depends on what your layout needs.
Use CSS Grid when:
- You need to align items across both rows and columns at the same time
- You have a defined grid structure that items must conform to (e.g., a calendar, a dashboard, a photo mosaic)
- You want items in different rows to share the same column widths
- You want to place items explicitly in named or numbered grid areas
Use Flexbox when:
- You're distributing items along a single row or column (a nav bar, a button group, a card row)
- Item sizes are driven by content rather than a fixed track structure
- You need items to wrap freely based on available space without strict column alignment
In practice, most modern layouts use both: Grid for the overall page structure and major layout regions, Flexbox for components within those regions. The CSS Grid Generator helps you quickly produce the container-level CSS so you can focus on styling the items inside.
Worked Examples
3-Column Equal Layout (Default)
Problem:
Generate CSS for a standard 3-column grid with 3 rows and a 16px gap between all cells, using default alignment settings.
Solution Steps:
- 1Set Columns = 3, Rows = 3. The generator auto-sets column template to '1fr 1fr 1fr' and row template to 'auto auto auto'.
- 2Set Column Gap = 16px, Row Gap = 16px using the sliders.
- 3Leave Justify Items = stretch, Align Items = stretch, Justify Content = start, Align Content = start (defaults).
- 4The CSS output is: display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: auto auto auto; column-gap: 16px; row-gap: 16px; justify-items: stretch; align-items: stretch; justify-content: start; align-content: start;
- 5The Tailwind equivalent is: grid grid-cols-3 gap-4 (because Math.round(16 / 4) = 4).
Result:
A 3×3 grid of 9 equal cells, each column taking one-third of available width with 16px gutters between them. Tailwind: grid grid-cols-3 gap-4.
Sidebar + Main Content Layout
Problem:
Create a two-column layout with a fixed 200px sidebar and a fluid main area, using a 24px column gap.
Solution Steps:
- 1Set Columns = 2, Rows = 1 so the generator initializes two columns and one row.
- 2Edit the Column Template field directly to '200px 1fr' — this overrides the default '1fr 1fr'.
- 3Set Column Gap = 24px using the slider. Row Gap can remain 16px.
- 4The CSS output includes: grid-template-columns: 200px 1fr; column-gap: 24px; row-gap: 16px;
- 5Tailwind equivalent: grid grid-cols-2 gap-6 (Math.round(24 / 4) = 6). Note: Tailwind cannot express '200px 1fr' without arbitrary values.
Result:
A two-column layout where the left column is always 200px wide and the right column fills the remaining width. CSS: grid-template-columns: 200px 1fr; column-gap: 24px;
Responsive Auto-fit Grid
Problem:
Generate a responsive grid where columns shrink to fit and each card is at minimum 200px wide, with a 20px gap.
Solution Steps:
- 1Set Columns = 4, Rows = 3 (these drive the preview cell count: 4×3 = 12 cells).
- 2Edit the Column Template field to 'repeat(auto-fit, minmax(200px, 1fr))' — the generator passes this value directly into grid-template-columns.
- 3Set Column Gap = 20px, Row Gap = 20px.
- 4The CSS output includes: grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); column-gap: 20px; row-gap: 20px;
- 5Tailwind equivalent: grid grid-cols-4 gap-5 (Math.round(20 / 4) = 5). The auto-fit behavior requires custom CSS or Tailwind arbitrary values in real usage.
Result:
A fully responsive grid that fills as many 200px-minimum columns as fit in the container. On a 900px container you get roughly 4 columns; on 600px, 3 columns — all without media queries. CSS: grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); column-gap: 20px; row-gap: 20px;
Centered Card Grid with Space-Between
Problem:
Build a 4-column grid using fixed-width columns of 150px each, distributing them evenly with space-between and center-aligning their content.
Solution Steps:
- 1Set Columns = 4, Rows = 2. Edit Column Template to '150px 150px 150px 150px'.
- 2Set Column Gap = 0px (space-between will handle distribution).
- 3Set Justify Content = space-between to spread columns across the full container width.
- 4Set Align Items = center to vertically center item content within each row.
- 5CSS output: grid-template-columns: 150px 150px 150px 150px; column-gap: 0px; justify-content: space-between; align-items: center;
Result:
Four 150px-wide columns spread evenly across the container with equal space between them. Items sit vertically centered within their row. Tailwind: grid grid-cols-4 gap-0.
Tips & Best Practices
- ✓Use '1fr' tracks for equal columns — they automatically divide the available space without any percentage math.
- ✓Type 'repeat(auto-fit, minmax(200px, 1fr))' into the Column Template field to get a fully responsive grid that needs no media queries.
- ✓Combine fixed and flexible tracks (e.g. '200px 1fr') to create sidebar layouts where one column is always a set width.
- ✓Keep column-gap and row-gap equal for a uniform gutter on all sides — or set them independently for layouts where horizontal and vertical breathing room should differ.
- ✓Use 'justify-content: space-between' only when your columns have fixed or intrinsic sizes — it has no visible effect on fr-unit tracks because fr already absorbs all free space.
- ✓Set 'align-items: center' to vertically center content inside each row, which is especially useful for card grids where cards may have varying content height.
- ✓Preview your layout in browser DevTools (Firefox has an excellent Grid Inspector) to see grid lines, area names, and track sizes overlaid on the live page.
- ✓Use the Quick Templates buttons (2 Cols, 3 Cols, 4 Cols, 1:2 Ratio, Fixed+Flex, Auto-fit) to jump to common starting configurations and then fine-tune from there.
- ✓For the Tailwind output to be accurate, use gap values that are multiples of 4px — 8px, 12px, 16px, 20px, 24px — since Tailwind's spacing scale is 4px-based.
- ✓Copy only the properties that differ from your existing CSS — if your stylesheet already sets 'display: grid', you only need to paste the template, gap, and alignment lines.
Frequently Asked Questions
Sources & References
Last updated: 2026-06-05
Help us improve!
How would you rate the CSS Grid Generator?
Editorial Note
MyCalcBuddy Editorial Team
This page is maintained as an educational calculator reference.
Formula Source: Standard Mathematical References
by Various