What does 1fr mean in CSS grid?

One fraction of the free space remaining after gaps and any fixed-size tracks are accounted for. Three columns at 1fr each split the leftover space equally — unlike three 33.33% columns, which overflow as soon as you add a gap.

How do I make a responsive grid without media queries?

Use repeat(auto-fit, minmax(140px, 1fr)). The browser fits as many columns as it can while keeping each at least 140px wide, so the layout reflows from two columns on a phone to four on a tablet automatically.

Should I use grid or flexbox for a mobile app layout?

Grid for anything two-dimensional — galleries, tile dashboards, category pickers. Flexbox for single rows and columns, which is most of a typical mobile interface. Many screens use both, at different levels of the tree.

Is the generated CSS production-ready?

Yes. It is plain CSS with no vendor prefixes needed — grid has been fully supported in every mobile browser for years.

floow.design

CSS Grid Generator

Lay out rows, columns and gaps visually, place items on the grid, and copy the CSS.

Build grids freeSign up to copy the CSSNo usage limits

Column mode

auto-fit reflows by itself — no media queries.Columns

Rows

gap

12px

Items

display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(3, minmax(64px, auto));
gap: 12px;

Set your column and row tracks, adjust the gaps, and watch the grid respond. The generated grid-template CSS updates as you go.

Grid earns its place on mobile wherever content is genuinely two-dimensional — photo galleries, dashboard tiles, category pickers, and any layout where things must line up in both directions at once.

What CSS grid does that flexbox cannot

Grid lays out in two dimensions at once. Flexbox can wrap items onto multiple lines, but each line sizes itself independently, so columns drift out of alignment between rows. Grid defines the tracks up front, which means every item in column two starts at exactly the same x position regardless of what is above it. For a gallery or a tile dashboard that alignment is the entire requirement.

fr units and why they beat percentages

An fr unit is a share of the space left over after gaps and fixed tracks are accounted for. Percentages are not: three 33.33% columns plus any gap overflows the container. Using fr means the gap is subtracted first and the columns divide what remains, which is what you almost always intended.

auto-fit and minmax on small screens

repeat(auto-fit, minmax(140px, 1fr)) builds a grid that reflows by itself — as many columns as fit, never narrower than your minimum. On a phone that usually resolves to two columns, on a tablet four, with no media queries involved. It is the single most useful grid pattern for responsive mobile layouts.

How to use the css grid generator

Choose fixed columns when you want an exact count, or auto-fit to let the grid reflow by itself.
In auto-fit mode, set the minimum column width — this decides how many columns fit on a phone.
Set the gap, and remember fr units divide the space left after gaps are subtracted.
Add items to check the layout at realistic content volumes rather than the two or three you started with.
Copy the CSS and drop it onto your container element.

Use it with

Flexbox Generator — Build a flex layout visually and copy the CSS, with a live preview that shows what each property does.
Aspect Ratio Calculator — Work out the missing width or height for any ratio, with the common phone and store ratios one click away.
Type Scale Generator — Build a modular type scale from a base size and ratio, sized for phone screens.

Frequently asked questions

What does 1fr mean in CSS grid?: One fraction of the free space remaining after gaps and any fixed-size tracks are accounted for. Three columns at 1fr each split the leftover space equally — unlike three 33.33% columns, which overflow as soon as you add a gap.
How do I make a responsive grid without media queries?: Use repeat(auto-fit, minmax(140px, 1fr)). The browser fits as many columns as it can while keeping each at least 140px wide, so the layout reflows from two columns on a phone to four on a tablet automatically.
Should I use grid or flexbox for a mobile app layout?: Grid for anything two-dimensional — galleries, tile dashboards, category pickers. Flexbox for single rows and columns, which is most of a typical mobile interface. Many screens use both, at different levels of the tree.
Is the generated CSS production-ready?: Yes. It is plain CSS with no vendor prefixes needed — grid has been fully supported in every mobile browser for years.