Text & String

Word Counter Case Converter String Reverse Duplicate Line Remover Sort Lines Text Diff Checker Lorem Ipsum Generator Slug Generator Text Repeater

Web / HTML

HTML Encoder/Decoder URL Encoder/Decoder HTML Formatter HTML Minifier HTML to Markdown Markdown to HTML Meta Tag Generator OG Tag Generator Robots.txt Generator .htaccess Generator Favicon Generator

CSS Tools

CSS Formatter CSS Minifier Box Shadow Generator Border Radius Generator Gradient Generator Flexbox Visualizer Grid Generator px ↔ rem Converter CSS Specificity Calc

JS & JSON

JS Formatter JS Minifier JSON Formatter JSON to CSV JSON to XML JSON Path Tester

Encode & Hash

Base64 Encoder/Decoder URL-Safe Base64 MD5 Hash Generator SHA Hash Generator HMAC Generator BCrypt Hash Generator JWT Decoder Password Generator Password Strength File Hash Generator

Generators

UUID Generator Nano ID Generator Random String Generator QR Code Generator Barcode Generator

Date & Time

Unix Timestamp Date Difference Timezone Converter Cron Builder

Color Tools

Color Picker Palette Generator Contrast Checker Tint & Shade Image Color Extractor

Regex & Testing

Regex Tester Diff Checker cURL Generator HTTP Status Codes MIME Type Lookup

Number & Math

Number Base Converter Roman Numeral Converter Random Number Generator Percentage Calculator Ratio Calculator

Miscellaneous

IP Lookup DNS Lookup SSL Checker Word Frequency CSV Table Viewer CSV to JSON XML Formatter YAML to JSON JSON to YAML SVG Optimizer
79 free tools · no sign-up required
Browse all tools
CSS Tools

CSS Grid Generator

Build CSS Grid layouts visually. Define columns and rows using fr, px, %, or auto units with live preview and instant CSS output.

Free Client-Side No Sign-Up Nothing Stored
Presets:
Columns
Rows
column-gap (px)
row-gap (px)
Generated CSS

What This Tool Does

Define CSS Grid column and row tracks using any valid CSS unit (fr, px, %, auto, minmax). Add or remove tracks, set gaps, and see a live preview of the layout. Five presets cover the most common grid patterns.

Frequently Asked Questions

What is the fr unit in CSS Grid?
fr (fraction) represents a fraction of the available space in the grid container. For example, "1fr 2fr 1fr" creates three columns where the middle takes twice as much space as the others. fr values are calculated after fixed sizes (px, %) are applied.
What does repeat() do?
repeat() is a CSS Grid shorthand for repeating a track definition. "repeat(3, 1fr)" is identical to "1fr 1fr 1fr". The tool generates the explicit track definitions rather than repeat() for clarity.
What is the difference between grid-template-columns and grid-auto-columns?
grid-template-columns defines explicit column tracks. grid-auto-columns defines the size of implicitly created columns when items overflow the explicit grid. This tool generates the explicit template properties.