Developer
Flexbox & Grid Generator
Build flex/grid layouts and copy the CSS.
Item 1 properties
This free Flexbox and CSS Grid generator lets you build layouts visually. In Flexbox mode, set every container property (display, direction, wrap, justify-content, align-items, align-content and gap), then click any item in the preview to edit its individual order, flex-grow, flex-shrink, flex-basis and align-self. Grid mode covers columns and gap. The preview updates live and the full CSS, including per-item rules, is ready to copy.
Related tools
JSON Formatter
Format, beautify & validate JSON data.
Base64 Encoder / Decoder
Encode and decode Base64 text instantly.
URL Encoder / Decoder
Percent-encode and decode URLs safely.
Regex Tester
Test regular expressions with live match highlighting.
JWT Decoder
Decode JWT header and payload claims.
Timestamp Converter
Convert Unix timestamps to dates and back.