Common Layout Patterns: Centering and More

8 min read

Practical Recipes Every CSS Developer Needs

Certain layout problems come up in nearly every project. Here are the canonical modern solutions using Flexbox and Grid.

Centering Anything

css

/* Method 1 — Flexbox center (most versatile) */
.center-flex {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

/* Method 2 — Grid center */
.center-grid {
  display: grid;
  place-items: center;
  min-height: 100vh;
}

/* Method 3 — Absolute + transform (for overlays) */
.center-absolute {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Sticky Footer

css

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1; /* main grows to fill space, pushing footer down */
}

Responsive Card Grid

css

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}

.card {
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: var(--radius-lg, 16px);
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 200ms ease, transform 200ms ease;
}

.card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
}

The repeat(auto-fill, minmax(min, 1fr)) pattern is one of the most powerful in CSS Grid. It creates a responsive multi-column layout with no media queries at all. Projects built through CPCODELAB frequently use this pattern for course card grids.

Ready to test yourself?

Practice CSS— quiz & coding exercises