CSS Grid Generator

What is CSS Grid?

CSS Grid is a two-dimensional layout system built into every modern browser. Unlike Flexbox, which arranges items along a single row or column, Grid lets you control rows and columns at the same time. That makes it the right tool for page-level layouts: headers, sidebars, main content, footers, and card layouts that need to align both horizontally and vertically.

You turn any element into a grid container with display: grid, then define the number and size of its tracks with grid-template-columns and grid-template-rows. Child elements become grid items automatically and can be placed into specific cells, span multiple tracks, or be left to auto-place in document order.

Some developers still call this an "HTML grid layout" out of habit, since it governs how HTML elements are arranged on the page. That naming is a little misleading: the grid itself is defined entirely in CSS, with no extra markup, class naming convention, or JavaScript library required.

CSS Grid Syntax

A basic grid container needs three things: a display mode, a column definition, and usually a gap:

/* Container */
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto 1fr auto;
  gap: 16px;
}

repeat(3, 1fr) is shorthand for writing 1fr 1fr 1fr: three equal-width columns. gap sets space between both rows and columns in one property, or use row-gap and column-gap to control them independently.

Understanding the fr Unit

The fr unit stands for "fraction" and represents a share of the free space left in the grid container after fixed-size tracks and gaps are subtracted. grid-template-columns: 1fr 1fr 1fr splits the remaining space into three equal parts, while 2fr 1fr gives the first column twice the width of the second.

/* Fixed sidebar, flexible content */
.grid {
  grid-template-columns: 240px 1fr;
}

The repeat() and minmax() Functions

repeat() is shorthand for writing the same track size multiple times. repeat(3, 1fr) is identical to writing 1fr 1fr 1fr by hand, and it becomes essential once a grid needs a dozen or more equal tracks.

minmax() sets a floor and a ceiling for a single track. minmax(200px, 1fr) never lets that track shrink below 200px, but lets it grow to fill available space above that. The two functions are almost always paired together as repeat(auto-fit, minmax(...)) for responsive grids, which is exactly what powers this generator's Card Grid and Image Gallery presets.

/* Six equal columns via repeat() */
.grid { grid-template-columns: repeat(6, 1fr); }

/* A track that never drops below 150px */
.grid { grid-template-columns: minmax(150px, 1fr) 1fr 1fr; }

Grid Template Areas

grid-template-areas lets you name regions of a grid as a text map, then assign each item to a name with grid-area. It reads like an ASCII diagram of the layout, which is far easier to scan than a list of line numbers, especially for page-level structures like a header, sidebar, and footer.

.grid {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }

Every row in the string needs the same number of cell names, and a repeated name spans that item across multiple cells automatically. Use a single period . to leave a cell empty.

Placing Items with Line Numbers

The alternative to named areas is placing items directly by grid line number, counting from 1 at the outer edge:

.item {
  grid-column: 2 / 4;   /* start line 2, end line 4 */
  grid-row: 1 / span 2; /* start line 1, span 2 tracks */
}

span 2 tells an item to stretch across two tracks starting from wherever it's placed, without naming an exact end line. Spans are more forgiving when tracks are added or removed later; explicit start and end lines are more predictable when an item's exact position matters.

Responsive Grids Without Media Queries

Combine repeat() with auto-fit or auto-fill and minmax() to build a grid that reflows on its own as the container width changes, with zero breakpoints written:

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

The browser fits as many 220px-minimum columns as will comfortably fill the row, then stretches them to share any remaining space. As the container narrows, items wrap onto new rows automatically, similar to how flex-wrap works in Flexbox, but without a single media query written. auto-fit collapses empty tracks so existing items stretch to fill the row; auto-fill keeps empty tracks in place, which matters when a grid is mostly empty.

Common Grid Layout Patterns

A handful of named-area shapes cover most real layouts: the Holy Grail (header, sidebar, main, aside, footer), a Card Grid of equal auto-fit cards, a Bento Grid of asymmetric feature tiles, a Dashboard combining a fixed sidebar with stat tiles and a main panel, and an Image Gallery using grid-auto-flow: dense to pack items of mixed sizes without gaps. All five are available as one-click presets above.

Grid Properties Reference

Property	Applies to	What it controls
grid-template-columns	Container	Number and size of column tracks
grid-template-rows	Container	Number and size of row tracks
gap	Container	Space between rows and columns
justify-items / align-items	Container	Default alignment of item content on the row / column axis
justify-content / align-content	Container	Alignment of the whole track grid when it's smaller than the container
grid-auto-flow	Container	Direction and packing mode for auto-placed items
grid-column / grid-row	Item	Which lines or span an item occupies
grid-area	Item	Named-area assignment (shorthand for row/column start and end)
justify-self / align-self	Item	Overrides the container's alignment for one item

How to Use This Generator

1. Pick a starting point from the presets, or start blank and set your column and row counts in the Container tab.
2. Drag on empty cells in the canvas to draw a new item, or click + Add Item in the Items tab.
3. Drag an item's body to move it, or its bottom-right corner to resize it. Selecting an item also shows numeric start and end inputs for precise placement.
4. Toggle Use named areas to switch the CSS output between grid-template-areas and explicit line numbers.
5. Switch the output tab to CSS, Tailwind, or Bootstrap, and click Copy.

Frequently Asked Questions

What does 1fr mean in CSS Grid?

fr stands for "fraction unit." It represents a share of the remaining free space in the grid container after fixed-size tracks and gaps are subtracted. grid-template-columns: 1fr 1fr 1fr creates three equal-width columns, while 2fr 1fr gives the first column twice the space of the second. Unlike percentages, fr accounts for gaps automatically, so you never need to subtract gap width from your calculations.

What is the difference between grid-template-columns and grid-auto-columns?

grid-template-columns defines the explicit tracks you set up ahead of time. grid-auto-columns controls the size of implicit tracks the browser creates automatically when an item is placed outside the explicit grid, such as a column you never defined.

How do I make a CSS Grid responsive without media queries?

Use repeat(auto-fit, minmax(200px, 1fr)) (or auto-fill) on grid-template-columns. The browser recalculates how many columns fit as the container width changes, so cards wrap automatically on narrow screens with zero breakpoints written. This generator's Card Grid and Image Gallery presets both use this pattern.

What is grid-template-areas and how do I use it?

grid-template-areas lets you name regions of your grid as a text map, then assign each item to a name with grid-area. It reads like an ASCII diagram of your layout, which makes the CSS far easier to scan than a list of line numbers, especially for page-level layouts like a header, sidebar, and footer.

How do I center items with CSS Grid?

Set justify-items: center and align-items: center on the container to center every item inside it. To center just one item, use justify-self and align-self on that item alone. For the common case of centering one lone element in the whole page, display: grid; place-items: center; on a full-height container is the shortest way to do it.

What's the difference between grid-column: span 2 and setting explicit start and end lines?

span 2 tells an item to stretch across two tracks starting from wherever it's placed, without naming exact line numbers. grid-column: 2 / 4 pins the item to specific lines regardless of layout changes elsewhere. Spans are more forgiving when columns are added or removed later; explicit lines are more predictable when exact position matters.

Can I use CSS Grid and Flexbox together?

Yes, and most real layouts do. A common pattern uses Grid for the page-level structure (header, sidebar, main, footer) and Flexbox inside individual grid items for one-dimensional content, like a button row or a card's icon-and-label pairing. Grid handles two dimensions at once; Flexbox handles one dimension well.

What is CSS Subgrid and when should I use it?

subgrid lets a nested grid item inherit its parent's column or row tracks instead of defining its own, so content in different cards can align to the same underlying grid lines even when each card holds a different amount of content. Set grid-template-columns: subgrid (or grid-template-rows: subgrid) on the nested grid container. Browser support is solid in current versions of Chrome, Firefox, and Safari, but check your own analytics before relying on it for critical layout.

Why is my grid item overflowing its column instead of shrinking to fit?

Grid and flex items have an initial min-width and min-height of auto, which means text or an image inside can force the track wider than intended, an effect often called "grid blowout." Add min-width: 0 (and min-height: 0 for rows) to the item to let it shrink below its content's natural size, then handle any remaining overflow with text-overflow: ellipsis, white-space: nowrap, or overflow: hidden as needed.

Does this generator support Tailwind and Bootstrap output?

Yes. Switch the output tab to get grid-cols-*, col-span-*, and gap-* utility classes for Tailwind, or .grid and .g-col-* classes for Bootstrap's experimental CSS Grid system. The Bootstrap version requires enabling $enable-cssgrid in your own Sass build since it isn't part of the default CDN bundle.