From the course: CSS for Developers

Unlock this course with a free trial

Join today to access over 24,800 courses taught by industry experts.

Layout and positioning options

Layout and positioning options - CSS Tutorial

From the course: CSS for Developers

Layout and positioning options

- [Instructor] Layout and positioning have historically been huge struggles in CSS and undoubtedly a big reason that people find CSS so frustrating. Thankfully, CSS has matured greatly in this regard and offers modern modules that give us tremendous control over layouts. To give you an overview of what's possible, I've created four examples in Codespaces for this lesson. They are flexbox, flow, grid, and position. I'm going to walk you through each one of these and you're welcome to get in here and play around with the code. These are simple archetypal examples that should give you a starting point to experiment and see how the different pieces work together. I've got these fired up in a browser here and let's start with flow.html. Flow is the default layout module for the web, meaning if you do nothing, you get a flow layout. I'll turn on developer tools just so you can see what's happening in the DOM. So flow gives you a single column layout where each block level element sits below…

Contents