CSS grid is a layout in a module which allows you to impose a grid on your view and place items within that grid. Learn the basics in this video.
- [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 available first-level children. …
- Designing with boxes
- The origin of the box in typography
- What is the CSS box model?
- Changing the contents within the box
- Floating and clearing content
- Using the clearfix
- Working with Float, Flex, and Grid
- CSS shapes