OneTaskLayout Generators
Free CSS Grid Areas, Flexbox and Aspect Ratio Builders
Generators for page layout. Build CSS grid and flexbox layouts visually, make bento and masonry grids, set aspect ratios and work out responsive spacing. Every layout previews at different widths before you copy the code.
45 tools tagged Layout
"As Seen In" Strip
Build a muted "as seen in" row of press and media logos.
:has() Selector Builder
Pick a :has() pattern, see it work live and copy the HTML and CSS.
@supports Rule Generator
Build @supports feature queries with fallbacks and see live support.
Aspect Ratio
Aspect-ratio CSS plus the padding-top percentage fallback.
Aspect Ratio Calculator
Missing width or height for a ratio, and how to crop or pad.
Aspect Ratio Cropper
Crop to a standard ratio without shrinking the picture.
Bento Grid Builder
Bento-box grid layouts with spanning tiles, copy-ready.
Breakpoint Helper
Media query and container query boilerplate from a breakpoint.
Card Carousel
Build a scroll snap slider of clickable cards with arrows.
Cascade Layers Generator
Set your @layer order and get the blocks or imports to paste.
Client Logo Wall
Build a greyscale grid of customer logos that colour on hover.
Container Query Generator
Build @container queries and cqi units with a resizable live demo.
CSS Clamp() Calculator
Fluid font sizes with clamp(), no breakpoints needed.
CSS Grid Generator
Visual CSS Grid container generator with auto-fit mode.
CSS Units Cheat Sheet
Every CSS unit, what it is relative to and when to use it.
CTA Banner Builder
Build a call to action banner with a button and secondary link.
Dot Grid Pattern Generator
Seamless dot grid, polka dot and halftone tiles as PNG or 4K wallpaper.
Feature Grid Builder
Responsive icon-title-description feature grids for landing pages.
Flexbox Playground
Live flexbox layout playground that exports the container rule.
Fluid Spacing Generator
A five-step clamp() spacing scale as CSS variables.
Fluid Typography Generator
A full fluid type scale of clamp() custom properties with a live specimen.
Footer Generator
Build a responsive footer with link columns and a copyright line.
Grid Areas Builder
Build named CSS grid layouts and copy the rule.
Hex Grid Pattern Generator
Seamless honeycomb outlines or tinted hex cells as a PNG tile or wallpaper.
Image Gallery Builder
Build a responsive CSS grid photo gallery with captions and hover effects.
Isometric Grid Pattern Generator
Seamless isometric line, diamond, dot or triangle grids as PNG tiles or wallpapers.
Line Clamp Helper
Truncate text after a set number of lines with an ellipsis.
Masonry Grid Builder
Pinterest-style masonry layouts in pure CSS.
Media Query Generator
Compose any @media query from feature options and test it live.
Mega Menu
Build an accessible full-width mega menu with link columns and a promo.
Modern CSS Units Converter
Convert ch, cap, lh, dvh, cqi and other modern CSS units to px.
Parallax Builder
Build a layered CSS parallax section with scroll-driven animations.
Pricing Table Builder
Build a responsive pricing table of plans with a featured one.
Print Bleed Calculator
Work out document size with bleed, the safe area and pixel dimensions.
PX To REM Converter
Batch convert pixels to rem and back.
Responsive Container Generator
Centred max-width container with fluid padding and variants.
Responsive Iframe Generator
Responsive iframe embed code for YouTube, Vimeo, maps and more.
Sticky Header
Build a sticky header that hides, shrinks or stays as the page scrolls.
Tailwind To CSS
Turn Tailwind utility classes into plain CSS declarations.
Team Grid Builder
Responsive team member grids with avatars, names and roles.
Testimonial Grid
Build a masonry wall of testimonials with avatars and stars.
Timeline Builder
Build a vertical timeline with dates, headings and alternating sides.
Toast Notification Generator
Build an accessible toast message with auto-dismiss and a close button.
Trust Badge Strip
Build a row of trust badges with inline SVG icons.
Viewport Unit Converter
Convert px to vw, vh, vmin, vmax and rem for any viewport size.