From the course: CSS: Variables and Fluid Layouts

Unlock the full course today

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

Step 2: Add custom properties to grid layout

Step 2: Add custom properties to grid layout - CSS Tutorial

From the course: CSS: Variables and Fluid Layouts

Start my 1-month free trial

Step 2: Add custom properties to grid layout

- [Instructor] With our grid layout in place and understood let's rework what we have here with custom properties. Remember the goal is to put all of the logic and all of the declarations in one place, which is outside the media queries in our mobile layout and then anything that's going to change from the mobile layout into our media queries that will become something with a custom property. So let's just take a look at our layout here to start with. I have a little comment up here on the top. As part of our layout, we had some margins in place that worked really well for mobile dimensions. And if you notice, I changed some of those values here inside the media query. So for example, we can start with the content. Here, I have a margin of two rem, one rem here outside of the media queries. When we go into the media queries, I change that margin to three rem auto. And that's pretty much where it stays. We don't really…

Contents