# CSS Layout — Flexbox and Grid Made Simple

Source: https://skills101.in/learn/web-development/css-flexbox-and-grid — Skills101 free tutorial (Web Development). Updated 2026-11-09.

Layout means placing boxes on the page: navbars, card rows, sidebars. Modern CSS has two tools that handle almost everything: **Flexbox** and **Grid**.

## 1. Flexbox: one direction at a time

![Three items A, B, C in a flex container; the main axis runs left to right (flex-direction: row) and the cross axis top to bottom. justify-content works on the main axis, align-items on the cross axis](https://skills101.in/learn-img/web-development/flexbox.svg)

```css
.navbar {
  display: flex;
  justify-content: space-between;  /* main axis: spread out */
  align-items: center;             /* cross axis: vertically centred */
  gap: 16px;
}
```

| Property (on the container) | Does |
|---|---|
| `flex-direction` | `row` (default) or `column` |
| `justify-content` | main axis: `flex-start`, `center`, `space-between`, `space-around` |
| `align-items` | cross axis: `stretch` (default), `center`, `flex-start` |
| `flex-wrap: wrap` | let items move to the next line |
| `gap` | space between items |

On the **items**: `flex: 1` makes an item grow to fill the space; `flex: 0 0 200px` fixes it at 200px.

### The famous "centre a div"

```css
.center {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}
```

## 2. Grid: rows and columns together

![A grid with a header across the top, a sidebar and a main area in the middle, and a footer across the bottom](https://skills101.in/learn-img/web-development/grid.svg)

```css
.page {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  gap: 12px;
  min-height: 100vh;
}
.page > header  { grid-area: header; }
.page > aside   { grid-area: sidebar; }
.page > main    { grid-area: main; }
.page > footer  { grid-area: footer; }
```

- `fr` = a **fraction** of the free space (`1fr 2fr` → one third / two thirds).
- `repeat(3, 1fr)` = three equal columns.

### A responsive card grid in one line

```css
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}
```

Cards are at least 220px wide, and as many fit per row as the screen allows — no media queries needed.

## 3. Flexbox or Grid?

| Use Flexbox for | Use Grid for |
|---|---|
| one row **or** one column | rows **and** columns |
| navbars, button groups, centring | page layouts, card galleries, dashboards |
| content decides the size | the layout decides the size |

They work together: a Grid page layout with Flexbox inside each card.

## 4. position (for special cases)

| Value | Behaviour |
|---|---|
| `static` | normal flow (default) |
| `relative` | nudged from its normal place; becomes the reference for absolute children |
| `absolute` | placed relative to the nearest positioned ancestor; removed from the flow |
| `fixed` | stuck to the screen (a floating WhatsApp button) |
| `sticky` | normal until you scroll past, then sticks (sticky headers) |

## Common mistakes

- Using `position: absolute` for whole layouts — it breaks on other screen sizes.
- Applying flex properties to the items instead of the container (or vice versa).
- Forgetting `flex-wrap: wrap`, so items squash on small screens.

## Quick recap

- Flexbox: one axis; justify-content (main), align-items (cross), gap, wrap.
- Grid: rows and columns; fr units, repeat, minmax, template areas.
- Flex for components, Grid for page structure.
- position: relative/absolute/fixed/sticky for special cases.


Practice quiz and free certificate: https://skills101.in/learn/web-development/css-flexbox-and-grid