Demos Grid system

A very exciting yacht race. — This uses a mobile first approach with 5 breakpoint. It only loads images as each breakpoint matches.

HTML


<img src="img/yacht_race@fallback.jpg"
    srcset="
      yacht_race@mobile.jpg 320w,
      yacht_race@wide-mobile.jpg 480w,
      yacht_race@tablet.jpg 768w,
      yacht_race@desktop.jpg 1024w,
      yacht_race@hires.jpg 1280w"
    sizes="90vw"
    alt="A very exciting yacht race.">

Credits

Author: Andreas Klein / @ixisio