Flex + Grid + Video + Map + Audio(Demo)

Files: index.html + style.css (+optional music.mp3)

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.

Quick Notes

  • Flex one direction(row/column)
  • Grid one rows _ columns
  • iframeYouTube + Google Map
  • audio