CSS Grid Online

CSS Grid visual builder to create and export grid layouts fast.

Class Names

Columns

4

Rows

8

Borders

Actions

CSS Grid Online
Generator & Creator
The free visual CSS Grid generator — design any grid layout by clicking, export clean CSS, HTML and SCSS. No setup, no login required.

CSS Grid Generator
CSS Grid Creator
Online Grid Tool
Grid Layout Builder
grid-template-columns
fr unit Calculator
CSS Grid Online
Grid Code Generator
01
Set Column & Row Count
Use the + / − steppers in the sidebar to set how many columns and rows your grid needs. The live preview updates instantly.
02
Edit Track Sizes
Click any column label (above the grid) or row label (left of the grid) to change its track size — type 1fr, 200px, auto, minmax(100px,1fr), anything valid.
03
Adjust Gaps
Drag the Column gap and Row gap sliders to add spacing between tracks. The grid reflows in real time.
04
Copy CSS, HTML or SCSS
Hit Get Code or switch output tabs. Copy just the CSS, the HTML structure, nested SCSS, or the full combined snippet ready to paste.
CSS Grid Properties Reference
Every property this CSS Grid generator uses — explained clearly for both beginners and experienced developers.
Container Properties
display: grid
Turns the element into a grid container, enabling CSS Grid layout for all direct children.
grid-template-columns
Defines the number and size of columns. Accepts px, %, fr, auto, minmax(), repeat() and more.
grid-template-rows
Defines the number and size of rows — same syntax as grid-template-columns.
column-gap
Sets the spacing between columns. Formerly grid-column-gap.
row-gap
Sets the spacing between rows. Formerly grid-row-gap.
gap
Shorthand for row-gap and column-gap together. e.g. gap: 16px 24px.
Track Sizing Units
fr
Fractional unit — divides available free space. 1fr 2fr gives a 1:2 ratio split.
auto
Sizes the track to fit its content. Great for sidebars or intrinsic-size columns.
minmax(min, max)
Sets a size range. minmax(100px, 1fr) is a column that’s at least 100px and grows freely.
repeat(n, size)
Shorthand for repeating tracks. repeat(3, 1fr) equals 1fr 1fr 1fr.
fit-content(val)
Like auto but capped at the given maximum value.
px / % / em / rem
Fixed or relative length values. Use for tracks that must be an exact size.
When to Use This CSS Grid Creator
CSS Grid is a two-dimensional layout system — ideal when you need control over both rows and columns simultaneously:
🗞️
Page Layouts
Full website templates — header, sidebar, main content, footer — in a single grid declaration.
🃏
Card Grids
Equal-column card grids with perfect gutters using repeat(auto-fill, minmax(200px,1fr)).
🖼️
Image Galleries
Masonry-style or strict grid galleries where images span multiple rows or columns.
📊
Dashboards
Admin UIs and analytics dashboards with widgets of varying sizes precisely placed.
📐
Holy Grail Layout
The classic fixed header/footer + fluid sidebar + main content pattern solved in 5 lines.
📰
Magazine Layouts
Editorial designs with overlapping, asymmetric, or feature-sized content areas.
Frequently Asked Questions
What is the CSS Grid Online generator? +
CSS Grid Online is a free visual CSS Grid generator and creator. You define columns and rows interactively, edit each track size inline, adjust gaps with sliders, then copy production-ready CSS, HTML, or SCSS — no configuration, no account needed, works in any browser.
What track values can I type in the column and row labels? +
Any valid CSS track size: 1fr, 2fr, 200px, 25%, auto, minmax(100px, 1fr), fit-content(300px), or any fixed length with em/rem units. The live preview applies your value immediately so you can see the result before copying.
What does the fr unit mean in CSS Grid? +
The fr (fractional) unit represents a share of the remaining free space in the grid container. 1fr 1fr 1fr creates three equal columns. 1fr 2fr 1fr gives the middle column twice as much space as the others. It’s the most common unit for responsive grid tracks.
What is the difference between CSS Grid and Flexbox? +
CSS Grid is two-dimensional — it controls both rows and columns at the same time, making it ideal for full-page layouts and complex UI regions. Flexbox is one-dimensional — items flow in a single row or column. In practice they complement each other: Grid for the outer structure, Flexbox for components inside individual grid areas.
How does the SCSS output differ from plain CSS? +
The SCSS output stores gap values in $variables and nests all child item rules inside the parent container using SCSS nesting syntax. This keeps your stylesheet organised and makes global changes (like adjusting the gap) a single-variable edit. Plain CSS uses flat, standalone selectors compatible with any project without a preprocessor.
Is CSS Grid supported in all browsers? +
Yes — CSS Grid has over 97% global browser support including all modern versions of Chrome, Firefox, Safari, and Edge. No vendor prefixes are needed for modern browsers. IE 11 supported an older Grid spec with the -ms- prefix, but IE is no longer a deployment target for most projects.
Try also: Flexbox Online