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 tak…


This content originally appeared on this is rachelandrew.co.uk and was authored by this is rachelandrew.co.uk

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!


This content originally appeared on this is rachelandrew.co.uk and was authored by this is rachelandrew.co.uk


Print Share Comment Cite Upload Translate Updates
APA

this is rachelandrew.co.uk | Sciencx (2015-09-02T17:03:00+00:00) CSS Grid and The Box Alignment Module. Retrieved from https://www.scien.cx/2015/09/02/css-grid-and-the-box-alignment-module/

MLA
" » CSS Grid and The Box Alignment Module." this is rachelandrew.co.uk | Sciencx - Wednesday September 2, 2015, https://www.scien.cx/2015/09/02/css-grid-and-the-box-alignment-module/
HARVARD
this is rachelandrew.co.uk | Sciencx Wednesday September 2, 2015 » CSS Grid and The Box Alignment Module., viewed ,<https://www.scien.cx/2015/09/02/css-grid-and-the-box-alignment-module/>
VANCOUVER
this is rachelandrew.co.uk | Sciencx - » CSS Grid and The Box Alignment Module. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2015/09/02/css-grid-and-the-box-alignment-module/
CHICAGO
" » CSS Grid and The Box Alignment Module." this is rachelandrew.co.uk | Sciencx - Accessed . https://www.scien.cx/2015/09/02/css-grid-and-the-box-alignment-module/
IEEE
" » CSS Grid and The Box Alignment Module." this is rachelandrew.co.uk | Sciencx [Online]. Available: https://www.scien.cx/2015/09/02/css-grid-and-the-box-alignment-module/. [Accessed: ]
rf:citation
» CSS Grid and The Box Alignment Module | this is rachelandrew.co.uk | Sciencx | https://www.scien.cx/2015/09/02/css-grid-and-the-box-alignment-module/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts