CSS Fundamentals Selectors CSS Box Model Layout CSS Flexbox Layout CSS Grid Layout System CSS Typography Text Styling CSS Colors Backgrounds CSS Positioning Methods CSS Animations Transitions CSS Responsive Design CSS Custom Properties Variables CSS Transforms 3D Effects CSS Filters Effects CSS Pseudo Elements Content CSS Scroll Behavior Snap CSS Shapes Clip Path CSS Modern Layout Techniques CSS Accessibility Focus States CSS Dark Mode Theming CSS Performance Optimization CSS Utility Classes System

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

Previous Lesson Next Lesson