responsive stack

dabblet.css

/**
 * responsive stack
 */

* { box-sizing: border-box }

html, body {margin: 0; padding: 0 }

ul { padding: 0; list-style: none }

li
{
	width: 12em;
	height: 12em;
	margin: 2em auto;
	border: 1em solid red;
	border-radius: 100%;
	background: yellow;
}

@media (min-width: 30em)
{
	ul { width: 30em; margin: auto; padding: 1.5em 0 }
	
	li { float: left; margin: 0.25em 1.5em }
	
	li:nth-child(3n) { margin-left: 9em }
}

@media (min-width: 45em)
{
	ul { width: 45em }
	
	li:nth-child(3n) { margin-left: 1.5em }
	
	li:nth-child(5n+4) { margin-left: 9em }
}

dabblet.html

<ul><li><li><li><li><li><li><li><li><ul/>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}