What Is CSS Grid?
CSS Grid is the most powerful layout system in CSS — it handles two-dimensional layouts with precise control over rows, columns, gaps, alignment, and item placement. Before Grid, complex page layouts required floats, tables, or framework-specific classes. Grid makes them achievable with pure CSS.
Key Grid Concepts
grid-template-columns / rows — defines the track sizing. Use px, %, fr (fraction), minmax(), or auto. gap — spacing between grid cells (replaces the old grid-gap). grid-column / grid-row — places items across specific tracks using line numbers or span. fr unit — distributes available space proportionally, like flex-grow for grids.
How to Use This Grid Generator
- Set the number of columns and rows — Define your grid dimensions — common layouts include 12-column grids for full pages and 2–4 column grids for content sections.
- Adjust column and row sizes — Set sizes using fr units (fractional), px, %, auto, or minmax() for responsive behavior.
- Set gap spacing — Control the gap between rows and columns independently.
- Place items on the grid — Click cells to span items across multiple columns or rows. See the grid lines and item placement live.
- Copy the CSS — Grab the complete grid-template-columns, grid-template-rows, and gap declarations.
Tips and Best Practices
- → Use fr units for flexible columns.
grid-template-columns: 1fr 2fr 1fr creates three columns where the middle is twice as wide. Fr units distribute available space proportionally.
- → Use minmax() for responsive grids.
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) creates a responsive card grid that adapts to any screen width without media queries.
- → Name your grid areas. Use
grid-template-areas for complex layouts. Named areas make your CSS read like a visual map of the page.
- → Grid is two-dimensional. Unlike Flexbox, Grid controls both rows and columns simultaneously — ideal for full page layouts, dashboards, and magazine-style content.
See also: To add snap behaviour to a grid-based gallery, the Scroll Snap Generator generates the CSS scroll-snap properties.
Frequently Asked Questions
What is CSS Grid?
A two-dimensional layout system controlling both rows and columns. Unlike Flexbox (one-dimensional), Grid handles complex page layouts with precise alignment, sizing, and placement across both axes.
When should I use Grid vs Flexbox?
Grid for page-level two-dimensional layouts (headers, sidebars, content). Flexbox for component-level one-dimensional layouts (navbars, card contents). Most designs use both together.
What is the fr unit?
The fr (fraction) unit distributes available space proportionally. grid-template-columns: 1fr 2fr creates two columns where the second is twice the width of the first.
What is CSS Grid?+
CSS Grid is a two-dimensional layout system that divides a container into rows and columns, allowing you to place and size child elements in any cell or span of cells. It's the most powerful CSS layout tool — capable of creating complex page layouts, responsive card grids, and dashboard interfaces with clean, readable code.
What does fr mean in CSS Grid?+
Fr (fractional unit) represents a fraction of the available space in the grid container. 1fr 2fr 1fr creates three columns where the middle column gets twice the space. Fr units are similar to flex-grow in Flexbox but designed specifically for grid tracks.
When should I use CSS Grid vs Flexbox?+
Use Grid for two-dimensional layouts — anything with both rows and columns (page layouts, card grids, dashboards). Use Flexbox for one-dimensional layouts — a row of buttons, a navigation bar, centering. They complement each other: Grid for the macro layout, Flexbox for components within grid cells.
What is fr unit in CSS Grid?+
The fr (fraction) unit distributes available space proportionally. grid-template-columns: 1fr 2fr creates two columns where the second is twice as wide as the first. Fr units are like flex-grow for grid tracks.
How do I make a responsive grid without media queries?+
Use repeat(auto-fit, minmax(MIN, 1fr)) as the grid-template-columns value. With auto-fit the browser fits as many columns as will fit at the minimum width and stretches them to fill the row; with auto-fill it keeps empty tracks instead of stretching. This pattern handles every viewport in one declaration and is usually what people want when they reach for a media-query-driven column count.
What is the difference between grid-gap and margin?+
Gap (and the older grid-gap) only inserts space between grid tracks, never around the outer edge of the container, and it never collapses or doubles up. Margin on grid items can collapse against neighboring items in some browsers and stacks awkwardly when the layout reflows. Use gap for the consistent in-grid spacing you want and reserve margin on grid items for tweaks that genuinely need to break out of the grid.
Built by Derek Giordano · Part of Ultimate Design Tools
Privacy Policy · Terms of Service