Understanding: grid-template-columns: repeat(2, 1fr)

🔍 Breaking Down the Code

grid-template-columns: repeat(2, 1fr);

grid-template-columns = Defines column widths

repeat() = Function to repeat a pattern

2 = Number of columns to create

1fr = Each column gets 1 fraction of available space

📊 What "1fr" Means

"fr" = fraction unit
• 1fr = 1 part of the available space
• 2fr = 2 parts of the available space
• If you have 1fr + 1fr = each gets 50% of space
• If you have 1fr + 2fr = first gets 33%, second gets 67%

🎯 Basic Example: repeat(2, 1fr)

This creates 2 columns, each taking equal space (50% each)
grid-template-columns: repeat(2, 1fr);
Item 1
(50% width)
Item 2
(50% width)
Item 3
(50% width)
Item 4
(50% width)

📏 More Examples

3 Equal Columns

repeat(3, 1fr)
33%
33%
33%

4 Equal Columns

repeat(4, 1fr)
25%
25%
25%
25%

⚖️ Different Fraction Sizes

You don't have to use equal fractions!
grid-template-columns: 1fr 2fr 1fr;
1fr
(25%)
2fr
(50%)
1fr
(25%)

🔧 Fixed vs Flexible

You can mix fixed sizes with flexible ones!
grid-template-columns: 200px 1fr 100px;
200px
(fixed)
1fr
(flexible)
100px
(fixed)

🔄 Auto-Fit Example

This creates columns that automatically fit based on content size!
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
Auto 1
Auto 2
Auto 3
Auto 4
Auto 5

🎮 Interactive Grid Builder

Current: grid-template-columns: repeat(2, 1fr);
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6

💡 Key Takeaways

repeat(2, 1fr) is shorthand for 1fr 1fr

repeat(3, 1fr) is shorthand for 1fr 1fr 1fr

fr units share the available space proportionally

repeat() saves you from typing the same thing multiple times