CSS layout tools

CSS Grid Generator

Easily create CSS Grid layout configurations through an interactive visual interface. Instant preview, output CSS and HTML, all operations are performed purely on the front end.

Grid Container
Quick setup
grid-template-columns
grid-template-rows
Gap
justify-content
align-content
justify-items
align-items
Grid Items Edit
Layout Presets
Instant preview
1
2
3
4
display: grid;\ngrid-template-columns: 1fr 1fr;\ngrid-template-rows: auto auto;\njustify-content: start;\nalign-content: stretch;\ngap: 8px;

Features

Grid Container complete settings
Columns/Rows control
Justify / Align alignment
Gap spacing control
Item individual Grid positioning
Instant preview
Generate CSS and HTML
20+ Presets
Copy code with one click
Responsive preview
Undo/Redo
Pure front-end offline execution

CSS Grid Tutorial

CSS Grid Layout is the most powerful two-dimensional layout configuration system in CSS. It can control the arrangement of rows and columns at the same time and easily create complex web page layouts.

Container Properties

  • grid-template-columns — define fields
  • grid-template-rows — define columns
  • gap — grid spacing
  • justify-content — horizontal alignment
  • align-content — vertical alignment
  • justify-items — Item horizontal alignment
  • align-items — Item vertical alignment

Item property

  • grid-column-start/end — field range
  • grid-row-start/end — column range
  • grid-area — Abbreviation positioning
  • justify-self — Individual horizontal alignment
  • align-self — Individual vertical alignment

Common Grid examples

Dashboard Dashboard
Holy Grail Classic Three Lines
Picture gallery
Sidebar layout
Cards Grid
magazine style

Frequently Asked Questions

What is the difference between CSS Grid and Flexbox?
CSS Grid is two-dimensional Layout system that can control rows and columns simultaneously; Flexbox is one dimensional Configuration, arranging items in one direction only. Grid is suitable for overall page layout (such as Dashboard, Holy Grail), and Flexbox is suitable for component-level arrangement (such as navigation bar, card list). The two are often used together.
What is the fr unit?
fr(fraction) is a special elastic unit of CSS Grid, which represents the proportion of allocated remaining space. For example grid-template-columns: 1fr 2fr Indicates that the second column is twice as wide as the first column. The fr unit makes Grid layouts truly flexible.
How to make Item span multiple columns or columns?
Use grid-column and grid-row properties. For example grid-column: 1 / 3 Let the Item extend from column one to column three (across two columns).span Keywords are also available:grid-column: span 2 Indicates spanning two columns.
How to use repeat() function?
repeat() is the abbreviation function of Grid,repeat(3, 1fr) Equivalent to 1fr 1fr 1fr. Also supported auto-fill and auto-fit Keyword used to create a responsive grid that automatically adapts to the width of the container.
Is this tool free?
Yes, it's completely free, no registration required. All processing is performed locally in your browser - no data is sent to the server, and your layout settings are never exported.

Browser compatibility

Chrome 57+
Firefox 52+
Safari 10.1+
Edge 16+
Opera 44+
iOS Safari 10.3+
Android 67+
IE 11+ (prefix)

Privacy Statement

This tool executes entirely in your browser. Any layouts, Grid Item settings, or styles you create are not sent to any server. All work stays on your device. We do not use cookies or tracking with this tool.