Lesson 2: Template Columns | Gridlock Holmes

What is gridTemplateColumns?

The gridTemplateColumns property defines how many columns your grid has and how wide each should be. You can use fr units, pixels, percentages, auto, minmax(), and repeat()!

💡 Remember:

The value must be a string. Use template literals (backticks) when inserting variables: `repeat(${num}, 1fr)`

Equal Columns with fr Units

// 3 equal columns
container.style.gridTemplateColumns = '1fr 1fr 1fr';

// 4 equal columns using repeat()
container.style.gridTemplateColumns = 'repeat(4, 1fr)';

Fixed-Width Columns

// 3 columns, each 200px wide
container.style.gridTemplateColumns = 'repeat(3, 200px)';

Mixed Sizing

// Sidebar layout
container.style.gridTemplateColumns = '250px 1fr';

// Holy Grail
container.style.gridTemplateColumns = '200px 1fr 200px';

// Different proportions
container.style.gridTemplateColumns = '2fr 1fr'; // 2/3 and 1/3

Dynamic Columns with Template Literals

const numColumns = 5;

// Use backticks for variables
container.style.gridTemplateColumns = `repeat(${numColumns}, 1fr)`;

// Based on array length
const items = ['a', 'b', 'c'];
container.style.gridTemplateColumns = `repeat(${items.length}, 1fr)`;

Auto-Fit for Responsive Grids

// Fit as many 250px columns as possible
container.style.gridTemplateColumns = 'repeat(auto-fit, minmax(250px, 1fr))';

This creates a truly responsive grid - columns wrap automatically!

✅ Pro Tip:

Store common layouts in objects for easy reuse: const layouts = { sidebar: '250px 1fr' }