From the course: CSS: Variables and Fluid Layouts
Unlock the full course today
Join today to access over 22,600 courses taught by industry experts or purchase this course individually.
Create a starting CSS for the grid system - CSS Tutorial
From the course: CSS: Variables and Fluid Layouts
Create a starting CSS for the grid system
- [Instructor] Now that we have our HTML all marked up with our wrapper and rows and our columns, let's go ahead and start writing some Flexbox for a desktop-based layout. So first of all, I'm going to start by putting in some colors here for col one. Let's put in a background color of a lovely shade of pale yellow. And then for col two, I'll put in a nice purple. For col three, I'll put in this blue here. And then for col four, there we go, so we'll put in this nice purple here for col four. So there we go. We've just put in some background colors so that we can see what we're doing. Anytime you're working with layout problems like this, putting in some borders, putting in some background colors is always super helpful and if you pick ugly colors like I did, well, you won't forget to take them out when you decide to put this code into production. So that's the whole purpose of those colors there. And now…
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.
Contents
-
-
-
-
-
(Locked)
Mark up a simple four-column grid system6m 48s
-
(Locked)
Create a starting CSS for the grid system7m 1s
-
(Locked)
Add media queries to your grid system11m 39s
-
(Locked)
Rewrite CSS to integrate calc() and custom properties7m 53s
-
(Locked)
Rewrite CSS to integrate gaps between grid cells4m 35s
-
(Locked)
Make the layout formula even more flexible9m 26s
-
(Locked)
Challenge: Media query integration1m 24s
-
(Locked)
Solution: Media query integration1m 59s
-
(Locked)
-
-