From the course: Making Sense of the CSS Box Model
Join today to access over 22,600 courses taught by industry experts or purchase this course individually.
Grid: Layout-based layouts - CSS Tutorial
From the course: Making Sense of the CSS Box Model
Grid: Layout-based layouts
- [Instructor] While flex creates layouts based on the size of the flex items, the grid layout module creates layouts by applying a grid to a container and placing its immediate child items within that grid. This is an entirely new way of thinking about layouts on the web, which relates more to classic print layouts than what we think of as web layouts. That said, the grid layout module is designed for the responsive web and it's a great tool for creating advanced responsive layouts. So how do grid layouts work? Well, first, you need a container with a set of child items. So, here, I have this div with a class grid container, and it has a series of first-level children. Now, if I take grid container and I set its display property to grid, I turn it into a grid container, and the first-level children become grid items. Out of the box, we now have a single-column grid with however many rows are necessary to fill in the…
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.