Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

YouTube

The Magic of Auto-Fit and Auto-Fill - and the Difference Between Them

Kevin Powell via YouTube

Overview

Coursera Flash Sale
40% Off Coursera Plus for 3 Months!
Grab it
Learn CSS Grid's auto-fit and auto-fill properties through a comprehensive 15-minute tutorial that demystifies these powerful layout tools. Start with the fundamentals of grid columns before progressing to the repeat syntax and breaking down the repeat auto-fit declaration step by step. Discover techniques for preventing overflow issues and implementing variables for minimum values, along with memory aids to help retain the complex declaration syntax. Explore the crucial differences between auto-fit and auto-fill properties through practical demonstrations and code examples. Master responsive grid layouts that automatically adjust column counts based on available space, making your designs more flexible and adaptive across different screen sizes.

Syllabus

00:00 - Introduction
00:25 - The basics of grid columns
02:30 - Using the repeat syntax
03:15 - Breaking down repeat auto-fit
05:45 - Preventing overflow
08:00 - Use a variable for the minimum value
08:45 - How to remember this declaration
11:25 - The difference between auto-fit and auto-fill

Taught by

Kevin Powell

Reviews

Start your review of The Magic of Auto-Fit and Auto-Fill - and the Difference Between Them

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.