CSS Grid Playground
Prototype grid layouts and copy the CSS.
Input
This tool runs entirely in your browser. The data you paste or load is never uploaded.
Result
Enter your input, then run the tool.
About this tool
Define columns, rows, gap and auto-flow, and copy ready-to-use grid CSS. The preview shows grid lines so the difference between explicit and implicit tracks is visible while you experiment.
How to use it
- Set the number of columns and rows.
- Adjust the gap and track sizing.
- Copy the generated CSS for the container.
Frequently asked questions
What does fr mean?
A fraction of the free space after fixed tracks and gaps are accounted for. 1fr 2fr gives the second column twice the width.
Why are extra rows appearing?
Items beyond the explicit grid create implicit rows. Set auto-rows to control their size.
Keep going
Related tools
CSS Flexbox Playground
Learn and copy flexbox layout code visually.
CSS Border Radius Generator
Shape corners with independent radii and copy the CSS.
CSS Box Shadow Generator
Design layered shadows and copy the CSS.
HEX to RGB Converter
Convert HEX colour codes to RGB and HSL.
RGB to HEX Converter
Convert RGB channel values into a HEX code.
RGB to HSL Converter
Convert RGB channels to hue, saturation and lightness.