From the course: Responsive Layout

Unlock the full course today

Join today to access over 23,200 courses taught by industry experts.

Grid alignment overview

Grid alignment overview - HTML Tutorial

From the course: Responsive Layout

Start my 1-month free trial Buy for my team

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…

Contents