Using CSS grid you can create advanced two-dimensional layouts and position items within those layouts in pretty much any way you want, giving you new layout abilities on the web.
- [Instructor] Grid is a complex layout module … with a lot of advanced features, … and we have several courses that explore them in detail. … In this course, … I want to give you a quick tour … of some of the most notable features … and how you can take advantage of them immediately. … In this example, … I've taken a flex box example with the cards … and converted it to a grid layout. … So, these cards are now in a grid layout. … Looks almost the same, … but it works quite differently , … and you'll see that you have a lot more control … than you did with flex. … First off, you may have noticed previously … I use this FR units to define the grid lines … of my grid container. … The FR unit denotes a fraction of the available space. … So if I go in here to grid template columns, … and I say one FR, … two FR. … One FR you will see each of the grid lines that I've created … will take up one fraction of the space, … then two fractions of the space, … then one fraction of the space. … And this is completely dynamic …
- 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