Free · Fast · Privacy-first

Responsive CSS Grid

A responsive CSS Grid adjusts its column count automatically as the container narrows or widens, without a single media query in the stylesheet. The pattern relies on two features built into the grid-template-columns property: the auto-fill keyword inside repeat() and the minmax() function that defines a size range for each column track. FixTools generates the correct repeat() value for your chosen minimum column width and previews exactly how the grid collapses as the container width decreases through tablet and mobile breakpoints. The resulting CSS is one declaration that handles every viewport size from a 4K monitor down to a 320px phone, with the browser doing all the column-count arithmetic at runtime.

⚡ Use Tool Now How it works

Cost: Free forever
Sign-up: Not required
Processing: In your browser
Privacy: Files stay local

⚡

Generates repeat(auto-fill, minmax()) values with correct syntax

🔒

Live preview shows column count at different container widths

✨

Supports auto-fill and auto-fit comparison

CSS Tool

Grid Flexbox Builder

All processing happens in your browser — your files are never uploaded to any server.

🚀Open Grid Flexbox Builder

100% Free · No account · Works on any device

How Responsive CSS Grid Works Without Media Queries

A responsive CSS Grid without media queries works because of how the browser resolves the repeat() function in combination with the auto-fill keyword and minmax() function. The value repeat(auto-fill, minmax(250px, 1fr)) instructs the browser to create as many columns as will fit into the container, given that each column must be at least 250px wide and is allowed to grow up to one equal share of the remaining space. If the container is 1100px wide with a 20px gap, the browser fits four columns each roughly 255px wide. If the container narrows to 700px, it fits two columns each roughly 330px wide. If it narrows further to 320px, it fits a single column that fills the container. No media query specifies these breakpoints; the browser calculates the column count continuously as the container resizes, which makes the layout inherently fluid rather than stepping through fixed breakpoints.

The auto-fill and auto-fit keywords are two closely related options that control what happens when items do not fill all available columns in the last row of the grid. The auto-fill keyword creates as many column tracks as the container allows, even if some tracks are empty at the end of the last row because there are fewer items than columns. The result is that partial rows of cards do not stretch to fill the container: a three-item row in a four-column grid shows three normal-width cards and one empty track. The auto-fit keyword collapses those empty tracks and stretches the filled columns to share the full container width between them. For most card grids and product listings, auto-fill is the correct choice because it maintains consistent card widths regardless of how many items appear in the final row.

Choosing the right minmax minimum value is the key design decision in a responsive Grid, and it determines the column counts at every viewport size. The value minmax(250px, 1fr) creates columns that are at least 250px wide and expand equally to fill remaining space. If your cards have readable content at 220px and look polished up to 400px, a minimum of 240px gives natural breakpoints at common container widths. Too small a minimum such as 100px results in many narrow columns at large viewport sizes that overwhelm the page with thin tracks; too large a minimum such as 400px results in a single column appearing too early on medium screens where the design called for two or three. The generator previews column count at several container widths so you can confirm the minimum value produces the column counts your design requires at the breakpoints you care about.

Beyond the column count behaviour, responsive grids also need to consider gap, alignment, and overflow handling to behave predictably in real-world content scenarios. A consistent gap of 16px to 24px works for most card grids, with smaller gaps producing denser layouts and larger gaps producing more breathing room. The align-items: stretch default makes all cards in a row share equal heights, which is usually desirable; switching to align-items: start lets cards size to their content individually when uniform heights are not needed. For text-heavy content that may contain long unbroken words or URLs, switching the minmax minimum from a pixel value to 0 (as in minmax(0, 1fr)) prevents content from forcing tracks wider than expected, which is one of the most common debugging fixes for production responsive grids.

MDN: CSS Grid Layout W3C CSS Grid Specification

How to use this tool

💡

Set your minimum column width in the generator, choose auto-fill or auto-fit, add a gap value, and copy the output. The grid-template-columns value uses repeat() with minmax() and adapts column count automatically.

How It Works

Step-by-step guide to responsive css grid:

1
Set your minimum column width
Enter the minimum width each column should be before the browser drops to fewer columns to maintain readable card sizes. A value of 250px to 300px works for most card grids with text content and small images; tighter 200px values suit compact data tiles; larger 320px values fit content-heavy preview cards with featured images. The preview updates immediately so you can see how many columns appear at the current container width before adjusting any other property.
2
Choose auto-fill or auto-fit
Select auto-fill if card widths should stay consistent across all rows including partially filled ones, which is the right choice for most product grids and galleries. Select auto-fit if the last row of items should stretch to fill the container width when there are fewer items than the maximum column count. The two keywords look identical when the grid is full and only differ in their behaviour on partial last rows, so test both with realistic item counts to confirm the desired behaviour.
3
Set the gap value
Add a row and column gap value, typically between 16px and 24px for card grids. The gap is factored into the column count calculation by the browser, so set it before finalising your minimum column width to avoid recalculating column counts after the fact. You can also set row-gap and column-gap separately if your design calls for different vertical and horizontal spacing between cards, such as tighter horizontal gaps with looser vertical ones.
4
Copy the grid-template-columns value
Click Copy CSS to copy the complete container ruleset with the repeat(auto-fill, minmax()) value, the gap, and any alignment properties you configured. Paste it into your stylesheet on the card container selector. The output works in every modern browser without vendor prefixes, and it produces consistent responsive behaviour from mobile through to ultra-wide desktop monitors with no additional media queries required.

Real-world examples

Common situations where this approach makes a real difference:

E-commerce product grid

An online shop uses repeat(auto-fill, minmax(240px, 1fr)) with gap: 20px for its main product listing page. At 1280px container width the grid shows five columns of roughly 240px each; at 960px it shows four columns; at 720px it shows three; at 480px it shows two; and at narrower widths it collapses to a single column. No breakpoints are defined in the CSS at all. Product cards maintain consistent widths at every viewport size between these natural break points, and the last row never shows stretched cards because auto-fill keeps the empty tracks rather than collapsing them.

Photography portfolio gallery

A photographer wants a tight gallery that adjusts column count automatically as the viewport changes. Using repeat(auto-fill, minmax(280px, 1fr)) with gap: 8px creates a dense grid that shows four columns on a 1200px wide container and drops to two columns on a 600px tablet view in landscape. The tight 8px gap visually unifies the gallery into a single visual block rather than a collection of separate cards. The gallery requires zero media queries to maintain its responsive behaviour and works correctly on every screen width from mobile portrait through to ultra-wide desktop monitors.

Blog post card listing

A blog index page uses repeat(auto-fill, minmax(320px, 1fr)) for article preview cards that each contain a featured image, a title, an excerpt of around forty words, and a publication date. The larger 320px minimum width ensures the excerpt text is readable at every column width without truncating to one or two visible lines. Three columns appear on a typical desktop monitor, two columns appear on tablets in portrait orientation, and one column appears on mobile phones narrower than around 700px. The single declaration handles every device the blog's audience uses.

Team member directory

A company team page with profile cards uses repeat(auto-fit, minmax(200px, 1fr)) instead of auto-fill, because the team has only twelve members and the last row of cards often has only one or two members rather than a full row. The auto-fit choice ensures the final row of cards stretches to fill the container width, matching the visual width of complete rows above rather than leaving an awkward empty space on the right. The smaller 200px minimum keeps profile cards compact since they only need to display a photo, name, title, and a couple of social icons.

When to use this guide

Use this when building a card grid, image gallery, or product listing where column count should adapt to container width automatically without writing breakpoint-specific media queries.

Pro tips

Get better results with these expert suggestions:

Set gap before choosing your minimum column width

The browser subtracts the total gap space from the container width before calculating how many columns fit, which means changing the gap after you finalise your column minimum shifts the column count at every viewport size. A 16px gap across five columns removes 64px from the available width. Set the gap value first, then adjust your minmax minimum so the column count at the widths you care about matches your design intent. This habit prevents the late surprise where adding a larger gap suddenly drops your three-column layout to two.

Use auto-fill for consistent card widths, auto-fit for stretching final rows

The auto-fill keyword keeps card widths consistent across all rows including the last partial row, while auto-fit stretches the cards on the final row to fill the container width when there are fewer items than column tracks. If your last row commonly has one or two items and you do not want them stretched to fifty or one hundred percent width, choose auto-fill. If your last row should always look like the rows above, even when it has only one card, choose auto-fit. Match the keyword to your design intent rather than guessing.

Test at the exact width where columns drop from three to two

Find the container width where your minmax value causes the grid to drop from three to two columns and verify the cards look correct at that exact transition. Cards often jump from around 300px to 500px wide at this transition, which can expose layout issues in card content that is not flexible enough to handle the wider variation. Internal card images may need to switch from cover to contain, text may need to wrap differently, and buttons may need to grow with their container.

Add align-items: start to prevent short cards from stretching

By default, Grid stretches items to fill the full row height through align-items: stretch, which is usually what you want for cards with prices or buttons that should align across the row. In a card grid where you specifically want cards to size to their own natural content height, add align-items: start to the grid container. The default stretch behaviour is correct when all cards in a row should share equal heights for visual consistency, but it produces awkward empty space in cards with much less content than their row siblings.

FAQ

Frequently asked questions

It works by using repeat(auto-fill, minmax(250px, 1fr)) as the grid-template-columns value, which combines two features of the CSS Grid specification. The auto-fill keyword tells the browser to calculate the column count based on the container width rather than accepting it as a fixed number. The minmax(250px, 1fr) function defines the size range for each column, with 250px as the minimum and 1fr as the maximum. The browser creates as many 250px-minimum columns as fit the container, expanding each one equally to fill any remaining space. As the container narrows, columns that no longer fit are removed automatically and the remaining ones grow to absorb the freed space.

Both keywords tell the browser to calculate column count from container width, but they handle the last row differently. The auto-fill keyword keeps empty column tracks at the end of a partial row, which maintains consistent column widths across all rows including the last one that has fewer items than the maximum column count. The auto-fit keyword collapses those empty tracks and stretches the filled columns to share the freed space. For product grids and galleries where consistent card widths matter for visual rhythm, auto-fill is usually the correct choice. For smaller datasets or design patterns where the last row should fill the container, auto-fit is the appropriate keyword.

Choose a value based on the minimum width at which your card content is still readable and usable. For text-heavy cards with headings and descriptions, a range of 280px to 320px is common because that width keeps title lines from breaking awkwardly and gives the excerpt text room to display two or three lines. For image-dominant cards such as gallery thumbnails, 200px to 250px works well. For compact data items such as tag chips or small stat cards, 160px to 200px is appropriate. Test your chosen value by checking column counts at your target viewport widths: a 280px minimum in a 1200px container produces about four columns, while in a 600px container it produces two.

Yes, and the two approaches complement each other rather than conflicting. The auto-fill pattern handles the column count automatically across viewport sizes, but you may still need media queries for other layout changes: switching from a multi-column grid to a single-column list at very small widths, changing gap sizes between breakpoints, or restructuring the page skeleton at small viewports to move sidebars from beside the content to above it. Use the auto-fill column template as your default base layout and add media query overrides only for layout changes the auto-fill pattern cannot handle by itself. This produces shorter CSS than a fully media-query-driven approach would require.

If you are using auto-fit instead of auto-fill, empty column tracks are collapsed, which causes the items in a partial last row to stretch and fill the space across the container. Switch to auto-fill to prevent this behaviour: auto-fill keeps the empty tracks in place and maintains consistent column widths in partial rows. If you want the last row of cards to align to the left like a paragraph of text rather than stretching across the container, add justify-content: start to the grid container, which prevents items from stretching into empty tracks while still preserving the auto-fill column structure across the rest of the grid.

Yes, down to a container width equal to the minmax minimum value. At that point the grid has exactly one column and the card fills the full container width. Below that minimum, the card content can overflow the container if it contains elements wider than the available space, such as images with fixed widths or pre-formatted text. To prevent overflow at very small screen sizes, ensure your minmax minimum is smaller than the smallest viewport width your project must support. A 240px minimum works correctly down to a 240px wide container, which covers every modern phone in portrait orientation including older devices.

Yes. The auto-fill pattern controls only the column count and column widths; row height is controlled separately by the grid-auto-rows property or by the natural content height of the tallest item in each row. To set explicit row heights, add grid-auto-rows: 300px to the grid container, which forces every row to be exactly 300px tall. To let rows size to their content while still maintaining equal heights within each individual row, leave grid-auto-rows unset and rely on the default stretch alignment, which makes all cards in a row match the tallest card. Different rows can have different heights depending on their content.

Yes, in every modern browser without any vendor prefixes or polyfills. The repeat(auto-fill, minmax()) pattern is supported in Chrome, Firefox, Safari, and Edge with full feature parity, and it has worked reliably since the initial 2017 release of CSS Grid in those browsers. Mobile Safari and Chrome on Android also support it natively. Internet Explorer 11 does not support auto-fill or auto-fit, so if IE11 support is a hard requirement for your project, a media-query-based grid with explicit breakpoints is the alternative approach. For every other browser target, the auto-fill pattern works without any modification.

Add max-width: 100% and height: auto to images inside grid cards, which ensures the image scales down to fit its container instead of forcing the column wider than the column track allows. For images that should fill a fixed aspect ratio within the card, use aspect-ratio: 16 / 9 along with object-fit: cover, which crops the image to the desired ratio without distorting its proportions. Without these properties, an image larger than its column track can override the minmax minimum width and force the entire grid out of alignment, which is one of the most common sources of broken responsive card grids.

Yes. Container queries let the grid respond to the size of its parent container rather than the viewport, which is useful for grids that appear inside variable-width containers such as sidebars or modal dialogs. Set container-type: inline-size on the parent and then write @container rules that adjust the minmax minimum or the gap value based on the container width. This is more precise than viewport-based media queries because the grid adapts to its actual rendering context. Container queries are supported in all modern browsers as of 2023 and work cleanly with the auto-fill pattern as the default layout.