CSS Challenge 2 - Checkerboard

HTML & CSS
21

In truth you would most likely use media queries and adjust the size when needed so it fits in the viewport.

You could adapt Michaels solution above to scale with the window quite easily though.


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
html,body{height:100%;margin:0;padding:0;}
body>div {
  width: 60%; 
  height:0;
		padding-top:60%; 
  margin: 0 auto;
  border: .5em solid #fc0;
		-moz-box-sizing:border-box;
		-webkit-box-sizing:border-box;
		box-sizing:border-box;
		position:relative;
}
body>div>div{position:absolute;top:0;left:0;right:0;bottom:0} 
body>div>div>div {height:12.5% }
 
div>div>div>div { height:100%; width:12.5%; display: inline-block;}
div>div>div:nth-child(odd)>div:nth-child(odd), div>div>div:nth-child(even)>div:nth-child(even) {background: #f00 }
div>div>div:nth-child(odd)>div:nth-child(even), div>div>div:nth-child(even)>div:nth-child(odd) {background: #000 }

</style>
</head>

<body>
<div><div>
		<div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
		<div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
		<div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
		<div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
		<div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
		<div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
		<div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
		<div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
	</div></div>
</body>
</html>