Question 1

When should I use CSS Grid vs Flexbox?

Accepted Answer

Use CSS Grid when your layout is two-dimensional — you care about BOTH rows and columns simultaneously. Page-level layouts, photo galleries, dashboard grids, magazine-style multi-row designs. Use Flexbox when your layout is one-dimensional — a row of buttons, a column of cards, a navigation bar. Grid is container-driven (you define tracks explicitly with grid-template-columns/rows); Flexbox is content-driven (items size to their content along one axis). Most real production codebases use both together: Grid for the page-level layout, Flexbox inside grid cells for component-level layouts. They are complementary, not competitive.

Question 2

What does fr mean and why is it the default for tracks?

Accepted Answer

fr is a CSS Grid-specific unit meaning "fraction of remaining space" after fixed-size tracks are subtracted. If you have grid-template-columns: 200px 1fr 1fr, the 200px column gets its width first, then the remaining width is split equally between the two 1fr columns. fr is the cleanest way to express "equal-width columns that scale with the container" — 1fr 1fr 1fr gives three equal columns regardless of container size. fr can be combined with fixed lengths and minmax(): 200px 2fr 1fr means the second column gets twice as much remaining space as the third.

Question 3

How does repeat(auto-fit, minmax(...)) work?

Accepted Answer

It is the canonical responsive-grid one-liner. repeat(auto-fit, minmax(240px, 1fr)) tells the browser: create as many 1fr columns as will fit, where each column is at least 240px wide. As the container shrinks, columns fall away (becoming taller stacks) and as it grows, more columns appear automatically. No media queries needed. auto-fit removes empty tracks at the end of a row; auto-fill keeps them as empty placeholder space. For card grids, auto-fit is almost always what you want. This is the single most-used CSS Grid pattern in modern web design.

Question 4

What is the difference between auto, min-content, and max-content?

Accepted Answer

auto: the track sizes to its content but is willing to grow if there is extra space (or shrink if there is not). min-content: the smallest size the content can be without overflowing — for text, this is roughly the width of the longest word. max-content: the natural size the content wants if given infinite space — for text, this is the width without wrapping. Practical use: auto is the default catch-all; min-content is for narrow columns that wrap aggressively; max-content is for columns that should not wrap at all (e.g. a single-line button row).

Question 5

Can I name grid areas?

Accepted Answer

Yes, with grid-template-areas. You declare a string-art layout like: grid-template-areas: "header header header" "sidebar main main" "footer footer footer". Then assign items to areas with grid-area: header. This generator focuses on the track-list approach (more common for dynamic content), but for fixed page layouts, named areas are highly readable. Both approaches compile to the same underlying grid; pick whichever maps better to your mental model.

Question 6

What is the difference between justify-items and justify-content?

Accepted Answer

justify-items controls how each ITEM is aligned within its cell along the inline (column) axis — stretch, start, center, end. justify-content controls how the WHOLE GRID is positioned within the container when the tracks do not fill the container — start, center, space-between, etc. They look similar but apply at different levels: items vs the grid itself. align-items / align-content are the same distinction along the block (row) axis.

Question 7

Does the Tailwind output use named utilities?

Accepted Answer

Mostly arbitrary-value syntax. Tailwind ships named utilities for common cases (grid-cols-3, grid-cols-4) but CSS Grid track lists are too expressive to fit named scales — values like "200px 1fr 200px" or "repeat(auto-fit, minmax(240px, 1fr))" require Tailwind's arbitrary-value syntax (grid-cols-[200px_1fr_200px]). Tailwind v4 fully supports this, and the compiled CSS is identical to what we emit. If you prefer named utilities for simple cases, manually replace grid-cols-[1fr_1fr_1fr] with grid-cols-3 — the visual result is identical.

Question 8

Why does my grid not respect the row tracks I set?

Accepted Answer

Three common causes: (1) too few items to fill the explicit grid — Grid only renders the rows you have items for, even if you declared more grid-template-rows; (2) implicit rows: items beyond the declared rows fall into auto-sized "implicit" rows (configure with grid-auto-rows); (3) items can span multiple rows via grid-row, which can leave declared rows partially empty. To preview row tracks visually, ensure your item count fills the columns × rows product. Our generator does this automatically when you set the right item count.

Question 9

Does CSS Grid work on all browsers?

Accepted Answer

Yes — universal support since 2017. Chrome 57+, Firefox 52+, Safari 10.1+, Edge 16+. Currently ~98%+ globally per caniuse.com. The original 2011 IE grid syntax is dead and the modern spec is what every browser implements. Subgrid (allowing a grid item to inherit its parent's grid tracks) is also widely supported as of 2023. Grid is fully production-safe in 2026; no need for vendor prefixes or polyfills.

Value	Meaning	Use
1fr	One fraction of available space	Equal-width columns; the most common track value.
2fr / 3fr	Multiple of one fraction	Asymmetric columns — 1fr/2fr makes the second twice as wide.
auto	Track sizes to its content	Side bars or sidebars where width depends on text length.
min-content	Smallest size the content can be without overflow	Narrow columns that wrap text aggressively.
max-content	Width the content wants if given infinite room	Long-form columns that should NOT wrap text.
200px	Fixed length	Sidebars with a known fixed width.
minmax(100px, 1fr)	At least 100px; share remaining space	Responsive columns that have a minimum width.
repeat(auto-fit, minmax(...))	Repeat as many columns as fit	The famous responsive-grid one-liner for card layouts.

Aspect	CSS Grid	Flexbox
Dimensions	Two — rows AND columns simultaneously	One — row OR column at a time
Sizing model	Container-driven — you define tracks explicitly	Content-driven — items size from their content
Best for	Page-level layout, photo galleries, dashboards	Nav bars, button rows, cards inside grid cells
Overflow handling	Explicit row/column boundaries	Wrap to new rows/columns automatically
Browser support	98%+ globally (Chrome 57+, Safari 10.1+, FF 52+)	99%+ globally (Chrome 29+, Safari 9+, FF 28+)

Free CSS Grid Generator With Live Preview & Tailwind v4 Output

Editable Track Lists

Live Visual Preview

CSS + Tailwind v4 Output

100% Client-Side

Two-Dimensional Layout, Tuned With Live Visual Feedback

Track Value Reference — What Each Means

CSS Grid vs Flexbox — Which to Use When

Six CSS Grid Recipes You Will Use Constantly

Related CSS Utilities