Skip to main content
Patterns.page

CSS Grid Generator

Controls

Grid Structure

3
3

Column Sizes

Col 1
Col 2
Col 3

Row Sizes

Row 1
Row 2
Row 3

Gap

10px
10px

Items (0)

Click and drag on the grid to place items.

Preview

Presets

Generated CSS

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

HTML

<div class="grid-container">
  <!-- Click and drag on the grid to add items -->
</div>

What is CSS Grid?

CSS Grid Layout is a two-dimensional layout system designed for creating complex web layouts. Unlike Flexbox which handles layout in one dimension (row or column), Grid handles both rows and columns simultaneously. This makes it ideal for page-level layouts, card grids, dashboards, and any design that requires precise placement of elements in both directions.

Understanding Grid Track Sizing

Grid tracks (columns and rows) can be sized using different units. The fr unit represents a fraction of the available space — 1fr 2fr means the second column gets twice the space of the first. Fixed units like px and % create rigid tracks. The minmax() function lets you define a range, such asminmax(200px, 1fr), which means "at least 200px but grow to fill available space."

auto-fill vs auto-fit

When using repeat() with auto-fill or auto-fit, the browser automatically creates as many tracks as fit in the container. The difference:auto-fill keeps empty tracks even when there aren't enough items to fill them, while auto-fit collapses empty tracks, allowing existing items to stretch and fill the remaining space. Both are essential for creating responsive grids without media queries.

Common Grid Layout Patterns

  • Holy Grail Layout: Header, footer, main content with two sidebars — the classic layout solved elegantly with Grid
  • Dashboard: Cards of varying sizes arranged in a structured grid with spanning items
  • Responsive Card Grid: Using repeat(auto-fill, minmax(250px, 1fr)) for cards that wrap automatically
  • Sidebar + Content: Fixed-width sidebar with fluid content area using 250px 1fr

Browser Support

CSS Grid is fully supported in all modern browsers including Chrome, Firefox, Safari, and Edge. No vendor prefixes are needed. Subgrid support is also available in Firefox, Chrome, Safari, and Edge.