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