CSS Grid & Flexbox Reference Guide

Complete visual property matrix for modern CSS layouts: container rules, item alignments, repeat(), and minmax()

Flexbox Container Properties

Properties applied to the flex parent container (`display: flex;`)

Flex DirectionDefines main axis orientation

flex-direction: row | column | row-reverse | column-reverse;

Justify Content (Main Axis)Aligns items along main axis

justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;

Align Items (Cross Axis)Aligns items across cross axis

align-items: stretch | flex-start | flex-end | center | baseline;

Flex Wrap & Gap

flex-wrap: wrap;
gap: 16px 24px; /* row-gap column-gap */

Flex Grow / Shrink / Basis shorthand

flex: 1 1 0%; /* grow shrink basis */
flex: auto;   /* 1 1 auto */
flex: none;   /* 0 0 auto */

Align Self overrideOverrides parent align-items for one child

align-self: center | flex-end | stretch;

Properties applied to the grid parent (`display: grid;`)

Define columns and rows

grid-template-columns: 200px 1fr 2fr;
grid-template-rows: auto 1fr auto;

Responsive auto-fit grid (No media queries)Standard responsive card grid recipe

grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.5rem;

Named template areas

grid-template-areas:
  "header header"
  "sidebar main"
  "footer footer";

Span multiple columns or rows

grid-column: 1 / 3;    /* start / end */
grid-column: span 2;
grid-row: 2 / span 3;

Assign item to template area

grid-area: header;

Perfect Centering ShorthandCenters child horizontally and vertically in 2 lines

display: grid;
place-items: center;