So nutzt du: CSS Grid Generator
- Set the number of columns and rows and the gaps — or start from a preset like Holy grail.
- Edit the track sizes (above the grid for columns, left for rows):
1fr,240px,auto,minmax(0, 1fr). - Drag across cells to create an area and give it a name like
headerorsidebar. - Copy the CSS and the HTML skeleton into your project.
Grid areas in a nutshell
grid-template-areas lets you draw the layout with names: each string is a row, each word a column, and a dot (.) leaves a cell empty. Children are placed with grid-area: name, so the CSS reads like a picture of the page.
.layout {
display: grid;
grid-template-columns: 240px 1fr;
grid-template-areas:
"header header"
"sidebar main";
}Track sizes
| Value | Meaning |
|---|---|
1fr | one share of the free space |
minmax(0, 1fr) | like 1fr, but long content can’t stretch the column |
auto | as big as the content |
240px, 20rem | a fixed size |
repeat(auto-fill, minmax(200px, 1fr)) | as many columns as fit — great for card grids |
Areas must be rectangles — the tool only lets you draw rectangles, so the CSS is always valid. For a single row or column of items, flexbox is often simpler. Related: Clamp Calculator, CSS Formatter.
Auch gesucht als: grid layout generator, css grid builder, grid-template-areas generator, css grid template, responsive grid generator, grid css online, layout generator.
Passende Tools zu: CSS Grid Generator
- CSS Flexbox Generator — See exactly what every flexbox property does: set the direction, wrapping, justify-content, align-items and gap, add or remove items, and click any item to set its flex-grow, shrink, basis, order and align-self.
- Border Radius Generator — Round the corners of any box: drag one slider for all corners or set each corner separately, switch to elliptical corners for blob and leaf shapes, and copy the shortest valid border-radius CSS.
- Box Shadow Generator — Stack multiple shadow layers, tweak offsets, blur, spread and opacity on a live card, then copy the box-shadow or text-shadow CSS.
- CSS Gradient Generator — Design a gradient visually — drag color stops, change the angle or type, start from a preset — and copy production-ready CSS with a solid fallback color.
Häufige Fragen
How do I create a CSS grid layout?
Set columns and rows, drag across cells to define named areas (header, sidebar, main…), and copy the generated grid-template-columns, grid-template-rows and grid-template-areas CSS with the HTML.
What is the difference between 1fr and minmax(0, 1fr)?
1fr has a minimum of its content’s size, so a long word or wide image can make the column grow. minmax(0, 1fr) allows the column to shrink below its content, keeping columns equal.
Why must grid areas be rectangles?
The CSS Grid spec only allows rectangular named areas; an L-shaped area makes the whole grid-template-areas declaration invalid.
How do I make the grid responsive?
Add a media query that redefines grid-template-columns and grid-template-areas for small screens — for example a single column with "header" "main" "sidebar".
Kann ich CSS Grid Generator als Web-App installieren und offline nutzen?
Ja. CSS Grid Generator ist eine installierbare Web-App (PWA) – sie wird über Ihren Browser installiert und nicht aus einem App-Store heruntergeladen. Klicken Sie oben auf dieser Seite in Chrome oder Edge (Windows, macOS, Linux, ChromeOS) auf „App installieren“ oder verwenden Sie auf Android-Geräten „Teilen“ → „Zum Startbildschirm hinzufügen“ auf dem iPhone und iPad bzw. „Datei“ → „Zum Dock hinzufügen“ in Safari 17+ auf einem Mac. Die App öffnet sich dann in einem eigenen Fenster mit einem eigenen Symbol, und da sie vollständig in Ihrem Browser ausgeführt wird, funktioniert sie auch offline. Firefox auf dem Desktop kann keine Web-Apps installieren. So funktioniert die Installation.