CSS Grid - Repeat Notation intro
🔄 CSS Grid Repeat() Function – Work Smarter, Not Harder!
Master the repeat() function to create complex grid layouts with minimal code – perfect for responsive designs with multiple columns/rows!
🔹 What You'll Learn:
✔️ Basic Repeat Syntax: repeat(4, 1fr) → 4 equal columns
✔️ Mixed Patterns: repeat(2, 1fr) repeat(3, 2fr) → Hybrid layouts
✔️ Alternating Sizes: repeat(3, 100px 200px) → 100px/200px pattern
✔️ Auto-Fit vs. Auto-Fill: Dynamic column creation
📌 Example Code:
css
.container {
display: grid;
/* 3 columns: 2 narrow, 3 wide */
grid-template-columns: repeat(2, 1fr) repeat(3, 2fr);
/* Alternating column pattern */
grid-template-columns: repeat(3, 100px 200px);
/* Responsive magic */
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
🚀 Key Benefits:
Saves Time: Replace long column/row lists with one line
Responsive: Combine with auto-fit/minmax() for fluid layouts
Precision: Create intricate patterns without repetitive code
⏱️ Timestamps:
0:00 Intro to repeat()
1:15 Equal Column Distribution
2:30 Mixed Fractional Units
4:10 Alternating Size Patterns
6:00 Overflow Handling
Use repeat(auto-fit, minmax(250px, 1fr)) for grids that automatically adjust to screen size!
#CSS #WebDev #FrontEnd #Coding