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

Files: index.html+ style.css + 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 videomap and <audio> for audio.

Youtube Video Embed

Replace the video 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.mp3in the same folder as index.html.

Quick Notes

  • Flex= one direction (row/column)
  • Grid= rows + columns
  • iframe= Youtube + Google Map
  • audio= mp3/ogg player