blasten/grid-layout.html

## grid-layout.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>

  <style>
    .grid {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;

      display: -webkit-flex;
      -webkit-flex-direction: row;
      -webkit-flex-wrap: wrap;
    }

    .grid div {
      height: 100px;
      margin: 10px;
      background: red;
      /* 3 columns*/
      width: calc((100% - 60px) / 3);
    }

     @media (max-width: 800px) {
      /* 2 columns*/
      .grid div {
        width: calc((100% - 40px) / 2);
      }
    }

    @media (max-width: 500px) {
      /* 1 column*/
      .grid div {
        width: 100%;
      }
    }
  </style>
</head>

<body>

  <div class="grid">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
  </div>

</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>JS Bin</title>

	<style>
	.grid {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;

	display: -webkit-flex;
	-webkit-flex-direction: row;
	-webkit-flex-wrap: wrap;
	}

	.grid div {
	height: 100px;
	margin: 10px;
	background: red;
	/* 3 columns*/
	width: calc((100% - 60px) / 3);
	}

	@media (max-width: 800px) {
	/* 2 columns*/
	.grid div {
	width: calc((100% - 40px) / 2);
	}
	}

	@media (max-width: 500px) {
	/* 1 column*/
	.grid div {
	width: 100%;
	}
	}
	</style>
	</head>

	<body>

	<div class="grid">
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	</div>

	</body>
	</html>