From the course: Practice It: CSS Layout
Join today to access over 24,700 courses taught by industry experts.
Grid vs. Flexbox - CSS Tutorial
From the course: Practice It: CSS Layout
Grid vs. Flexbox
- [Instructor] Now let's create a one column layout using CSS Flexbox. In order to better grasp the differences between grid and Flexbox and determine the best use cases for each approach. So again, I have a container here with three items inside. For this simple one column layout the Flexbox approach is really useful. So we'll start by setting the display on the container to flex. With Flexbox we'll be applying most of the CSS to the parent container and then we'll set the flex direction. Since we're working with the mobile first approach and we want everything to be aligned in one line on the page, column makes the most sense. Now, without styling each item individually we can use our universal selector, the asterisks, to set a height for each of the three items. Here instead of using fractions, we use percentages. Let's give them each a height of maybe 20% of the container and we should make the container take up the…
Download courses and learn on the go
Watch courses on your mobile device without an internet connection. Download courses using your iOS or Android LinkedIn Learning app.
