Free · Fast · Privacy-first

CSS grid-template-columns Generator

grid-template-columns is the single most important property in a CSS Grid layout because it defines how many columns exist, how wide each one is, and how they share whatever space remains after the gaps are subtracted. FixTools lets you build that value through a visual interface, mixing fixed pixels, fr units, percentages, minmax() ranges, and repeat() function calls in any combination, and shows you a live preview of the column tracks before you copy the final property value. Whether you need a quick three-column equal split, a fixed sidebar plus flexible main, or a responsive auto-fill grid, the generator writes the exact string you would otherwise have to compose by hand.

⚡ Use Tool Now How it works

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

⚡

Builds grid-template-columns values with mixed unit types

🔒

Supports fr, px, %, minmax(), and repeat()

✨

Live column track preview for each value

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

Understanding grid-template-columns: Units, repeat(), and minmax() Explained

grid-template-columns defines the number and width of the columns in a CSS Grid container, and it is the foundational property from which every other Grid-related decision flows. Each value in the space-separated list represents one column track, and you can mix unit types freely within a single declaration. The value 200px 1fr 200px creates a three-column layout with 200px fixed sidebars and a flexible centre column that expands to fill the remaining space. Percentage values are relative to the grid container width, not the viewport, which is an important distinction when the container itself is constrained inside a wider page. The fr unit represents a fraction of the free space available after fixed-width columns and gaps are subtracted. Using fr units for all columns, written either as 1fr 1fr 1fr or with the shorthand repeat(3, 1fr), creates equal columns that collectively fill the container at any size.

The fr unit is the key innovation that made CSS Grid genuinely better than any previous layout system at handling flexible proportional columns. In a 1200px container with a 24px gap between three 1fr columns, the browser calculates: 1200px minus 48px of total gap equals 1152px of usable space, divided by three equal fr units equals 384px per column. Change the value to 1fr 2fr 1fr and the centre column receives 576px while the outer columns receive 288px each, because the four total fr shares split the available space in the requested ratio. The repeat() function is shorthand for repeating a track definition, so repeat(4, 1fr) is identical to writing 1fr 1fr 1fr 1fr. The repeat() function also accepts auto-fill and auto-fit as the first argument, which instructs the browser to calculate the column count from container width rather than accepting it as a fixed number.

repeat() combined with auto-fill and minmax() together create inherently responsive grids that require no media queries to adapt column counts across screen sizes. The value repeat(auto-fill, minmax(280px, 1fr)) tells the browser to create as many columns as fit inside the container, where each column must be at least 280px wide and can grow up to an equal share of the remaining space. At 900px container width you get three columns of roughly 280px each, at 600px you get two columns of about 290px each, and at 320px you get a single column that fills the container. The minmax() function defines a size range for a track, with the first argument as the minimum and the second as the maximum. This pattern is the standard approach for card grids, gallery layouts, product listings, and any container where the column count should adapt automatically to available space.

Beyond these core patterns, grid-template-columns also supports named line markers using square brackets, which improve readability for layouts where child elements span specific columns. The value [sidebar-start] 240px [sidebar-end main-start] 1fr [main-end] gives each column boundary a name that can be referenced from grid-column declarations on children. This is how production design systems make their layouts self-documenting: instead of writing grid-column: 2 / 3 and forcing readers to count tracks, you write grid-column: main-start / main-end and the intent is obvious. The generator supports named lines as an optional setting, and the resulting CSS is exactly as fast to parse and render as a numeric version while being dramatically easier to maintain when the layout evolves.

MDN: CSS Grid Layout W3C CSS Grid Specification

How to use this tool

💡

Add columns one at a time using the column controls. Set each column to a fixed width, fr unit, or minmax range. The generator writes the grid-template-columns value and shows a live track preview as you build.

How It Works

Step-by-step guide to css grid-template-columns generator:

1
Add your first column
Click Add Column and set the first column to a fixed width such as 240px, an fr value such as 1fr, or a minmax range such as minmax(200px, 1fr) using the unit selector and value input. The preview renders a single track with sample content so you can confirm the size and proportions visually before continuing. Each unit type behaves differently as the container resizes, which is the main reason it helps to see the result before committing.
2
Add remaining columns
Add each additional column track one at a time and the live preview shows the proportional width of each track as you build up the value. You can mix unit types freely inside the same declaration, so a 240px sidebar can sit beside two flexible 1fr columns and a third 120px utility column without any extra configuration. The generator validates each value as you type and rejects invalid combinations before they reach the output.
3
Adjust fr ratios if needed
If the column proportions are not quite right after the initial build, change individual fr values to retune the layout. Watch the preview update in real time as you experiment with different ratios, such as switching 1fr 2fr 1fr to 1fr 3fr 1fr to give the centre column more emphasis. Because fr units always sum to one hundred percent of the available space, you do not need to do any arithmetic yourself, just pick the ratio that looks right.
4
Copy the property value
Click Copy to copy the finished grid-template-columns value and paste it directly into your CSS Grid container rule alongside display: grid and your chosen gap value. The output is a single property line that drops into any stylesheet, framework, or CSS-in-JS solution without modification. Keep the generator tab open for future tweaks, since adjusting one column proportion later is faster than editing the raw string in your editor.

Real-world examples

Common situations where this approach makes a real difference:

Fixed sidebar with flexible main content

A developer building an admin panel needs a 280px sidebar containing navigation links and a main content area that fills the rest of the viewport. The generator produces 280px 1fr as the grid-template-columns value, which is the simplest possible expression of that layout. The sidebar is always exactly 280px regardless of viewport size, while the main area fills all remaining width at any viewport size above the layout breakpoint. The same value works for documentation sites, settings pages, and any interface where a persistent navigation rail flanks a flexible primary content region.

Asymmetric three-column editorial layout

A content designer wants a narrow left sidebar, a wide centre column, and a narrow right sidebar in a 2:7:3 ratio for a magazine-style article page. The generator produces 2fr 7fr 3fr as the value, which expresses the design intent directly in the CSS without any pixel arithmetic. At a 1200px container with 32px of total gaps between the three columns, the columns measure approximately 200px, 700px, and 300px. The fr values make the proportional relationships explicit and resilient: if the container width changes, the ratios stay the same and the columns simply scale, which is exactly what an editorial layout needs.

Responsive card grid with auto-fill

A developer generating a responsive grid for a product listing sets the column value to repeat(auto-fill, minmax(260px, 1fr)) in the generator. The output shows the value and a helpful note that the column count will change automatically with container width. At 1080px container width the grid renders four columns of roughly 260px each; at 560px it drops to two columns of about 270px; at 320px it collapses to a single column that fills the full container width. No media query is needed for the column count to adapt, and the grid behaves identically whether the user resizes the browser or rotates a tablet from landscape to portrait orientation.

Dashboard with mixed fixed and flexible columns

A developer builds a data table grid with a 40px checkbox column on the left, a fixed 120px status column on the right, and three flexible content columns in between for displaying name, email, and last activity. The generator produces 40px 1fr 1fr 1fr 120px as the column value. The fixed columns stay constant at their exact pixel widths while the three fr columns share the remaining space equally as the table container resizes between desktop and tablet widths. The result is a table that uses every available pixel without ever distorting the checkbox or status column dimensions.

When to use this guide

Use this when you need to build a specific grid-template-columns value, particularly when combining fr units, fixed widths, and repeat() in the same declaration.

Pro tips

Get better results with these expert suggestions:

Set gap before finalising fr column values

The fr unit distributes free space only after gap has been subtracted from the total container width. If you set fr values without a gap, then add a 24px gap later in the process, all fr columns shrink slightly because there is now less free space to share. Set the gap value first in the generator, then adjust column fr values, so the proportions you see in the preview reflect the final layout exactly. This small habit prevents a category of subtle width mismatches that only become visible after the change goes live.

Use named line values for complex grid placements

For grids where child elements span specific columns, add line names to your grid-template-columns value using square brackets, such as [sidebar-start] 280px [sidebar-end main-start] 1fr [main-end]. Named lines make grid-column declarations on child elements human-readable rather than relying on opaque numeric track indices that force readers to count tracks. This is particularly valuable in production design systems where the layout may evolve over time and the original author may not be the person making future changes.

Prefer minmax(0, 1fr) over 1fr for text-heavy grids

The 1fr unit has an implicit minimum size of auto based on the content inside the column, which means a column containing a long unbroken word, a wide table, or a fixed-width image may overflow its track and push other columns out of alignment. Using minmax(0, 1fr) instead of 1fr explicitly sets the minimum to zero, allowing the column to shrink below its content's natural size and enabling text wrapping or overflow handling to work correctly. This is one of the most common Grid debugging fixes in production.

Test auto-fill versus auto-fit at different container widths

auto-fill creates empty column tracks at the end of a row when items do not fill the grid; auto-fit collapses those empty tracks and stretches the filled columns to absorb the freed space. For most card grids, auto-fill is the correct choice because it prevents the last row of cards from stretching to full width when there are fewer cards than the maximum column count, which preserves visual consistency. Use auto-fit only when you specifically want the final partial row to span the container, which is occasionally the right answer for centred hero rows but rarely for product listings.

FAQ

Frequently asked questions

grid-template-columns defines the number and size of column tracks in a CSS Grid container. Each space-separated value in the list defines one column, and the width can be a fixed length such as 200px, a percentage such as 25%, a fractional unit such as 1fr, or a range defined with minmax(200px, 1fr). The browser creates one column for each value and places grid items into those columns in source order unless you specify explicit placement using grid-column or grid-area. The property is set on the grid container element, not on individual children, and it works alongside grid-template-rows and gap to define the complete grid structure in a single declaration.

The fr abbreviation stands for fraction, and it represents one share of the available free space inside the grid container after fixed-size columns and gaps have been accounted for. In a container with three 1fr columns and no gaps, each column is exactly one third of the container width. In a container with 1fr 2fr 1fr, the middle column is twice as wide as the outer columns because the four total fr shares split the available space in that ratio. The fr unit is the recommended choice for proportional columns because it adapts to any container size and, unlike percentages, correctly accounts for the space consumed by gap between tracks.

The repeat(count, size) function is shorthand for writing the same column size multiple times within a grid-template-columns declaration. repeat(4, 1fr) is identical to writing 1fr 1fr 1fr 1fr by hand. You can also use repeat(auto-fill, minmax(200px, 1fr)) or repeat(auto-fit, minmax(200px, 1fr)) to tell the browser to create as many columns as fit the container at the given minimum width, which is the basis of responsive grids without media queries. The function also accepts mixed track values, so repeat(3, 1fr 2fr) alternates between 1fr and 2fr columns three times, producing six columns total in the requested pattern.

The minmax(min, max) function sets a size range for a grid column track. The column will never be smaller than the minimum value and never larger than the maximum, but it will flex between those bounds as the container resizes. The value minmax(200px, 1fr) creates a column that is at least 200px wide and grows to fill available space equally with other 1fr columns. The minimum can be a fixed length, a percentage, or auto, and the maximum can be a fixed length, a percentage, fr, or auto. This function is the key ingredient in responsive grid patterns that do not require any media queries to adapt across screen sizes.

Both keywords inside repeat() tell the browser to calculate the column count from the container width rather than accepting a fixed number, but they behave differently when the items present do not fill all available column tracks. auto-fill creates empty column tracks at the end of a row when items do not fill all available columns, so partial rows maintain consistent column widths. auto-fit collapses those empty tracks, letting filled columns stretch to absorb the freed space. For card grids where you want a consistent column width across all rows, including partial ones, auto-fill is usually correct. Use auto-fit specifically when you want the final partial row of items to stretch and fill the container width.

Yes, and mixing unit types is one of the most useful features of the property. The value 200px 1fr 1fr 150px is a valid declaration that creates four columns: a 200px first column for a logo or icon area, two flexible fr columns sharing remaining space equally for content, and a 150px last column for actions. You can mix px, em, rem, %, fr, minmax(), and auto in the same declaration. Fixed-size values are subtracted from the container width first, then fr units share whatever space remains in the proportions you specified. This flexibility is what makes grid-template-columns powerful for real-world layouts.

Use repeat(n, 1fr) where n is your desired column count. The value repeat(3, 1fr) creates three equal-width columns; repeat(5, 1fr) creates five. The fr unit ensures each column takes an equal share of the available space after any gap has been subtracted from the container width. Avoid using percentages for equal columns because percentage widths do not automatically account for gap, which causes the columns to overflow the container by the total gap width. For text-heavy columns that may contain long unbroken words, use repeat(n, minmax(0, 1fr)) instead to allow the columns to shrink below their content size when necessary.

When the number of grid items exceeds the explicit column count, the browser automatically creates additional rows in what is called the implicit grid to hold the overflow items. The size of these implicit rows is controlled by the grid-auto-rows property, which defaults to auto and sizes rows to their content. Items continue filling columns from left to right and wrap to a new row whenever they exceed the defined column count. This automatic placement behaviour is called the grid auto-placement algorithm, and it means you can add or remove items from your HTML without rewriting the grid CSS to accommodate the new count.

Yes. The subgrid value for grid-template-columns lets a nested grid container inherit the track sizes and line positions of its parent grid rather than defining its own. Writing grid-template-columns: subgrid on a child grid container makes that child align its own children to the same column lines as the parent grid. Subgrid is supported in modern Chrome, Firefox, Safari, and Edge as of late 2023. It is particularly valuable for card grids where the content inside each card (title, image, price, button) must align horizontally across all cards on a row, which was previously difficult to achieve without explicit measurements.

Wrap the grid-template-columns declaration inside a @media block targeting the viewport range where the alternate layout should apply. For example, you might set grid-template-columns: 1fr at the default mobile breakpoint and override it with grid-template-columns: 240px 1fr inside @media (min-width: 768px) to add the sidebar at tablet width. Each breakpoint can use a completely different value, and only the grid-template-columns property changes between them, so the rest of the grid declaration stays in one place. Container queries are an alternative when the grid behaviour should respond to its own container width rather than the viewport.