From the course: CSS: Advanced Layouts with Grid

Unlock the full course today

Join today to access over 22,400 courses taught by industry experts or purchase this course individually.

Automatic grid item placement

Automatic grid item placement - CSS Tutorial

From the course: CSS: Advanced Layouts with Grid

Start my 1-month free trial

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…

Contents