Handitab

CSS Grid Generator

Build a CSS grid layout by setting columns, rows, track size, and gap with a live preview, then copy the grid-template declarations.

About CSS Grid Generator

CSS Grid is a two-dimensional layout system: the container defines column and row tracks, and child elements fill the cells in order. This generator writes display: grid with grid-template-columns and grid-template-rows using repeat(), plus a gap, and previews the result with numbered cells. It covers evenly repeated tracks only. Named areas, mixed track sizes, and item placement with grid-column are left for you to add by hand.

How to use CSS Grid Generator

  1. Fill in "Columns", "Rows", "Column size" and "Row height", and the other options.
  2. The result appears below and updates as you type.
  3. Copy the result with the copy button, or download it as a file where that is offered.

Questions about CSS Grid Generator

What does the fr unit mean in CSS Grid?

One fr is one share of the free space left in the grid container after fixed tracks and gaps are subtracted. Three columns of 1fr each take a third of that space. A track of 2fr gets twice the share of a 1fr track.

Runs in your browser. Page last updated .

More css and color tools

All 39 css and color tools
CSS Loader GeneratorGenerate a pure CSS loading indicator (ring spinner, bouncing dots, bars, or pulse) with your size, color, and speed, and copy the code.CSS Switch GeneratorGenerate CSS for a toggle switch built on a real checkbox input, with your own width, on and off colors, and animation speed.CSS Text Glitch Effect GeneratorGenerate a CSS glitch text effect with two offset color layers and an adjustable speed, previewed on your own text, then copy the code.CSS Text ShadowGenerate a CSS text-shadow by adjusting horizontal offset, vertical offset, blur, and color with a live preview on sample text.CSS Triangle GeneratorGenerate a pure CSS triangle pointing up, down, left, or right with the border technique, by setting its width, height, and color.Darken ColorDarken a color by a chosen percentage by lowering its HSL lightness, and get the darker shade as HEX, RGB, and HSL codes.