HTML, CSS & JavaScriptbeginnerRuns in browser

CSS Grid Generator

Use this CSS Grid Generator to create a repeatable card layout without manually calculating every column. It makes the repeat and minmax pattern visible, then pairs it with a narrow-screen rule so the starting code remains practical outside the demo.

Edit in Code Studio

Live result

Run the original project

index.htmlSandboxed browser preview

Complete source

Read and copy the code

Loading source viewer...

Inside the project

How it works

The preview updates grid-template-columns and gap directly, so the grid immediately mirrors the CSS output.
The repeat and minmax declaration keeps every column flexible while preserving a usable minimum card width.
A small viewport media query demonstrates a readable fallback rather than assuming every multi-column grid works on a phone.

Try it yourself

Run and customize it

01Choose a column count that fits the card content rather than maximizing density.
02Adjust gap after testing whether the cards still read as separate groups.
03Copy the generated CSS and test it with your real content lengths and image sizes.

Learning goals

What to study in this source

Read the repeat and minmax syntax used by modern CSS Grid layouts.
Understand why column count and minimum card width should be considered together.
Add a small-screen fallback instead of assuming a desktop grid automatically remains usable.

Next experiments

Useful ways to customize it

Use auto-fit or auto-fill if you want the browser to choose the number of columns based on available width.
Add grid-auto-rows when cards need a consistent vertical rhythm.
Combine cards with the Box Shadow Generator output for a simple product or resource grid.

Common questions

CSS Grid Generator FAQs

What does repeat in CSS Grid do?

repeat() shortens a repeated track definition. For example, repeat(3, 1fr) creates three equal columns, while repeat(3, minmax(220px, 1fr)) creates three flexible columns that do not shrink below the chosen minimum.

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

Both help a Grid create responsive columns, but auto-fit collapses unused tracks while auto-fill can preserve empty tracks. Start with auto-fit for most card grids where filled columns should stretch to use remaining space.

Should I use fixed pixel columns in a responsive grid?

Fixed pixel columns can work for tightly controlled dashboards, but minmax with flexible fractions is usually more resilient for cards that need to adapt across laptop, tablet, and mobile widths.

Can CSS Grid be used with semantic list markup?

Yes. A ul or ol can be the grid container and each li can be a card. Semantic list markup is often clearer for a collection of related items than a series of unlabelled div elements.

Why does a CSS Grid overflow on mobile?

Overflow often happens when the grid's minimum column width, child content, or fixed gap is wider than the available space. Test at narrow widths and add a one-column fallback or reduce the minimum width where appropriate.

More source code

Related projects

beginner / 1 file