Align, justify, and place(-self)

You can control how the children size and position themselves within a grid-area by using several commands. Affect all items by adding the command (postfixed like *-items) to the parent. Or affect only specific children by adding the command to the child directly (postfixed like *-self).

• align-*: aligns across the flow (usually the flow is rows, so align does vertical alignment)
• justify-*: aligns with the flow (like text-align if flow is rows)
• place-*: shorthand for justify and align (not supported in older browsers)

In a surprise twist, align-items on Grid isn’t supported by IE, but using align-self will prefix correctly. So, you might see this work-around:

.grid > * {  
  align-self: start;  
}  

See the Pen Grid align, justify, and place. by Dave Cross (@davecross) on CodePen.