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 - 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…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.