From the course: Responsive Layout
Unlock the full course today
Join today to access over 22,500 courses taught by industry experts or purchase this course individually.
Solution: The rainbow box - HTML Tutorial
From the course: Responsive Layout
Solution: The rainbow box
(electronic jingle) - [Instructor] Your challenge for this chapter was to use grid layout to take a simple list of divs and make them look like this. This can be done easily with grid. This is what our starting page looks like. First we're going to give the container a display value of grid. Our div that's a container simply has the class of container and then display grid. Looking back at what our finished layout should look like, we can see that the grid is six boxes across and five boxes down. We're going to use grid template columns and grid template rows to set that up. So on line 11, grid-template-columns. And then I'm gonna do repeat, repeat six times, comes 1FR for the sides so they're all the same size. And then grid template rows, repeat, and then five comma 1FR, so we have five there all the same size. Now we have a grid, we just have to get the colors in the right place. So we have five comma 1FR which means that we have five that are all the same size. So we're gonna save…
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
-
-
-
-
-
Intro to CSS Grid2m 10s
-
Defining rows and columns3m 55s
-
Grid gap1m 52s
-
Sizing rows and columns5m 52s
-
Placing grid items5m 51s
-
Grid alignment overview1m 13s
-
Aligning tracks3m 46s
-
Aligning grid items within tracks2m
-
Aligning individual grid items1m 47s
-
Variable columns4m 45s
-
Grid template areas4m 12s
-
Naming grid lines2m 47s
-
Ordering grid items1m 16s
-
Grid flow and implicit tracks3m 55s
-
Challenge: The rainbow box1m 9s
-
Solution: The rainbow box6m 42s
-
-
-
-