From the course: Making Sense of the CSS Box Model

Unlock the full course today

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

Modern layout modules

Modern layout modules - CSS Tutorial

From the course: Making Sense of the CSS Box Model

Start my 1-month free trial

Modern layout modules

- [Instructor] In the time since I first recorded this course, the web, and especially web layouts, have evolved. So let's catch up with the latest in modern layout modules and how they relate to the box model. Short version, as you've learned through this course so far, web layouts were always based on a vertical, single-column layout where each box stacked on top of the next box, and anytime you wanted to put one thing next to another thing, we had to either float the box or do some sort of hack involving JavaScript. This is no longer the case thanks to two powerful new layout modules, flex and grid, and now you're able to use float, flex, and grid in combination to create flexible, responsive, advanced layouts. Now, here's a quick breakdown to help you get your bearings. Float is for floating content within its current context. Think floating an image to the left or right and letting the surrounding content float up…

Contents