Demos Grid system

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

HTML

<picture width="100%" height="100%">
<!-- Mobile Layout -->
<source media="(max-width: 30em)" src="img/">
<!-- Wide Mobile Layout -->
<source media="(min-width: 30em) and (max-width: 48em)" src="img/">
<!-- Tablet Layout -->
<source media="(min-width: 48em) and (max-width: 60em)" src="img/">
<!-- start: Stationary Devices -->
<source media="(min-width: 60em) and (max-width: 80em)" src="img/">
<!-- Source intended for: Notebooks and normal Desktop Layouts -->
<source media="(min-width: 80em)" src="img/">
<!-- fallback img if picture is not supported -->
<img src="img/" alt="A very exciting yacht race.">
<!-- alternate text -->
<p>A very exciting yacht race.</p>
</picture>