fr is a fractional unit. 1fr means "take up one equal share of the available space." Three columns of 1fr each means each column gets 1/3 of the width.

Design Tool

CSS Grid Layout Builder

Name: CSS Grid Layout Builder — Visual Grids | AllOmnitools
Author: AllOmnitools Editorial Team

Build CSS grid layouts visually — set columns, rows, gaps and copy production-ready code instantly

AllOmnitools Editorial Team

Grid Settings

Columns: 3

Rows: 2

Column Gap: 16px

Row Gap: 16px

Column Template

Custom grid-template-columns

Row Height

Justify Items

Align Items

Preview

Generated CSS

About This Tool

The CSS Grid Layout Builder lets you configure grid columns, rows, gaps, and alignment visually. See a live preview of your grid and copy the CSS to use in any project.

Why Choose AllOmnitools?

Instant Results

Live grid preview updates as you change settings.

100% Private

Everything runs in your browser. No data sent anywhere.

How to Use This Tool

1 Set the number of columns and rows using the sliders.
2 Adjust column and row gaps to control spacing.
3 Choose a column template (equal, auto, minmax, or custom).
4 Set justify and align items, then click Copy CSS.

FAQ

What is CSS Grid?

CSS Grid is a two-dimensional layout system that lets you place elements in rows and columns. It's the most powerful layout tool in CSS.

What does 1fr mean?

Is CSS Grid supported everywhere?

Learn More

CSS Grid — MDNComplete CSS Grid layout reference CSS Grid Spec — W3COfficial W3C CSS Grid specification