From the course: Responsive Layout
Unlock the full course today
Join today to access over 22,600 courses taught by industry experts or purchase this course individually.
Ordering grid items
- [Instructor] The order property is used to change the order of the grid items within the grid container. Here we just have six grid items that are displayed in the order they are in the HTML. We're going to use the order property to change the order of the items. So to start out in the HTML I'm going to take item five and give it an order of one, so order:1, save, and refresh. And that puts item five all the way down at the end. The reason for that is that the default order value for every element is zero. So all of the other grid items are zero and item five is one, so one is going to be last after all the zeros. Going back to the code, I'm going to add another one. For item two, I'm going to give it an order of four, save, and refresh. Now item two has a order of a higher value than item five so it comes last. We can also use negative numbers. So back in the code for item four I'm going to give it an order of negative one, save, and refresh. So since negative one is a lower value…
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
-
-
-
-