CSS Grid and The Box Alignment Module

Having good control over alignment and justification is one of the major benefits of modern layout methods such as Flexbox and CSS Grid Layout. These alignment properties are specified in the CSS Box Alignment Level 3 Module. In this post I’m taking a quick look at how the following properties from this spec work with Grid Layout.

  • align-items
  • justify-items
  • align-self
  • justify-self

If you want to see the below examples in action you’ll need to use Chrome Canary. In all of the linked examples I have used a background image that displays the grid in use, so you can see how the items are laid out.

The default behaviour of grid items

Grid items will stretch to fill the grid area unless margins are set to auto or you have used alignment properties. So if you have used grid to create a two column layout and there is more content in column A than column B, both columns will stretch to the same height, as you can see in this example.

Aligning all of the grid items

If you want to set alignment values on every child element of your grid container you can use the align-items property with a value of stretch, center, start or end. In the linked example the four left hand grid areas each cover 3 grid tracks, but I have used a value of center for align-items. This has centered the content inside the grid area.

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

align-items example

Justifying all of the grid items

The justify-items property takes a value of stretch, center, start or end and in the following example I have set this to center.

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

justify-items example

Aligning a single grid item

You can set alignment properties on single grid items with the align-self property. This acts just like align-items but is aplied directly to the rules for the grid item you wish to change the alignment on. In the following example I have set various different values of align-self on my boxes.

.b {
  grid-column: 5 / 8;
  grid-row: 1 / 4;
  align-self: end;
}

align-self example

Justifying a single grid item

You can also use the justify-self property. This acts just like justify-items but is aplied directly to the rules for the grid item. In the following example I have set various different values of justify-self on my boxes.

.b {
  grid-column: 5 / 8;
  grid-row: 1 / 4;
  justify-self: end;
}

justify-self example

There is a nice little demo over on the Igalia examples site where you can play with the properties (again, needs Chrome Canary).

Box alignment – not just for Grid and Flexbox

The Box Alignment Module is well worth taking a look at. These properties do not just apply to Grid and Flexbox. In the future they will also apply to Block layout, meaning that we can easily align and justify our content no matter which layout method we choose to use for a site. The CSS Working Group would love to have your feedback on this module so if vertical centering is something you care about, and you see a problem let them know!

2 Comments

Clay Shannon September 3, 2015 Reply

So is this meant as a competitor of/replacedment for bootstrap?

Brian September 8, 2015 Reply

Hello Rachel! I really love all of the amazing things that you do! I’ve been especially excited about your “CSS Layout News” newsletter. It’s loaded with great info and is an amazing tool to stay current on things. I have been a little confused lately on the difference in roles between flexbox and grid layout. So, I figured I’d ask the layout expert, do you know of any articles, tutorials, or info that clearly illustrates these differences?

Thanks!

Leave a Reply