(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 this and go back and look and refresh, so now we have our boxes set up but we still need to put the colors in the right place. Our first color is red. Looking at this we can see that red goes from line two to line six. In my code I'm gonna add a line on 14, that's my class of red, and then it's gonna be grid-column-start, two to start at line two, and grid-column-end six to end at line six.
I go back to my page and refresh and now red is in the correct place. The next one is orange. Orange, it's in the first column, it starts at line two and goes down to line six. So in my CSS on line 18 I'm gonna add the class of orange and then it's gonna be grid-column-start one because it starts on the first line going horizontally. And then grid-row-start two to start at line two, and then grid-row-end six to end at line six.
Save, go back and refresh and now our orange is in the correct place. Next we're gonna do yellow. Yellow is a rectangle, a wider rectangle, it is starting at line two and going to line four. And then going down it's starting at two and going to five. So next the class of yellow, and keep in mind there's a bunch of different properties we can use that kind of do the same thing. So this time instead of doing grid-column-start and grid-column-end I'm just going to do grid-column which allows you to put both numbers in the value.
So yellow is grid-column and then two and slash and four, so that means the column starts at line two and ends at line four. Next is grid, row, that's two slash five as it starts at line two and ends at line five. And save. Go back here and refresh, and now our yellow is in the right place. Next is green, we have green that starts at line four and goes to line six, column wise.
In my CSS on line 27 I'm starting with green, and that is going to be grid-column colon, it starts at four and then slash. Instead of putting line six I can put span two which will have the same effect, it just spans two different columns. Save, go back here and refresh. And now we have green in the right place. Next is blue, blue goes all the way across the bottom line. It starts at line two and spans four columns.
So here in the CSS on line 30, class of blue and I'm going to grid-column colon two slash span four. Save, go back here and refresh and now we have blue in the right place. Put the other divs that are after the blue even further down in the grid, but we'll still keep moving them into the right places and everything will fit within the grid we want once everything's in place.
The next one we have is purple, so purple starts column wise at line six, and then going down it goes from line one at the top to line six at the bottom. For the class of purple, on line 33, we're going to do grid-column-start colon six, and it's just one column across so we don't need an ending number for that one. And then grid-row-colon one slash six.
Save, come back here and refresh, and now purple is in the correct place. Gray is this box in the center here, column wise it goes from line four to six and then rows it goes from line three to line five going vertically. So I'm gonna add gray on line 37 and this is grid-column colon four slash six. And then grid-row colon three slash five.
So there's actually another way to write this. We can use the grid area instead and just have one declaration with all four numbers in there. So instead of that I'm gonna do grid-area-colon. My first number is the row starting line which is three followed by the column starting line which is four, the row ending line which is five, and the column ending line which is six. Save, go back and refresh, and now we have gray in the correct place.
And finally, we just need to do that one last white box. So that's gonna go in the top left. So next in line 40 I have white as the class and then I'm gonna do grid-column-start colon one. And then grid-row-start colon one and save. Go back here and refresh, and that's it, we successfully arranged our rainbow into a grid.
- What is responsive design?
- The responsive page structure
- Accessibility and responsive design
- Using media queries
- Designing with CSS Grid
- Designing with CSS Flexbox