## 1) Flexbox Demo (1D Layout)

Flex is best for arranging items in one direction(row OR column).

Card 1
Card 2(bigger)
Card 3

## 2) CSS Grid Demo (2D Layout)

Grid is best for layouts with rows + columns.

Box 1
Box 2(spans 2 columns)
Box 3
Box 4
Box 5
Box 6

## 3) Media Demo (YouTube + Map + Audio)

Use `<iframe>` for video/map and `<audio>` for audio.

### YouTube Video Embed

Replace the video ID after`/embed/`.

Link: Watch on YouTube

### Google Map Embed

Google Maps → Share → Embed a map → copy the iframe.

Tip: Use the real embed link from Google Maps so it works.

### Audio Player

Put `music.mp3` in the same folder as `index.html`.

Your browser does not support the audio element.

### Quick Notes

- Flexone direction(row/column)
- Gridone rows _ columns
- iframeYouTube + Google Map
- audio