From the course: Responsive Layout
Unlock the full course today
Join today to access over 24,000 courses taught by industry experts.
Placing grid items - HTML Tutorial
From the course: Responsive Layout
Placing grid items
- [Instructor] Next, we're going to look at how to move items around in the grid. They don't have to be displayed in the order they are in the HTML and they don't always have to take up only one cell in the grid. In the code, you can see that I've already defined three columns and two rows. We can place grid items directly into grid cells, but we need a way to specify the location we want. This is done through the grid line numbers. From the dev tools, you can see the line numbers. The vertical lines, you'll see the line numbers at the top, one, two, three, four. And the horizontal lines numbered on the left are one, two, three, four, five. You can also see there's negative numbers on the bottom and right side. These can be used to place grid items as well and they're handy if you want to count from the last grid line, but you don't know its number or the number may vary. So down on the bottom, we see negative one, negative two, negative three, and negative four. Now, on the right, we…
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
-
(Locked)
Defining rows and columns3m 55s
-
(Locked)
Grid gap1m 52s
-
(Locked)
Sizing rows and columns5m 52s
-
(Locked)
Placing grid items5m 51s
-
(Locked)
Grid alignment overview1m 13s
-
(Locked)
Aligning tracks3m 46s
-
(Locked)
Aligning grid items within tracks2m
-
(Locked)
Aligning individual grid items1m 47s
-
(Locked)
Variable columns4m 45s
-
(Locked)
Grid template areas4m 12s
-
(Locked)
Naming grid lines2m 47s
-
(Locked)
Ordering grid items1m 16s
-
(Locked)
Grid flow and implicit tracks3m 55s
-
(Locked)
Challenge: The rainbow box1m 9s
-
(Locked)
Solution: The rainbow box6m 42s
-
-
-
-