From the course: CSS: Variables and Fluid Layouts
Join today to access over 22,500 courses taught by industry experts or purchase this course individually.
Mark up a simple four-column grid system - CSS Tutorial
From the course: CSS: Variables and Fluid Layouts
Mark up a simple four-column grid system
- [Instructor] In this next chapter, I'll walk you through step by step creating a flex box based grid system, using the principles of responsive design 2.0. We'll be creating a simple four column grid system. However, you can use the principles that I'm going to introduce here to create your own grid system. No matter how many or how few columns you'd like to use, because we're going to leverage calc and custom properties as part of our process. I showed you one way to start coding a four column grid system back in the first chapter, but I didn't include any media queries. So, over the course of this chapter, we're going to go through the whole process using a slightly different methodology than what I used in the first chapter. And, we'll be adding CSS. We'll be adding media queries. We'll work with calc. We'll work with custom properties. All of that. But, in order to get started, the very first thing that…
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.
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.
Contents
-
-
-
-
-
Mark up a simple four-column grid system6m 48s
-
Create a starting CSS for the grid system7m 1s
-
Add media queries to your grid system11m 39s
-
Rewrite CSS to integrate calc() and custom properties7m 53s
-
Rewrite CSS to integrate gaps between grid cells4m 35s
-
Make the layout formula even more flexible9m 26s
-
Challenge: Media query integration1m 24s
-
Solution: Media query integration1m 59s
-
-
-