FreeDev Tools

CSS Grid Generator

Build CSS grid layouts visually and export the code instantly.

Grid Settings

Preview

1
2
3
4
5
6

CSS Output

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  column-gap: 12px;
  row-gap: 12px;
  justify-items: stretch;
  align-items: stretch;
}

CSS Grid is a two-dimensional layout system. grid-template-columns and grid-template-rows define the track sizes. The fr unit is a flexible fraction of available space. gap controls spacing between rows and columns (previously grid-gap). justify-items and align-items control how items are placed within their cells.

Frequently Asked Questions

grid-template-columns, grid-template-rows, gap, justify-items, align-items, and justify-content.

Related Tools

CSS Gradient GeneratorBuild linear and radial CSS gradients visuallyBox Shadow GeneratorCreate CSS box shadows with a live previewBorder Radius GeneratorGenerate CSS border-radius values visuallyFlexbox GeneratorBuild CSS flexbox layouts with a visual editorText Shadow GeneratorGenerate CSS text-shadow effects with live previewCSS Animation GeneratorCreate CSS keyframe animations with a live editorClip-Path GeneratorGenerate CSS clip-path polygon shapes visuallyCSS Specificity CalculatorCalculate and compare CSS selector specificity