Grid in four ideas
Tracks are the rows and columns you define; their sizes are the whole game. fr is a share of the leftover space (1fr 2fr = thirds), px/% are fixed claims taken first, and auto sizes to content. Gap is the gutter between tracks — it never collapses and never touches the container edges, which is why grid replaced a decade of margin hacks. And items land in order, one cell each, until you place them deliberately with grid-column/grid-row. When the layout must respond to phones, the common move is fewer, wider tracks via a media query — generate the wide version here, then adjust the track list inside a max-width block.
Frequently Asked Questions
Grid or Flexbox?
Grid for two-dimensional layouts (rows AND columns — page layouts, galleries); Flexbox for one-dimensional flow (a row of buttons, a nav). Real projects use both, nested.
Why do my rows ignore their sizes?
grid-template-rows only sizes explicit rows; items beyond them create implicit rows sized by grid-auto-rows. Set Rows here to cover your item count, or add grid-auto-rows in your CSS.
Related Tools
JSON Formatter — Format, validate and minify JSON instantly — 100% in your browser.
Base64 Encoder / Decoder — Encode and decode Base64 text, files and images — safely, in your browser.
Timestamp Converter — Convert Unix epoch timestamps to dates and back — seconds and milliseconds.
Discord Timestamp Generator — Create Discord timestamps that show in every user's own timezone.
URL Encoder / Decoder — URL-encode text and decode percent-encoded URLs — plus HTML entities.
UUID Generator — Generate random UUIDs (version 4) in bulk — up to 100 at once.
Hash Generator — Calculate MD5, SHA-1, SHA-256, SHA-512 and CRC32 hashes of any text.
File Checksum Calculator — Verify downloads: MD5, SHA-1, SHA-256 and SHA-512 checksums of any file.
File Compressor — Compress files into a ZIP archive in your browser — nothing uploaded.
JWT Decoder — Decode JWT header and payload, check expiry — without sending the token anywhere.
SQL Formatter — Format and beautify SQL queries — or minify them — instantly.
Regex Tester — Test regular expressions live — matches, groups and highlighting.
JSON to CSV Converter — Convert JSON arrays to CSV spreadsheets — download in one click.
JSON to Excel Converter — Convert JSON to a real .xlsx Excel file, ready to open.
JSON to XML Converter — Convert JSON to XML with proper escaping and array handling.
CSV to JSON Converter — Convert CSV spreadsheets to JSON arrays of objects.
JSON to YAML Converter — Convert JSON to clean, readable YAML for configs.
JSON Escape / Unescape — Escape text for embedding in JSON strings, and unescape JSON strings.
Online Code Checker — Check HTML, CSS or JavaScript for common errors — in your browser.
Website Source Code Viewer — Fetch and view any web page's HTML source — size and line count included.