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

Solution: The rainbow box - HTML Tutorial

From the course: Responsive Layout

Start my 1-month free trial

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…

Contents