WerklyTools
Esc
↑↓ navigate↵ open
EN
Buy me a coffee

CSS Grid generator

Set columns, rows and gaps with sliders and see the result live. Copy the CSS and HTML ready to paste into your project.

Processed 100% in your browser

CSS
HTML

Ctrl + Enter runCtrl + C copy result

How to use

  1. 1Adjust the number of columns and rows.
  2. 2Set the gap between columns and rows.
  3. 3Choose the column width: equal, fixed, auto or responsive.
  4. 4Copy the generated CSS and HTML.

Use cases

  • Build a card gallery that adapts to screen width.
  • Set up the skeleton of a dashboard.
  • Learn how grid-template-columns and gap work.
  • Prototype layouts quickly before coding.

Frequently asked questions

What is CSS Grid?

A two-dimensional CSS layout system that arranges elements in rows and columns.

What does auto-fit with minmax do?

It creates as many columns as fit at a minimum width and stretches them to fill the space: ideal for responsive layouts without media queries.

What does 1fr mean?

A fraction of the available space. Three 1fr columns split the width equally.

Does it work in all browsers?

Yes, CSS Grid is supported by all modern browsers.

Related tools

CSS box-shadow generatorDesign realistic shadows by stacking several layers, the way the best design systems do. Tune each layer’s offset, blur, spread, color and opacity and copy the result as CSS or as a Tailwind class.
Color converter (HEX, RGB, HSL, CMYK, OKLCH)Type a color in any format — #hex, rgb(), hsl(), hwb(), oklch() or a name like “tomato” — and instantly get every equivalent, its WCAG contrast against white and black, and a scale of tints and shades.
Color palette generatorStart from your brand color and get a full, perceptually uniform 50 to 950 scale ready for your design system, along with harmonious combinations. Your original color is kept exactly at its matching step.
CSS gradient generatorDesign gradient backgrounds by dragging color stops along a bar, choose the type (linear, radial or conic) and copy production-ready CSS with a fallback color and a modern OKLCH version without grey dead zones.
Glassmorphism generator (frosted glass)Design frosted-glass cards and panels and see the result instantly on different backgrounds. The generated CSS includes the -webkit- prefix Safari still needs.
Image color palette extractorUpload a photo, logo or illustration and discover its main colors. Choose how many colors you want, copy each HEX with a click or the whole palette as CSS variables.