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.
Naming grid lines
- [Instructor] You can name the lines that are in-between the grid cells and then use those line names to position your grid items. You do that when using grid template columns or grid template rows to define the columns or the rows by putting the lines names in square brackets in-between the columns or rows. For example, in my code over here, I already have two columns set up. And I'm gonna start out by adding names right there in that declaration, which is on line 12. Before the first column, I'm gonna do square bracket, start, closing square bracket, and then a space to name the first line. Between those two columns, square bracket, middle, space, and then after the last one, before our semicolon, have square bracket and end. Well unfortunately, unlike grid template areas, you can't see your line names using DevTools. There's really no way to know where your line names are ending up. You just have to be extra careful to keep track of what you're doing. You don't have to name every…
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
-
-
-
-