How to Order and Align Items in Grid Layout

In this tutorial, you will learn how to control the order in which items are placed using the Grid Layout module. After that, we will discuss how to control the alignment of different items in the grid.

In the past, we covered a few important Grid-related topics. We began by learning about different ways of placing elements in a Grid Layout and then moved on to the steps followed by the Grid auto-placement algorithm as it automatically places different items.

If you'd like to follow along with the demos in this article, please remember to enable Grid Layout support in a major modern browser of your choice. For more details on how to do so, visit the Browser Support section in Introducing the CSS Grid Layout.

How the Order Property Works in Grid Layout

The order property can be used to specify the order in which different items should be placed inside a grid. By default, the items are placed in the order in which they appear in the DOM. For example, if item A is above item B in the actual source document, it will also be placed in the grid before item B. Depending on your project, this may or may not be the desired behavior.

The order property can be very useful, especially when there are lots of items or the items are being added dynamically. In such cases, if you want an item to be placed always at the end of the grid, you can do so easily using the order property.

Items with the lowest order value are placed first in the grid. Items with higher values are placed later. Items which have the same order value will be placed in the order in which they appear in the source document.

Let's take a look at an example.

This is our markup:

[code language="html"]
<div class="container">
<div class="item a">A</div>
<div class="item b">B</div>
<div class="item c">C</div>
<div class="item d">D</div>
<div class="item e">E</div>
<div class="item f">F</div>
<div class="item g">G</div>
<div class="item h">H</div>
<div class="item i">I</div>
<div class="item j">J</div>
</div>
[/code]

Here is the CSS for placing the grid items:

[code language="css"]
.c {
grid-row-start: 1;
grid-row-end: 2;
}

.e {
grid-row-start: 1;
grid-row-end: 3;
}

.b, .j {
order: 2;
}

.a, .i {
order: 3;
}
[/code]

If you recall the steps from the auto-placement algorithm tutorial, you know that the algorithm will place the items with an explicitly specified row position before placing items with no definite position. So, even though item D, without a definite row or column position, comes before item E in the actual document, it will still be placed after item E (which has a definite row position: grid-row-start: 1 and grid-row-end: 3).

Among the items with no definite position, items with the lowest order value will be placed first. That's why items D, F, G and H are placed before items A and B. B and J have the same order value, therefore they are placed in the same order in which they appear in the document. Please note that both B and J are still placed before placing A and I because they have a lower order value.

Continue reading %How to Order and Align Items in Grid Layout%

by Nitish Kumar via SitePoint