DevBolt
Processed in your browser. Your data never leaves your device.

How do I build a CSS grid layout online?

Define columns, rows, and gap with visual controls, then place items on the grid with a live preview. Configure grid-template-columns, grid-template-rows, and item placement. Choose from presets like dashboard, gallery, or sidebar layout. Copy the CSS with one click. Everything runs in your browser.

3-column responsive grid
Input
Columns: 3
Rows: auto
Gap: 24px
Output
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
← Back to tools

CSS Grid Generator

Build CSS grid layouts visually. Configure columns, rows, gap, and per-item placement. Copy production-ready CSS.

Grid Container

px

Live Preview

Click an item to configure its grid placement properties

CSS Output

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
}

Layout Presets

About CSS Grid

CSS Grid is a two-dimensional layout system that handles both columns and rows simultaneously, unlike flexbox which is one-dimensional.

grid-template-columns / rows define the track sizes. 1fr 1fr 1fr creates three equal columns. repeat(3, 1fr) is equivalent.

fr is a fractional unit that distributes available space. 1fr 2fr gives the second column twice the space.

grid-column / grid-row on items control placement. span 2 makes an item stretch across two tracks.

gap adds consistent spacing between grid tracks. You can set row-gap and column-gap independently.

auto-fill / auto-fit with minmax() create responsive grids without media queries.

Tips & Best Practices

Pro Tip

Use minmax() with auto-fill for responsive grids without media queries

grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) creates a responsive grid that automatically adjusts column count based on container width. Items are at least 250px wide and grow to fill space. Zero media queries, zero JavaScript — pure CSS responsive layout.

Common Pitfall

auto-fill vs auto-fit: subtle but important difference

auto-fill creates empty tracks when there's extra space. auto-fit collapses empty tracks, stretching items to fill. With 2 items in a 4-column grid: auto-fill leaves 2 empty column tracks; auto-fit stretches the 2 items to fill all space. Use auto-fit for most layouts, auto-fill when you need placeholder spacing.

Real-World Example

Named grid areas create self-documenting layouts

grid-template-areas: "header header" "sidebar main" "footer footer" reads like an ASCII art layout. Assign areas with grid-area: header. This is more maintainable than grid-column/grid-row coordinates for complex page layouts. Areas can be rearranged in media queries for responsive design.

Security Note

CSS Grid can visually reorder form fields away from tab order

Like Flexbox order, Grid placement (grid-row, grid-column, grid-area) changes visual position without affecting DOM/tab order. A login form where the password field visually appears before username but tabs in reverse order is confusing and could be exploited for phishing-style misdirection.

Frequently Asked Questions

How do I create a responsive CSS Grid layout without media queries?
Use repeat() with auto-fill or auto-fit and minmax(). The pattern grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) creates columns that are at least 250px wide, automatically wrapping on smaller screens. auto-fill creates invisible empty tracks when extra space exists, while auto-fit collapses empty tracks so items stretch to fill the row. This single line of CSS replaces multiple media query breakpoints. DevBolt's Grid Generator lets you configure this visually.
What does the fr unit mean in CSS Grid?
The fr (fraction) unit represents a share of the remaining available space after fixed-size tracks and gaps are calculated. Unlike percentages, which are based on total container width and do not account for gaps, fr units distribute only leftover space. This prevents content overflow issues that percentages can cause when combined with gaps. The fr unit is the preferred unit for flexible grid tracks in virtually all use cases.
How do I make grid items span multiple rows or columns?
Use grid-column and grid-row properties on child elements. The syntax grid-column: 1 / 3 spans two columns. The shorthand grid-column: span 2 achieves the same result. Combine both: grid-column: span 2; grid-row: span 2 creates a 2x2 block. Named grid areas offer another approach using grid-template-areas with string patterns on the container and grid-area on children. DevBolt's Grid Generator supports both methods with a visual interface.

Related Generate Tools

FX

CSS Filter Generator

Build CSS filter effects visually — blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate, sepia, and drop-shadow with 12 presets and live preview

#

Hash Generator

Generate SHA-1, SHA-256, SHA-384, SHA-512 hashes

ID

UUID Generator

Generate random UUID v4 identifiers in bulk

PW

Password Generator

Generate strong, secure random passwords