grid-template-columns

The most powerful grid property that defines the column structure of a grid container. Must be used with dg(display: grid), where hyphens (-) serve as CSS space separators. The prefix is gtc.

Pattern List

gtc supports various patterns. Hyphens (-) represent spaces between CSS values.

Pattern	Class example	CSS Output	Description
gtcn	`gtcn`	grid-template-columns: none	Remove grid column definition
gtc{vals}	`gtc1fr-2fr-1fr`	grid-template-columns: 1fr 2fr 1fr	Direct value specification. Hyphen = space
gtc{vals}	`gtc200px-1fr`	grid-template-columns: 200px 1fr	Fixed + fluid combination
gtcr{N}-{val}	`gtcr3-1fr`	grid-template-columns: repeat(3, 1fr)	Repeat N times
gtcrfit-minmax{min}-{max}	`gtcrfit-minmax28rem-1fr`	grid-template-columns: repeat(auto-fit, minmax(28rem, 1fr))	auto-fit responsive
gtcrfill-minmax{min}-{max}	`gtcrfill-minmax25rem-1fr`	grid-template-columns: repeat(auto-fill, minmax(25rem, 1fr))	auto-fill responsive
gtcminmax{min}-{max}	`gtcminmax200px-1fr`	grid-template-columns: minmax(200px, 1fr)	Min/max range
gtccalc{expr}	`gtccalc100p-200px-1fr`	grid-template-columns: calc(100% - 200px) 1fr	calc expression

Visual Comparison

Visually compares commonly used grid-template-columns patterns.

2-column equal -- dg gtc1fr-1fr gap8px

1fr

Two columns divide space equally

3-column equal -- dg gtcr3-1fr gap8px

1fr

repeat(3, 1fr) -- Three columns distributed equally

Sidebar + main -- dg gtc25rem-1fr gap8px

Sidebar (25rem)

Main (1fr)

Sidebar has fixed width, main takes remaining space

responsive auto-fit -- dg gtcrfit-minmax20rem-1fr gap8px

Card 1

Card 2

Card 3

Card 4

Card 5

Column count adjusts automatically by screen size. Try resizing the browser window.

1:2:1 ratio -- dg gtc1fr-2fr-1fr gap8px

1fr

2fr

1fr

Center column is 2x wider. Used in dashboard, Holy Grail variations

Pattern Details

`gtc{values}`Direct values

Hyphen-separated values become grid-template-columns values directly. Hyphens represent CSS spaces. fr, px, rem, auto, etc. can be freely combined.

<!-- 2 equal columns -->
<div class="dg gtc1fr-1fr gap2rem">
  <div>Column 1</div>
  <div>Column 2</div>
</div>

<!-- 1:2 ratio -->
<div class="dg gtc1fr-2fr gap2rem">
  <aside>Sidebar (1fr)</aside>
  <main>Content (2fr)</main>
</div>

<!-- Fixed + Fluid -->
<div class="dg gtc200px-1fr gap2rem">
  <nav>Nav (200px)</nav>
  <main>Content (all remaining)</main>
</div>

<!-- Sidebar layout -->
<div class="dg gtc25rem-1fr gap2rem">
  <aside>Sidebar (25rem = 250px)</aside>
  <main>Main Content</main>
</div>

<!-- 3-column ratio -->
<div class="dg gtc1fr-2fr-1fr gap2rem">
  <aside>Left</aside>
  <main>Center (2x wider)</main>
  <aside>Right</aside>
</div>

Key direct value classes

Class	CSS	Usage
`gtc1fr-1fr`	1fr 1fr	2-column equal distribution
`gtc1fr-2fr`	1fr 2fr	1:2 ratio (sidebar:main)
`gtc1fr-2fr-1fr`	1fr 2fr 1fr	1:2:1 ratio (dashboard)
`gtc200px-1fr`	200px 1fr	Fixed 200px + remaining
`gtc25rem-1fr`	25rem 1fr	Sidebar 25rem + remaining
`gtc300px-1fr`	300px 1fr	Wide sidebar + remaining
`gtc20rem-1fr-20rem`	20rem 1fr 20rem	Holy Grail layout

2-column equal -- gtc1fr-1fr

1fr

1:2 ratio --gtc1fr-2fr

1fr

2fr

Fixed + fluid -- gtc200px-1fr

200px

1fr (remaining)

1:2:1 ratio --gtc1fr-2fr-1fr

1fr

2fr

1fr

`gtcr{N}-{val}`repeat(N, val)

Repeats the same column N times. Write repeat count, hyphen, and value after gtcr. The most concise way to create equal-column grids.

<!-- 3 equal column grid -->
<div class="dg gtcr3-1fr gap2rem">
  <div>Card 1</div>
  <div>Card 2</div>
  <div>Card 3</div>
</div>

<!-- 4 equal column grid -->
<div class="dg gtcr4-1fr gap2rem">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
</div>

<!-- 6 equal columns (icons, thumbnails) -->
<div class="dg gtcr6-1fr gap16px">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

Comparison by repeat count

2column --gtcr2-1fr

3column --gtcr3-1fr

4column --gtcr4-1fr

6column --gtcr6-1fr

`gtcrfit-minmax{min}-{max}`repeat(auto-fit, minmax(min, max))

The most important responsive pattern. Column count adjusts automatically based on container width. Guarantees minimum width while distributing remaining space equally. Creates responsive card layouts without media queries.

<!-- Responsive card grid (most commonly used!) -->
<div class="dg gtcrfit-minmax28rem-1fr gap2rem">
  <div class="bg18181B p2rem br8px">Card 1</div>
  <div class="bg18181B p2rem br8px">Card 2</div>
  <div class="bg18181B p2rem br8px">Card 3</div>
  <div class="bg18181B p2rem br8px">Card 4</div>
</div>
<!-- Minimum 28rem(280px) guaranteed, multiple columns when space allows -->
<!-- Column count automatically decreases when space is limited -->

<!-- Small cards (min 20rem) -->
<div class="dg gtcrfit-minmax20rem-1fr gap16px">
  <div>Compact 1</div>
  <div>Compact 2</div>
  <div>Compact 3</div>
  <div>Compact 4</div>
  <div>Compact 5</div>
  <div>Compact 6</div>
</div>

Key points

auto-fit collapses empty tracks. If there are 3 items but space for 5 columns, the remaining 2 columns of space are distributed to existing items, making them stretch. The most suitable pattern for card grids.

Comparison by minimum width

minimum 20rem (200px) --gtcrfit-minmax20rem-1fr

Card 1

Card 2

Card 3

Card 4

Card 5

Card 6

minimum 28rem (280px) --gtcrfit-minmax28rem-1fr

Card 1

Card 2

Card 3

Card 4

Card 5

Card 6

Try resizing the browser window. Column count changes automatically.

`gtcrfill-minmax{min}-{max}`repeat(auto-fill, minmax(min, max))

Similar to auto-fit, but keeps empty tracks instead of collapsing them. Even with few items, column size stays at minimum rather than stretching to maximum.

<!-- auto-fill: preserves empty tracks -->
<div class="dg gtcrfill-minmax25rem-1fr gap2rem">
  <div class="bg18181B p2rem br8px">Item 1</div>
  <div class="bg18181B p2rem br8px">Item 2</div>
</div>
<!-- Even with only 2 items, minimum 25rem size is maintained -->
<!-- With auto-fit, items would expand to full width -->

auto-fill -- gtcrfill-minmax25rem-1fr

Card 1

Card 2

Only 2 items, but empty tracks are preserved so items do not stretch

auto-fit vs auto-fill Comparison

The difference between the two keywords appears when items don't fill all tracks. Compare with the same number of items (2).

auto-fit -- gtcrfit-minmax20rem-1fr

Item 1

Item 2

Empty tracks collapse and items stretch

auto-fill -- gtcrfill-minmax20rem-1fr

Item 1

Item 2

Empty tracks preserved, item size fixed

	auto-fit	auto-fill
Empty track handling	Collapse — space is distributed to items	Preserved — empty space remains
Items stretch	Items expand when space is available	Items maintain minimum size
Common Use Cases	Card grids (when items should fill space)	Fixed-size cells (gallery, thumbnails)
Prefix	gtcrfit-minmax{min}-{max}	gtcrfill-minmax{min}-{max}

`gtcminmax{min}-{max}`minmax(min, max)

Specifies min/max size range for columns. Can be used standalone without repeat or combined with other values for flexible column sizes.

<!-- Min 200px, max 1fr -->
<div class="dg gtcminmax200px-1fr gap2rem">
  <div>Flexible column</div>
</div>

<!-- Min 200px, max 400px fixed range -->
<div class="dg gtcminmax200px-400px gap2rem">
  <div>Range-limited column</div>
</div>

minmax(200px, 1fr) -- gtcminmax200px-1fr

Min 200px, max 1fr

minmax(200px, 400px) -- gtcminmax200px-400px

Min 200px, max 400px

`gtccalc{expr}`calc() expression

Uses calc() to specify column sizes with calculated values. Useful when combining percentages and fixed values.

<!-- calc(100% - 200px) and 1fr combination -->
<div class="dg gtccalc100p-200px-1fr gap2rem">
  <div>calc(100% - 200px)</div>
  <div>1fr</div>
</div>

calc(100% - 200px) + 1fr -- gtccalc100p-200px-1fr

calc(100% - 200px)

1fr

responsive grid

Combine media query prefixes to change column structure by screen size. The most common pattern is 3-column -> 2-column -> 1-column transition.

<!-- 3 cols to 2 cols to 1 col (most common pattern) -->
<div class="dg gtcr3-1fr md-gtcr2-1fr sm-gtc1fr gap2rem">
  <div>Card 1</div>
  <div>Card 2</div>
  <div>Card 3</div>
  <div>Card 4</div>
  <div>Card 5</div>
  <div>Card 6</div>
</div>

<!-- Sidebar to single column on mobile -->
<div class="dg gtc25rem-1fr md-gtc1fr gap2rem">
  <aside>Sidebar</aside>
  <main>Content</main>
</div>

<!-- Holy Grail to single column on mobile -->
<div class="dg gtc20rem-1fr-20rem md-gtc1fr gap2rem">
  <aside>Left</aside>
  <main>Center</main>
  <aside>Right</aside>
</div>

<!-- auto-fit is responsive without media queries! -->
<div class="dg gtcrfit-minmax28rem-1fr gap2rem">
  <div>Auto responsive 1</div>
  <div>Auto responsive 2</div>
  <div>Auto responsive 3</div>
</div>

Responsive transition example

3column -> 2column -> 1column --gtcr3-1fr md-gtcr2-1fr sm-gtc1fr

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Resize the browser window to see column count changes

<tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">Class Combination	Behavior
`dg gtcr3-1fr md-gtcr2-1fr sm-gtc1fr`	3 columns -> 2 columns at 1024px and below -> 1 column at 768px and below
`dg gtcr4-1fr md-gtcr2-1fr sm-gtc1fr`	4 columns -> 2 columns at 1024px and below -> 1 column at 768px and below
`dg gtc25rem-1fr md-gtc1fr`	Sidebar layout -> single column at 1024px and below
`dg gtcrfit-minmax28rem-1fr`	Responsive without media queries using auto-fit
`dg gtc20rem-1fr-20rem md-gtc1fr`	Holy Grail -> single column at 1024px and below

Practical Layouts

Representative layout patterns implemented with grid-template-columns.

sidebar layout --gtc25rem-1fr

Sidebar (25rem)

Main Content (1fr)

Holy Grail -- gtc20rem-1fr-20rem

Left (20rem)

Main (1fr)

Right (20rem)

responsive card grid --gtcrfit-minmax28rem-1fr

Card Title

Card description text

Card Title

Card description text

Card Title

Card description text

Card Title

Card description text

Dashboard layout -- gtc1fr-2fr-1fr

Stats

Main Chart (2fr)

Activity

<!-- Sidebar layout -->
<div class="dg gtc25rem-1fr gap2rem sm-gtc1fr">
  <aside>Sidebar</aside>
  <main>Main Content</main>
</div>

<!-- Holy Grail (3 columns) -->
<div class="dg gtc20rem-1fr-20rem gap2rem md-gtc1fr">
  <aside>Left Sidebar</aside>
  <main>Main Content</main>
  <aside>Right Sidebar</aside>
</div>

<!-- Responsive card grid -->
<div class="dg gtcrfit-minmax28rem-1fr gap2rem">
  <div class="bg18181B p2rem br8px">Card 1</div>
  <div class="bg18181B p2rem br8px">Card 2</div>
  <div class="bg18181B p2rem br8px">Card 3</div>
  <div class="bg18181B p2rem br8px">Card 4</div>
</div>

<!-- Dashboard (1:2:1 ratio) -->
<div class="dg gtc1fr-2fr-1fr gap2rem sm-gtc1fr">
  <div>Stats Panel</div>
  <div>Main Chart</div>
  <div>Activity Feed</div>
</div>

Tips & Notes

Must be used with dg

gtc classes do not work without dg(display: grid). Always use together like dg gtcr3-1fr.

Hyphen = CSS space

Hyphens (-) in class names become spaces between CSS values. gtc1fr-2fr-1fr = 1fr 2fr 1fr. Hyphens are also used for decimal points: gtc1-5fr-2fr = 1.5fr 2fr.

auto-fit is the default responsive pattern

When creating responsive card grids, consider gtcrfit-minmax28rem-1fr first. Provides natural responsiveness without media queries. Use auto-fill only when empty space needs to be maintained.

Use with gap

Specify grid item spacing with gap classes. Example: dg gtcr3-1fr gap2rem. Using gap instead of margin prevents unnecessary margins on first/last items.

Responsive order: large screen -> small screen

Write the default (desktop) first, then override for smaller screens with md-, sm- prefixes. Example: dg gtcr3-1fr md-gtcr2-1fr sm-gtc1fr

grid-template-rows gap display Responsive design

grid-template-columns

Pattern List

Visual Comparison

Pattern Details

gtc{values}Direct values

gtcr{N}-{val}repeat(N, val)

gtcrfit-minmax{min}-{max}repeat(auto-fit, minmax(min, max))

gtcrfill-minmax{min}-{max}repeat(auto-fill, minmax(min, max))

auto-fit vs auto-fill Comparison

gtcminmax{min}-{max}minmax(min, max)

gtccalc{expr}calc() expression

responsive grid

Practical Layouts

Tips & Notes

Related Properties

`gtc{values}`Direct values

`gtcr{N}-{val}`repeat(N, val)

`gtcrfit-minmax{min}-{max}`repeat(auto-fit, minmax(min, max))

`gtcrfill-minmax{min}-{max}`repeat(auto-fill, minmax(min, max))

`gtcminmax{min}-{max}`minmax(min, max)

`gtccalc{expr}`calc() expression