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.
Grid alignment overview - HTML Tutorial
From the course: Responsive Layout
Grid alignment overview
- [Instructor] There are six different properties in Grid that are used to align and position Grid items. This is just an overview of the difference between the six properties. We'll look at their possible values over the next few videos. First, there's justify-content. This positions the columns horizontally within the Grid container. It is applied to the container element, as are the following three properties. Next, there's align-content. This positions rows vertically within the Grid container. Note that this only applies if the Grid container has been given height that leaves some empty space. If you don't give the Grid container a height, it will only be as tall as it needs to be to contain the rows so there won't be any space to position them. Next is justify-items. After the browser has placed the columns, this positions the Grid items horizontally within the column. Align-items is next. This positions the Grid items vertically within each row. Justify-self is applied 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
-
(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
-
-
-
-