Skip to content

Instantly share code, notes, and snippets.

@jeremypage

jeremypage/responsive-square-tiles.html

Created November 14, 2018 21:42
Show Gist options
  • Save jeremypage/4f5a6bd9b76919e2c5282353a3493b46 to your computer and use it in GitHub Desktop.
Save jeremypage/4f5a6bd9b76919e2c5282353a3493b46 to your computer and use it in GitHub Desktop.
Download ZIP
HTML/CSS: Responsive square tiles with text overlay
Raw
responsive-square-tiles.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!-- Enable responsive view on mobile devices -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Responsive tiled photo gallery in pure CSS</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
background: #EEE;
font-family:Optima;
}
.wrap {
overflow: hidden;
margin: 10px;
}
.box {
float: left;
position: relative;
width:19.6vw;
height:19.6vw;
}
.boxInner {
position: absolute;
left: 10px;
right: 10px;
top: 10px;
bottom: 10px;
overflow: hidden;
box-shadow:0 4px 20px rgba(0, 0, 0, 0.6);
border-radius:2px;
}
.boxInner img {
width: 100%;
}
.boxInner .titleBox {
position: absolute;
bottom: 0;
left: 0;
right: 0;
font-size:2em;
line-height:1.1;
background: #000;
background: rgba(0, 0, 0, 0.6);
color: #fff;
padding: .3em;
}
@media only screen and (max-width : 480px) {
/* Smartphone view: 1 tile */
.box {
width: 100vw;
height: 100vw;
}
}
@media only screen and (max-width : 650px) and (min-width : 481px) {
/* Tablet view: 2 tiles */
.box {
width: 47.9vw;
height: 47.9vw;
}
}
@media only screen and (max-width : 1050px) and (min-width : 651px) {
/* Small desktop / ipad view: 3 tiles */
.box {
width: 32.3vw;
height: 32.3vw;
}
}
@media only screen and (max-width : 1290px) and (min-width : 1051px) {
/* Medium desktop: 4 tiles */
.box {
width: 24.5vw;
height: 24.5vw;
}
}
</style>
</head>
<body>
<div class="wrap">
<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>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment