Basic Grid
The grid cells below do not specify any widths, they just naturally space themselves equally and expand to fit the entire row. They’re also equal height by default.
See the Pen oxOegN by Abdullah Yahya (@javanigus) on CodePen.
Individual Sizing
When equal widths aren’t what you want, you can add sizing classes to individual cells. Cells without sizing classes simply divide up the remaining space as normal.
See the Pen QNPMaB by Abdullah Yahya (@javanigus) on CodePen.
Top-aligned Grid Cells
See the Pen WwWEyK by Abdullah Yahya (@javanigus) on CodePen.
Vertically-centered Grid Cells
See the Pen vGMJax by Abdullah Yahya (@javanigus) on CodePen.
Bottom-aligned Grid Cells
See the Pen bpJrjM by Abdullah Yahya (@javanigus) on CodePen.
Mixed Alignment
See the Pen MyRvBx by Abdullah Yahya (@javanigus) on CodePen.
For more info, visit https://css-tricks.com/snippets/css/a-guide-to-flexbox/