Lesson 20 of 21 · Layout and paint
Grid areas
A Grid places its children in rows and columns. grid-cols-160_1fr makes two columns: one of 160 px, and one that takes the rest.grid-areas- gives a name to each cell. _ separates two cells, and / separates two rows. The cells of one name make one area. area-<name> puts a child in its area, so the order of the markup does not set the place.Your turn
- Add grid-areas-head_head/nav_main to the Grid.
- Add area-head to the header, area-nav to the menu and area-main to the content. The header spans the two columns now.
- Move the content to the top of the markup. The layout does not change.
Preview
1 error
The sandbox needs a browser.