Layout recipes

Patterns that solve the most frequent everyday problems. Pick a recipe, copy it and adapt it to your project.

center: centers any element on both axes with two lines of code.
holy grail: header, navigation, content, sidebar and footer in a single grid.
sidebar: fixed-width sidebar and content that takes the rest.
sticky footer: the footer stays at the bottom even with little content.
card grid: responsive cards without media queries.

Example

Select a recipe. HTML and CSS update together, and you can keep editing them to adapt it.

ResultLiveContainer width100%

html

<div class="container">
  <div class="child">centered</div>
</div>

<div class="container">
  <div class="child">centered</div>
</div>

css

.container {
  border: 1px solid #2b7de0;
  display: grid;
  height: 16rem;
  place-items: center;
  padding: 0.5rem;
}

.child {
  padding: 1rem;
}

.container {
  border: 1px solid #2b7de0;
  display: grid;
  height: 16rem;
  place-items: center;
  padding: 0.5rem;
}

.child {
  padding: 1rem;
}

Edit the code or use the selectors: the result updates instantly.