Lesson 28 / 28

Sticky Footer & Card Layouts

Two layouts you'll build in almost every real project.

Sticky footer

The footer sits at the bottom even when the page content is short — flex: 1 on main pushes it down.

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

main {
  flex: 1;
}

The classic bordered, padded, shadowed content box.

.card {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

Drop .card elements into a repeat(auto-fit, minmax(...)) grid to get a fully responsive card gallery with almost no extra CSS.