From the course: CSS: Advanced Layouts with Grid (2017)
Join today to access over 24,200 courses taught by industry experts.
Automatic grid item placement - CSS Tutorial
From the course: CSS: Advanced Layouts with Grid (2017)
Automatic grid item placement
[Instructor] One of the very first things you notice when you start working with CSS Grid Layouts is that the grid items automatically place themselves on the grid. In the exercise files for this movie, I've created a new grid so I'm just going to break this dev tools out here as you can see exactly what's happening. So in my new grid I have three columns, one that's 2fr, two that are 1fr you see here, and I also have three rows. The first row is set to auto-height, meaning it'll be whatever height is necessary to display the content. The second row is at 1fr and the third row is at the 3fr, and it's currently empty because these items are placing themself automatically in the grid. This grid auto-placement is a feature not a bug, and it's tremendously useful when you start working with large groups of content and you just want them to auto-populate a defined grid, as you'll see later in the course. But, if you're using CSS Grid to create custom layouts it can often look really…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Download courses and learn on the go
Watch courses on your mobile device without an internet connection. Download courses using your iOS or Android LinkedIn Learning app.