CSS Grid Generator
Visual CSS Grid layout builder. Define columns, rows, gaps, add items with span controls, and export clean CSS.
Column Sizes
Row Sizes
Live Preview
3 × 3Grid Items
CSS Output
What is CSS Grid Layout?
CSS Grid Layout is a powerful two-dimensional layout system that lets you define rows and columns simultaneously. Unlike Flexbox, which works along a single axis, CSS Grid gives you full control over both horizontal and vertical placement of elements. It is the foundation of modern web layouts, enabling complex designs like dashboards, galleries, and multi-column pages with minimal code.
Understanding Grid Track Sizing
Grid tracks (columns and rows) can be sized using several units:
- fr (fraction): Distributes available space proportionally.
1fr 2frgives the second track twice the space of the first. - px (pixels): Sets a fixed track size. Ideal for sidebars or fixed-width columns.
- auto: Sizes the track to fit its content. Useful for content-driven layouts.
- minmax(min, max): Defines a size range, e.g.
minmax(200px, 1fr)for responsive tracks that never shrink below 200px.
Grid Item Placement and Spanning
Grid items can span multiple columns or rows using the grid-column and grid-row properties. The span keyword tells an item to occupy a specific number of tracks. For example, grid-column: span 2 makes the item stretch across two columns. You can also use explicit line numbers like grid-column: 1 / 3 for precise placement.
Common Grid Layout Patterns
Several layout patterns appear frequently in web design and are easily built with CSS Grid:
- Holy Grail: Header, footer, main content area with two sidebars — the classic web layout made trivial with Grid.
- Dashboard: Multiple cards arranged in a responsive grid with varying sizes for key metrics and charts.
- Gallery: Equal-sized cells for images or media, often using
repeat(auto-fill, minmax(...))for responsiveness. - Sidebar Layout: A fixed or flexible sidebar alongside a main content area using
250px 1frcolumn sizing.
Frequently Asked Questions
What is CSS Grid Layout?
CSS Grid Layout is a two-dimensional layout system built into CSS that lets you arrange content in rows and columns simultaneously. Unlike Flexbox which works in one dimension, Grid gives you precise control over both axes, making it ideal for full page layouts, dashboards, and complex component arrangements.
What is the difference between fr, px, and auto in CSS Grid?
The 'fr' unit represents a fraction of the available space in the grid container — 1fr 2fr means the second column gets twice the space. 'px' sets a fixed pixel width or height. 'auto' sizes the track to fit its content. You can also use minmax(min, max) to set flexible ranges.
How do grid-column and grid-row spanning work?
Grid items can span multiple columns or rows using grid-column and grid-row properties with the 'span' keyword. For example, grid-column: span 2 makes an item occupy two columns. You can also use explicit start/end lines like grid-column: 1 / 3 to place items precisely.
What is the Holy Grail layout in CSS Grid?
The Holy Grail layout is a classic web design pattern with a header, footer, main content area, and two sidebars. CSS Grid makes this layout trivial with grid-template-areas, allowing you to define named regions and place items declaratively.
Is this CSS Grid generator free to use?
Yes, this CSS Grid generator is completely free. It runs entirely in your browser with no sign-up required. All grid generation and code export happens client-side — no data is sent to any server.
Related Tools
- CSS Gradient Generator — Create beautiful CSS gradients with live preview and export.
- CSS Framework Comparison — Compare popular CSS frameworks side by side.