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.
Aligning grid items within tracks - HTML Tutorial
From the course: Responsive Layout
Aligning grid items within tracks
- [Instructor] You can also align grid items within each row or column. This is done using the justify-items property. The default for this property which is stretch, with this each time takes up the full space of the cell it is in. So, in the code on line 13, I'm gonna add justify-items: stretch and save, refresh and nothing happens because that was already the default. So you can use start, end or center to align the items within the column. Changing this to start, save and refresh, start aligns them to be flush with the starting edge of the cell which is left in this case. So, you can see the width of the columns has not changed or the location of the columns has not changed, just the grid item within each cell has changed and put them at the start of that cell. Changing this to end and then refresh, they go to the ending edge of the cell. And then center and refresh, and they go to the center. We also have align-items which aligns grid items vertically, so it does essentially the…
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
-
-
-
-