Back to Lessons

CSS Modern Layout Techniques

April 5, 2026

Advanced Layout Patterns

Masonry, sticky footers, perfect centering.

Sticky Footer

html, body { height: 100%; }
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
main { flex: 1; }
footer { flex-shrink: 0; }

Masonry Layout

.masonry {
  columns: 12;
  column-gap: 1rem;
  column-fill: auto;
}

.card {
  break-inside: avoid;
  margin-bottom: 1rem;
}

Centering Methods

  • Flexbox: margin: auto (block)
  • Grid: place-items: center
  • Absolute + transform