From the course: Responsive Layout
Unlock the full course today
Join today to access over 22,400 courses taught by industry experts or purchase this course individually.
Grid template areas
- [Instructor] Grid-template-areas allows you to give individual cells in the grid names, and then place specific elements into those grid cells. We're starting out with three columns. We're gonna use the property grid-template-areas to name some of those grid cells. You don't need to name all of the cells in the grid. We're actually going to name a few of them right now. The cells that you give names to will start at the top left. For each row in the grid, you have a set of quotation marks, then inside it, you have the item name separated by a space. Under the container element, I'm going to add grid-template-areas colon, and then on a new line, quotation mark, I'm going to name them apple, space, orange, closing quotation mark, and save. Going over here to refresh, you can see because I've turned on display area names in the dev tools, it shows the name of each of those cells directly over them. We're going to go back and add names on a few more rows. On the next row, I'm going to…
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
-
-
-
-