Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE HTML> 
<html lang="en-US"> 
<head> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">   
  <title>Responsive Tiled Photo Gallery</title>
  
  <style type="text/css">
​
  </style> 
</head> 
<body> 
  
  <div class="wrap">
    
    <!-- Define all of the tiles: -->
    <div class="box">
      <div class="boxInner">
        <img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/7.jpg" />
        <div class="titleBox">Butterfly</div>
      </div>
    </div>
    <div class="box">
      <div class="boxInner">
        <img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/1.jpg" />
        <div class="titleBox">An old greenhouse</div>
      </div>
    </div>
    <div class="box">
      <div class="boxInner">
        <img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/2.jpg" />
        <div class="titleBox">Purple wildflowers</div>
      </div>
    </div>
    <div class="box">
      <div class="boxInner">
        <img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/3.jpg" />
        <div class="titleBox">A birdfeeder</div>
      </div>
    </div>
    <div class="box">
      <div class="boxInner">
        <img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/10.jpg" />
        <div class="titleBox">Crocus close-up</div>
      </div>
    </div>
    <div class="box">
      <div class="boxInner">
        <img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/4.jpg" />
        <div class="titleBox">The garden shop</div>
      </div>
    </div>
    <div class="box">
      <div class="boxInner">
        <img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/5.jpg" />
        <div class="titleBox">Spring daffodils</div>
      </div>
    </div>
    <div class="box">
      <div class="boxInner">
        <img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/6.jpg" />
        <div class="titleBox">Iris along the path</div>
      </div>
    </div>
    <div class="box">
      <div class="boxInner">
        <img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/8.jpg" />
        <div class="titleBox">The garden blueprint</div>
      </div>
    </div>
    <div class="box">
      <div class="boxInner">
        <img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/9.jpg" />
        <div class="titleBox">The patio</div>
      </div>
    </div>
    <div class="box">
      <div class="boxInner">
        <img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/11.jpg" />
        <div class="titleBox">Bumble bee collecting nectar</div>
      </div>
    </div>
    <div class="box">
      <div class="boxInner">
        <img src="http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/images/demo/12.jpg" />
        <div class="titleBox">Winding garden path</div>
      </div>
    </div>
    
  </div>
  <!-- /#wrap -->
  
</body> 
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers