Last updated on

The grid-row-align property defines the vertical alignment within the row while grid-column-align defines the horizontal alignment within the column.

.grid {
  grid-row-align: start | end | center | stretch [DEFAULT: stretch];
  grid-column-align: start | end | center | stretch [DEFAULT: stretch];
}

If not specified, the item will occupy the whole cell. If any of the other 3 allowed value is specified, the item will be sized according to its content and aligned as desired (start, end or center).

Note that start doesn’t necessarily mean “left” when dealing with grid-column-align since it depends on the document direction. It means “left” when document is ltr, “right otherwise”. Same goes for end.

Related

Browser Support

Chrome Safari Firefox Opera IE Android iOS
none none none none 10+ none none

Support coming in WebKit and Gecko (currently in some nightly builds).