CSS Layout Reference

Reference for CSS layout — flexbox, grid, positioning, and responsive patterns.

Flexbox

Flexbox is for one-dimensional layouts — either a row or a column.

Container Properties

Property	Values	Description
`display`	`flex`	Enables flex layout
`flex-direction`	`row`, `column`, `row-reverse`, `column-reverse`	Main axis direction
`justify-content`	`flex-start`, `flex-end`, `center`, `space-between`, `space-around`, `space-evenly`	Alignment on main axis
`align-items`	`stretch`, `flex-start`, `flex-end`, `center`, `baseline`	Alignment on cross axis
`flex-wrap`	`nowrap`, `wrap`, `wrap-reverse`	Whether items wrap
`gap`	`<length>`	Space between items
`align-content`	Same as `justify-content`	Cross-axis alignment of wrapped rows

Item Properties

Property	Description
`flex: 1`	Grow to fill available space (`flex: 1 1 0%`)
`flex: 0 0 200px`	Fixed width, won’t grow or shrink
`flex: auto`	`flex: 1 1 auto` — grow/shrink based on content
`align-self`	Override `align-items` for this item
`order`	Change visual order (default `0`)

Common Patterns

/* Center horizontally and vertically */
.center-both {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Sticky footer */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
main {
  flex: 1;
}

/* Equal-width columns */
.columns {
  display: flex;
  gap: 16px;
}
.columns > * {
  flex: 1;
}

Grid

Grid is for two-dimensional layouts — rows and columns at the same time.

Container Properties

Property	Description
`display: grid`	Enables grid layout
`grid-template-columns`	Define column tracks (e.g. `repeat(3, 1fr)`)
`grid-template-rows`	Define row tracks
`gap`	Shorthand for `row-gap` and `column-gap`
`grid-template-areas`	Named areas for layout
`grid-auto-rows`	Implicit row sizing
`grid-auto-columns`	Implicit column sizing
`grid-auto-flow`	`row` (default) or `column` or `dense`

Item Properties

Property	Description
`grid-column`	`1 / 3` — span from line 1 to 3
`grid-row`	`1 / 4` — span from line 1 to 4
`grid-area`	Named area or shorthand for row-start / column-start / row-end / column-end
`place-self`	Shorthand for `align-self` and `justify-self`

Common Patterns

/* Responsive auto-fit grid */
.auto-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}

/* Holy grail layout */
.layout {
  display: grid;
  grid-template-columns: 240px 1fr 240px;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header header"
    "sidebar content aside"
    "footer footer footer";
  min-height: 100vh;
}
.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.aside   { grid-area: aside; }
.footer  { grid-area: footer; }

Positioning

Value	Behavior
`static`	Default — element flows normally
`relative`	Offset from normal position; creates a positioning context for children
`absolute`	Positioned relative to nearest positioned ancestor
`fixed`	Positioned relative to the viewport
`sticky`	Switches between `relative` and `fixed` based on scroll position

/* Sticky header */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
}

/* Overlay centered on screen */
.modal {
  position: fixed;
  inset: 0;              /* top, right, bottom, left all 0 */
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.5);
}

/* Tooltip positioned relative to parent */
.wrapper {
  position: relative;
}
.tooltip {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
}

Responsive Patterns

/* Mobile-first media queries */
.card {
  padding: 16px;
}
@media (min-width: 768px) {
  .card { padding: 24px; }
}
@media (min-width: 1024px) {
  .card { padding: 32px; }
}

/* Container queries */
.card-container {
  container-type: inline-size;
}
@container (min-width: 400px) {
  .card {
    flex-direction: row;
  }
}

/* Fluid typography */
h1 {
  font-size: clamp(1.5rem, 2vw + 1rem, 3rem);
}

/* Fluid spacing */
.stack {
  gap: clamp(8px, 2vw, 24px);
}