# Sticky Footer & Card Layouts — CSS

Source: https://www.geekswithgeeks.com/en/css/css-layout-patterns

> 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.

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

main {
  flex: 1;
}
```

## A card component

The classic bordered, padded, shadowed content box.

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

## Cards + Grid = a gallery

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