Grid Alignment (Box Alignment)

This demo is already complete. Finished files at the bottom of the page.

Alignment of grid items works very similarly to the way it works in flexbox. Alignment and justification controls how different sized items position themselves when there is extra space in their rows and columns, or the grid itself.

All of the examples on this page assume that the writing-mode and direction are normal for US English. Don't worry about special circumstances outside of these conditions for now. Just know that we use logical properties like start and end instead of physical properties like left and right, because our starting point may not always be the top left corner!

Justify vs Align, Items vs Content

There are no less than six different properties for alignment of grid items. Here they are, linked to their entries on the Mozilla Developer Network, where you can look up what values each one accepts:

Rather than exhaustively walking through every possible property and value, let's focus on what the terminology means. It'll be much easier to remember which setting to use once you're familiar with this.

grid items
grid content

grid container

The grid items, or grid areas, are the actual elements that are being placed on the grid. Depending on their neighbors, it's possible that some of your grid areas will be smaller than the columns and rows they're placed inside of.

Properties with -items refer to the grid items or areas being placed on the grid.

The grid content, or simply "the grid", is the set of rows and columns that either you define in your template, or that the grid algorithm creates while placing your elements. Since we can define our grid template in many different ways, it's sometimes possible for the grid itself to be smaller than its grid container.

Properties with -content refer to the grid rows and columns—the grid template.

The grid container is the parent element that has display: grid.

Properties with justify work along the inline, or row axis. It's a lot like justification of text.

Properties with align work along the block, or column axis. These properties control vertical alignment.

Examples

Here are a few examples. These code snippets have additional properties removed (grid template, etc).

Normal

.grid {
    display: grid;
}

By default, items (in green) stretch in both directions to cover the whole column and row they're placed in, regardless of how much content there is. This is how we end up with equal height columns in a multi-column layout.

Align-items: end

.grid {
    display: grid;
    align-items: end;
}

Items that are shorter than the tallest item in their row sit at the bottom of the row.

Align-content: end

.grid {
    display: grid;
    align-content: end;
}

If the grid template doesn't fill the grid container, the entire grid sits at the bottom of the container.

Centered items

.grid {
    display: grid;
    align-items: center;
    justify-items: center;
}

Justify-content: space-between

.grid {
    display: grid;
    justify-content: space-between;
}

The values space-around, space-between, and space-evenly work to distribute the columns and rows. When this happens, grid areas that span multiple columns and rows will also grow and fill any extra space between rows and columns.

Align-self

.grid {
    display: grid;
    align-items: start;
}

.special-item {
	align-self: end;
}

If you just want to change the alignment of a single item, and not the entire row or column, you can use justify-self, align-self, or auto margins.

In this example, one item sits at the bottom of its row while the others remain at the top.