Майданчик CSS Grid

An interactive CSS Grid generator and playground

This CSS Grid generator turns the abstract grid syntax into something you can see and drag. Set your columns and rows, watch the live preview rearrange, and copy clean CSS, Tailwind or HTML when it looks right. There's nothing to install and no account to create — the whole CSS grid playground runs in your browser, so the layouts you build are never uploaded.

Whether you're learning how grid works, prototyping a dashboard, or recreating a 12-column framework as plain CSS, you can do it here in seconds. Unlike Layoutit that only outputs CSS without item-level editing, or Sarah Drasner's minimal CSS Grid Generator that has no Tailwind or shareable links, UtiloKit combines all three output formats plus named area support in one interface.

Set your tracks: columns, rows and units

A grid is defined by its tracks. In the Tracks tab you add as many columns and rows as you need and pick a unit for each: fr for flexible fractions, px or % for fixed sizes, auto to fit the content, or minmax() for a track that flexes between a minimum and a maximum. Identical neighbouring tracks are automatically collapsed with repeat(), so three equal columns become the tidy repeat(3, 1fr) rather than 1fr 1fr 1fr.

Set the columns to 12 and you have the classic Bootstrap-style framework grid as plain CSS. Set two columns and two rows for a quick 2x2 layout. The grid-template-columns and grid-template-rows output updates with every change so you always see the exact code your layout produces.

Make it responsive with auto-fit and minmax()

The responsive CSS grid generator mode writes the modern, media-query-free pattern for you: repeat(auto-fit, minmax(200px, 1fr)). Choose auto-fit or auto-fill, set the minimum cell width, and the preview reflows as you resize it — adding columns on wide screens and dropping to one on mobile. It's the fastest way to build a fluid card grid that works at any screen width without writing any media queries.

The difference between auto-fit and auto-fill matters when the grid has fewer items than the container can fit. auto-fit collapses empty tracks so filled items stretch to cover the space. auto-fill keeps empty tracks so items keep their minimum size. This playground lets you toggle between them and see the effect live, which is something static CSS resources can't show you.

Place items by dragging — or name your areas

In Tracks mode the preview is interactive: drag across cells to drop in an item that spans them, click an item to select it, and fine-tune its grid-column and grid-row start and span values in the item panel. It's the quickest way to understand how spanning works — faster than reading docs, faster than CodePen experiments.

Prefer the readable approach? The Areas tab uses grid-template-areas — sketch your layout as named rows like 'header header' 'sidebar main' and the generator builds the template plus a grid-area rule for every region. Perfect for page shells with a header, sidebar, main and footer. Layoutit has a similar areas editor but doesn't produce Tailwind output for area-based layouts.

Copy CSS, Tailwind or HTML — and share with a link

Every layout exports three ways. The CSS tab gives you the container rule plus per-item rules. The Tailwind CSS grid generator tab writes the matching utility classes — grid grid-cols-3 gap-4, col-span-2, and arbitrary values for custom tracks. The HTML tab gives ready-to-paste markup. A shareable link encodes the entire configuration in the URL so a teammate opens the exact same grid — no account, no export, no screenshot needed.

Free, private and instant — no upload, no account

There's nothing to sign up for and nothing to download. Building tracks, dragging items, switching to responsive auto-fit, and exporting the code all happen locally in your browser, so your work never leaves your device. Unlike web-based design tools like Figma that require accounts and store your work on their servers, this CSS grid playground is fully private. Bookmark this grid layout generator and reach for it whenever you need to build, learn or copy a CSS grid — on any device, including iPhone and Android.

CSS Grid vs Flexbox: choosing the right tool

CSS Grid is inherently two-dimensional — it places items across rows and columns simultaneously from a single container rule. Flexbox is one-dimensional: it arranges items along one axis at a time, either a row or a column. The classic guidance — "Grid for layout, Flexbox for components" — is a useful starting point, but the practical line is this: reach for Grid whenever both dimensions matter at once (a dashboard, a photo gallery, a page shell), and reach for Flexbox when you only care about one axis (a navigation bar, a row of buttons, a list of tags).

Grid's auto-placement algorithm fills items into the next available cell automatically, flowing left-to-right and top-to-bottom just like reading order. Add grid-auto-flow: dense and the browser back-fills earlier gaps with smaller items — useful for masonry-style galleries where you want no wasted white space. Grid also distinguishes between the explicit grid (the tracks you define with grid-template-columns and grid-template-rows) and the implicit grid (extra tracks the browser creates automatically when items overflow the explicit definition). You control implicit track sizing with grid-auto-columns and grid-auto-rows.

Flexbox wins when the number of items is unknown or variable, because it naturally wraps and reflows without needing a declared column count. A tag cloud, a flex-wrapped card list, or a toolbar whose items appear and disappear at runtime are all natural fits for display: flex; flex-wrap: wrap. The two systems are also designed to compose: a CSS Grid container can hold cells whose children are Flexbox containers, combining Grid's structural precision with Flexbox's item-level distribution.

Named grid areas: semantic, maintainable layouts

The grid-template-areas property lets you describe a layout as an ASCII map inside a CSS rule. Each quoted string is one row, each word inside it is one cell, and repeating the same word across adjacent cells merges them into a single area. A classic page shell looks like this: "header header" "sidebar main" "footer footer". Name each child with grid-area: header, grid-area: sidebar, and so on, and the browser wires them to the matching regions automatically — no line numbers, no span arithmetic.

Named areas are far more maintainable than numeric line-based placement for layouts that a whole team will touch. When a designer asks to swap the sidebar to the right, you change one string in grid-template-areas and the DOM order stays exactly the same — no reordering markup, no recalculating column indices. This also separates visual order from source order, which matters for accessibility: screen readers follow the DOM, sighted users see the grid arrangement.

Named areas are the most powerful tool for responsive redesigns without DOM changes. Inside a media query you redefine grid-template-areas to a completely different layout string — turn a three-column desktop shell into a single stacked column for mobile — and every named child repositions itself with zero JavaScript. Combined with grid-template-columns changes in the same breakpoint, a single CSS block can pivot the entire page structure from desktop to tablet to phone.

The fr unit, intrinsic sizing keywords, and the RAM pattern

The fr unit (fraction) distributes the space that remains after fixed and content-sized tracks are resolved. 1fr 1fr 1fr divides the leftover width into three equal shares. Crucially, fr accounts for gap automatically — the gap is subtracted before the fractions are calculated — whereas percentage widths are of the total parent width and ignore gap, causing items to overflow if you're not careful. The shorthand repeat(3, 1fr) is exactly equivalent but scales without repetition.

Beyond fr, CSS Grid supports three intrinsic sizing keywords. min-content makes a track as narrow as its longest unbreakable word — useful for icon columns or label tracks that should hug their content. max-content lets a track grow to its widest natural width, ignoring the container. fit-content(value) is a smart clamp: it behaves like max-content up to the supplied maximum, then stops growing — handy for a sidebar that should expand to fit its content but never exceed, say, 300px.

The most powerful responsive grid technique is the RAM pattern — Repeat, Auto, Minmax: repeat(auto-fill, minmax(200px, 1fr)). No media queries needed. The browser packs as many 200px minimum columns as the container allows; on a 800px container you get four columns, on a 480px container you get two, on a 300px container you get one. Switch auto-fill to auto-fit and empty tracks collapse so filled items stretch to fill the row. This single line of CSS replaces a typical three-breakpoint media query block for card grids, image galleries, and product listings.

Alignment in CSS Grid: axes, properties and the place-* shorthand

CSS Grid has two alignment axes. The inline axis runs in the direction text flows (left to right in English) and the block axis runs perpendicular to it (top to bottom). Properties prefixed with justify- act on the inline axis; properties prefixed with align- act on the block axis. This axis distinction is the key to reading the six alignment properties without memorising each one individually.

justify-items and align-items control how each item is positioned within its own cell. The default is stretch, which makes items fill the cell — that's why grid items expand to cover their cell by default without any explicit width or height. Setting both to center centers every item inside its cell. justify-content and align-content distribute extra space across the whole grid, similar to Flexbox's justify-content for the main axis — useful when the total track size is smaller than the container. justify-self and align-self are per-item overrides that break an individual item out of the container's default alignment without touching neighbouring items.

The place-items, place-content and place-self shorthands combine the block and inline values in one declaration: place-items: center is equivalent to align-items: center; justify-items: center. This gives rise to the famously concise CSS for the problem that once required tables and JavaScript: display: grid; place-items: center — two lines that center a single child both horizontally and vertically inside its container, solving one of the historically hardest layout problems in CSS with the shortest possible rule.