Skip to content

Instantly share code, notes, and snippets.

@benwong

benwong/gist:67e288d4151ba9bf3697

Created April 15, 2015 06:36
Show Gist options
  • Save benwong/67e288d4151ba9bf3697 to your computer and use it in GitHub Desktop.
Save benwong/67e288d4151ba9bf3697 to your computer and use it in GitHub Desktop.
Download ZIP
Basic Responsive Grid Layout
Raw
gistfile1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Responsive Grid Layout</title>
<style>
.figure-grid
{
position: relative;
overflow: hidden;
width: 100%;
max-width: 960px;
list-style-type: none;
margin: 0;
padding: 0;
font: normal 12px/1.5 Helvetica, Arial;
}
.figure-grid .cell {
float: left;
position: relative;
width: 225px;
height: 410px; /* ## height of the cell ## */
margin: 0 0 20px 0;
padding: 0;
}
figure
{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
border: 1px solid #000;
box-sizing: border-box;
}
figure img
{
display: block;
width: 100%;
border: 0;
}
figcaption
{
padding: .6em;
}
figcaption h2
{
margin: 0;
padding: 0;
}
figcaption .bottom
{
position: absolute;
left: .6em;
bottom: .6em;
}
@media (min-width: 490px) {
.figure-grid .cell
{
margin: 0 20px 20px 0;
padding: 0;
}
.figure-grid .cell:nth-child(2n + 2)
{
margin: 0 0 20px 0;
padding: 0;
}
}
@media (min-width: 735px) {
.figure-grid .cell:nth-child(2n + 2)
{
margin: 0 20px 20px 0;
padding: 0;
}
.figure-grid .cell:nth-child(3n + 3)
{
margin: 0 0 20px 0;
padding: 0;
}
}
@media (min-width: 980px) {
.figure-grid .cell:nth-child(2n + 2)
{
margin: 0 20px 20px 0;
padding: 0;
}
.figure-grid .cell:nth-child(3n + 3)
{
margin: 0 20px 20px 0;
padding: 0;
}
.figure-grid .cell:nth-child(4n + 4)
{
margin: 0 0 20px 0;
padding: 0;
}
}
</style>
</head>
<body>
<!-- start copy from here -->
<ul class="figure-grid">
<li class="cell">
<figure>
<img src="https://placekitten.com/g/225/250" alt="">
<figcaption>
<h2>Event 1</h2>
<div>Event 1 description</div>
<div class="bottom">[button]</div>
</figcaption>
</figure>
</li>
<li class="cell">
<figure>
<img src="https://placekitten.com/g/225/250" alt="">
<figcaption>
<h2>Event 2</h2>
<div>Event 2 description</div>
</figcaption>
</figure>
</li>
<li class="cell">
<figure>
<img src="https://placekitten.com/g/225/250" alt="">
<figcaption>
<h2>Event 3</h2>
<div>Event 3 description</div>
</figcaption>
</figure>
</li>
<li class="cell">
<figure>
<img src="https://placekitten.com/g/225/250" alt="">
<figcaption>
<h2>Event 4</h2>
<div>Event 4 description</div>
</figcaption>
</figure>
</li>
<li class="cell">
<figure>
<img src="https://placekitten.com/g/225/250" alt="">
<figcaption>
<h2>Event 5</h2>
<div>Event 5 description</div>
</figcaption>
</figure>
</li>
<li class="cell">
<figure>
<img src="https://placekitten.com/g/225/250" alt="">
<figcaption>
<h2>Event 6</h2>
<div>Event 6 description</div>
</figcaption>
</figure>
</li>
<li class="cell">
<figure>
<img src="https://placekitten.com/g/225/250" alt="">
<figcaption>
<h2>Event 7</h2>
<div>Event 7 description</div>
</figcaption>
</figure>
</li>
<li class="cell">
<figure>
<img src="https://placekitten.com/g/225/250" alt="">
<figcaption>
<h2>Event 8</h2>
<div>Event 8 description</div>
</figcaption>
</figure>
</li>
<li class="cell">
<figure>
<img src="https://placekitten.com/g/225/250" alt="">
<figcaption>
<h2>Event 9</h2>
<div>Event 9 description</div>
</figcaption>
</figure>
</li>
<li class="cell">
<figure>
<img src="https://placekitten.com/g/225/250" alt="">
<figcaption>
<h2>Event 10</h2>
<div>Event 10 description</div>
</figcaption>
</figure>
</li>
<li class="cell">
<figure>
<img src="https://placekitten.com/g/225/250" alt="">
<figcaption>
<h2>Event 11</h2>
<div>Event 11 description</div>
</figcaption>
</figure>
</li>
<li class="cell">
<figure>
<img src="https://placekitten.com/g/225/250" alt="">
<figcaption>
<h2>Event 12</h2>
<div>Event 12 description</div>
</figcaption>
</figure>
</li>
<li class="cell">
<figure>
<img src="https://placekitten.com/g/225/250" alt="">
<figcaption>
<h2>Event 13</h2>
<div>Event 13 description</div>
</figcaption>
</figure>
</li>
<li class="cell">
<figure>
<img src="https://placekitten.com/g/225/250" alt="">
<figcaption>
<h2>Event 14</h2>
<div>Event 14 description</div>
</figcaption>
</figure>
</li>
<li class="cell">
<figure>
<img src="https://placekitten.com/g/225/250" alt="">
<figcaption>
<h2>Event 15</h2>
<div>Event 15 description</div>
</figcaption>
</figure>
</li>
</ul>
<!-- end copy here -->
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment