ToolXkit Icon

CSS Grid Generator

Size the tracks, place each item, copy the CSS and the HTML.

  • Free
  • No signup
  • Nothing uploaded
  • No watermark

Live preview

123

A grid with 3 columns sized 1fr, 1fr, 1fr, and 2 rows sized auto, auto. Every item is placed automatically, in source order.

Click any box to place or span that item.

Start from a layoutSix layouts worth starting from rather than building up.

Tracks

Column strategyExplicit tracks let you size every column by hand. The repeat() modes fit as many columns as the width allows and need no media query.
Columns (3)Each column’s size. fr is a share of what is left after fixed sizes are taken out, so two 1fr columns split the remainder evenly.
1
2
3
Rows (2)Row heights. auto grows to fit the content, which is what you want unless a row must be a fixed height.
1
2
gapSpace held between tracks. It is not added around the outside edges.

Alignment

justify-itemsWhere each item sits inside its own cell, horizontally.
align-itemsWhere each item sits inside its own cell, vertically.
justify-contentWhere the whole grid sits inside the container, horizontally. Only visible when the tracks do not fill the width.
align-contentWhere the whole grid sits inside the container, vertically. Only visible when the tracks do not fill the height.
grid-auto-flowThe order the browser fills cells in for items you have not placed by hand. dense back-fills gaps left by wide items, at the cost of visual order not matching the HTML.

Item 1 of 6

PlacementWhich column and row this item starts in, and how many it covers. Leave the start at auto to let the browser choose.
justify-selfOverrides justify-items for this one item.
align-selfOverrides align-items for this one item.

A start of auto lets the browser choose the cell, which is what you want for most items. Pin a start only when a particular box has to sit in a particular place.

CSS

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto;
  gap: 12px;
}

HTML

<div class="grid">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
  <div>Item 5</div>
  <div>Item 6</div>
</div>

How to Build a CSS Grid Layout Visually

CSS Grid Generator: before and after TEXT A YOUR INPUT CSS GRIDGENERATOR DONE A RESULT

CSS Grid can lay out a whole page in a few lines, but sizing tracks with fr and minmax() and then placing items across them is hard to picture from code alone. This generator gives you a live grid to work on: set the columns and rows, click a box to place or span it, and copy the CSS and HTML when it looks right.

Start from one of six layouts, such as Holy grail, Dashboard or Photo gallery, or build from three plain columns. Every change shows in the preview and in the code at once.

No software to install Free Works on any device

Steps to Generate Grid CSS

  1. 1. Pick a starting layout

    Under 'Start from a layout', choose Responsive cards, Holy grail, Dashboard, Magazine, 12-column system or Photo gallery, or keep the default grid.

  2. 2. Size the tracks

    Choose Explicit tracks to size each column and row, or repeat(auto-fit) or repeat(auto-fill) with a smallest column width. Size chips such as 1fr and minmax(120px, 1fr) fill a track in one click.

  3. 3. Place the items

    Click a box in the Live preview; its column and row start and span can then be changed under Placement. 'Add item' adds more boxes.

  4. 4. Copy the code

    Set gaps and alignment, then use the Copy and Download buttons on the CSS and HTML panels, which save grid.css and grid.html.

Try it now

What Is a CSS Grid Generator?

It is a visual editor for the CSS Grid layout module. Grid splits a container into rows and columns, called tracks, and lets each child element sit in a chosen cell or span several. This generator writes the grid-template-columns, grid-template-rows, gap and alignment rules for the container, plus the placement rules for each item you move.

Why Use Colour and CSS Tools?

Choosing colours that work together and writing CSS for shadows, gradients or grids takes a lot of trial and error. These tools show a live preview as you adjust, then hand you the colour codes or CSS to copy.

“See it first, then copy the code.”
  • Live previews while you adjust
  • Codes in HEX, RGB and HSL
  • CSS ready to paste
  • Designs checked for colour blindness
  • Palettes that work together
  • Readable text checked for contrast
  • Print colours in CMYK
  • Colours taken from photos

Popular Uses for Colour Pickers and CSS Generators

Designers and site owners use these for the same handful of jobs.

  • Brand colours Build a palette around a logo colour with matching tints, shades and accents.
  • Readable buttons Check that text on a coloured button passes the WCAG contrast ratio.
  • Card shadows Adjust a box shadow until a card looks right, then copy the CSS.
  • Page layouts Set up a CSS grid or flexbox layout visually instead of guessing values.
  • Print artwork Convert screen colours to CMYK and check bleed before sending a flyer to print.
  • Colours from a photo Pull the main colours out of a product photo to match a web page.
  • Colour blind checks See how a chart or poster looks to people with different kinds of colour blindness.
  • Button styles Design a gradient, glass or soft 3D style button and take the code.

What the Grid Layout Builder Can Do

Track-by-track sizing

Edit each column and row on its own, mixing fixed pixels, fr shares, auto and minmax() in one grid.

Responsive without media queries

The auto-fit and auto-fill modes fit as many columns as the width allows, set by a minimum column size.

Click-to-place items

Pick a box in the preview, then choose its starting line and how many columns or rows it covers.

Full alignment controls

justify-items, align-items, justify-content, align-content, grid-auto-flow and per-item self alignment are all there.

Why Use ToolXkit for CSS Grid Generator?

Your files stay with you

Everything runs inside your browser. Nothing you open or type is uploaded to a server.

Design Tools for Different Users

Designers

Build palettes, test contrast and convert colours between HEX, RGB, HSL and CMYK.

Front-end developers

Generate CSS for gradients, shadows, animations and layouts and check it in a preview.

Design students

Learn how colour harmony and CSS properties work by changing them live.

Small business owners

Pick consistent brand colours for a shop sign, website and social posts.

Print designers

Convert colours for print and work out bleed, trim and pixel sizes.

Accessibility testers

Check contrast ratios and preview designs through different types of colour blindness.

Best Times to Pick Colours and Write CSS

These tools help when you are:

  • Starting a new brand or logo
  • Fixing text that is hard to read
  • Styling a button or card
  • Preparing a flyer for print
  • Matching a colour from a photo
  • Laying out a page with grid
  • Checking a chart for colour blindness
  • Converting a HEX code to RGB

Tips for Cleaner Grid Layouts

  1. For card lists, use repeat(auto-fit) with a sensible smallest width such as 240px. The grid reflows on phones without extra CSS.

  2. Prefer fr units over percentages. They share out space after gaps are taken off, so nothing overflows.

  3. Be careful with 'dense' auto-flow. It fills gaps neatly but can put items in a different order from the HTML, which confuses keyboard users.

  4. Use 'Show line numbers' to see which line a span starts and ends on before setting Placement values.

  5. Rename the .grid class in the copied code to match your project before pasting it in.

Frequently Asked Questions

Answers to common questions about this tool.

What is the difference between auto-fit and auto-fill?

Both fit as many columns as the width allows. With few items, auto-fit stretches them to fill the row, while auto-fill keeps empty column slots, so items stay at their minimum width. Try both here with the same items to see it.

How do I make one grid item span two columns?

Click that item in the Live preview, then raise 'Column span' to 2 under Placement. The item-level CSS in the output gains a grid-column rule you can copy.

Should I use CSS Grid or Flexbox?

Grid is for two-dimensional layouts where rows and columns both matter, such as page structures and galleries. Flexbox suits a single row or column, like a navigation bar. Many sites use Grid for the page and Flexbox inside components.

Does CSS Grid work in all browsers?

Yes. Every current version of Chrome, Edge, Firefox and Safari supports it, on desktop and mobile. The code this generator writes needs no prefixes.

Is the code free to use in commercial projects?

Yes. The CSS and HTML are generated from your own settings, with no licence or attribution needed. Use them in client work, themes or products.

Can I copy the CSS straight into my project?

Yes. The generators give plain CSS that works in current browsers. Copy it into your stylesheet, then adjust class names or values to fit the rest of your design.

Is CSS Grid Generator free for commercial work?

Yes. The colours, palettes and CSS you make are yours to use in client projects, products or anything else, with no credit required and no fee.

Why do my screen colours look different when printed?

Screens mix light in RGB, while printers mix ink in CMYK, and some bright screen colours cannot be printed. Convert to CMYK and ask your printer for a proof before a large print run.

What contrast ratio should my text have?

WCAG asks for at least 4.5 to 1 for normal text and 3 to 1 for large text. The Colour Contrast Checker shows whether your pair passes, so you can adjust before publishing.

Do I need to sign in to use CSS Grid Generator?

No. There is no account to create. Open the page, adjust the settings and copy the result. Your choices are worked out on your own device and never leave it.

Further reading

More Colour & CSS Tools

Other free tools for the same kind of job.

Browse all tools