bakerface/grid.html

## grid.html
<html>
<head>
<style>

body {
  margin: 0;
}

*,
*:before,
*:after {
  box-sizing: border-box;
}

.clearfix {
  *zoom: 1;
}

.clearfix:before,
.clearfix:after {
  content: " ";
  display: table;
}

.clearfix:after {
  clear: both;
}

.left {
  float: left;
  _display: inline;
}

.w-100 {
  width: 100%;
}

.w-50 {
  width: 50%;
}

.w-25 {
  width: 25%;
}

@media only screen and (min-width: 30em) {
  .w-100-ns {
    width: 100%;
  }

  .w-50-ns {
    width: 50%;
  }

  .w-25-ns {
    width: 25%;
  }

  .w-10-ns {
    width: 10%;
  }
}


@media only screen and (min-width: 30em) and (max-width: 60em) {
  .w-100-sm {
    width: 100%;
  }

  .w-50-sm {
    width: 50%;
  }

  .w-25-sm {
    width: 25%;
  }

  .w-10-sm {
    width: 10%;
  }
}

@media only screen and (min-width: 60em) and (max-width: 90em) {
  .w-100-md {
    width: 100%;
  }

  .w-50-md {
    width: 50%;
  }

  .w-25-md {
    width: 25%;
  }

  .w-10-md {
    width: 10%;
  }
}

@media only screen and (min-width: 90em) and (max-width: 120em) {
  .w-100-lg {
    width: 100%;
  }

  .w-50-lg {
    width: 50%;
  }

  .w-25-lg {
    width: 25%;
  }

  .w-10-lg {
    width: 10%;
  }
}

@media only screen and (min-width: 120em) {
  .w-100-hd {
    width: 100%;
  }

  .w-50-hd {
    width: 50%;
  }

  .w-25-hd {
    width: 25%;
  }

  .w-10-hd {
    width: 10%;
  }
}

/* custom styling to make the cells visible */
.left {
  height: 32px;
  border: 4px solid #fff;
  background-color: #ddd;
}

</style>
</head>
<body>

<div class="clearfix">
  <div class="left w-100 w-50-sm w-25-md w-10-lg"></div>
  <div class="left w-100 w-50-sm w-25-md w-10-lg"></div>
  <div class="left w-100 w-50-sm w-25-md w-10-lg"></div>
  <div class="left w-100 w-50-sm w-25-md w-10-lg"></div>
  <div class="left w-100 w-50-sm w-25-md w-10-lg"></div>
  <div class="left w-100 w-50-sm w-25-md w-10-lg"></div>
  <div class="left w-100 w-50-sm w-25-md w-10-lg"></div>
  <div class="left w-100 w-50-sm w-25-md w-10-lg"></div>
  <div class="left w-100 w-50-sm w-25-md w-10-lg"></div>
  <div class="left w-100 w-50-sm w-25-md w-10-lg"></div>
</div>

</body>
</html>
	<html>
	<head>
	<style>

	body {
	margin: 0;
	}

	*,
	*:before,
	*:after {
	box-sizing: border-box;
	}

	.clearfix {
	*zoom: 1;
	}

	.clearfix:before,
	.clearfix:after {
	content: " ";
	display: table;
	}

	.clearfix:after {
	clear: both;
	}

	.left {
	float: left;
	_display: inline;
	}

	.w-100 {
	width: 100%;
	}

	.w-50 {
	width: 50%;
	}

	.w-25 {
	width: 25%;
	}

	@media only screen and (min-width: 30em) {
	.w-100-ns {
	width: 100%;
	}

	.w-50-ns {
	width: 50%;
	}

	.w-25-ns {
	width: 25%;
	}

	.w-10-ns {
	width: 10%;
	}
	}


	@media only screen and (min-width: 30em) and (max-width: 60em) {
	.w-100-sm {
	width: 100%;
	}

	.w-50-sm {
	width: 50%;
	}

	.w-25-sm {
	width: 25%;
	}

	.w-10-sm {
	width: 10%;
	}
	}

	@media only screen and (min-width: 60em) and (max-width: 90em) {
	.w-100-md {
	width: 100%;
	}

	.w-50-md {
	width: 50%;
	}

	.w-25-md {
	width: 25%;
	}

	.w-10-md {
	width: 10%;
	}
	}

	@media only screen and (min-width: 90em) and (max-width: 120em) {
	.w-100-lg {
	width: 100%;
	}

	.w-50-lg {
	width: 50%;
	}

	.w-25-lg {
	width: 25%;
	}

	.w-10-lg {
	width: 10%;
	}
	}

	@media only screen and (min-width: 120em) {
	.w-100-hd {
	width: 100%;
	}

	.w-50-hd {
	width: 50%;
	}

	.w-25-hd {
	width: 25%;
	}

	.w-10-hd {
	width: 10%;
	}
	}

	/* custom styling to make the cells visible */
	.left {
	height: 32px;
	border: 4px solid #fff;
	background-color: #ddd;
	}

	</style>
	</head>
	<body>

	<div class="clearfix">
	<div class="left w-100 w-50-sm w-25-md w-10-lg"></div>
	<div class="left w-100 w-50-sm w-25-md w-10-lg"></div>
	<div class="left w-100 w-50-sm w-25-md w-10-lg"></div>
	<div class="left w-100 w-50-sm w-25-md w-10-lg"></div>
	<div class="left w-100 w-50-sm w-25-md w-10-lg"></div>
	<div class="left w-100 w-50-sm w-25-md w-10-lg"></div>
	<div class="left w-100 w-50-sm w-25-md w-10-lg"></div>
	<div class="left w-100 w-50-sm w-25-md w-10-lg"></div>
	<div class="left w-100 w-50-sm w-25-md w-10-lg"></div>
	<div class="left w-100 w-50-sm w-25-md w-10-lg"></div>
	</div>

	</body>
	</html>