grid-row-align / grid-column-align

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

• grid-row / grid-column
• grid-row-span / grid-column-span
• grid-rows / grid-columns

Browser Support

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