Using the below code (after the images) I'm getting a layout like this:
But what I want is a layout like this:
My current code:
CSS:
#columns
{
column-width: 320px; /* change to EM later */
column-gap: 15px;
width: 90%;
max-width: 770px;
margin: 50px auto;
}
#columns .card
{
background: #fefefe;
border: 2px solid #fcfcfc;
box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4);
margin: 0 2px 15px;
padding: 15px; padding-bottom: 10px;
transition: opacity .4s ease-in-out;
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid;
column-break-inside: avoid;
display: inline-block;
background-color: #e8e8e8;
}
#columns:hover .card:not(:hover)
{
opacity: 0.4;
}
#card1
{
width: 320px;
height: 200px;
}
#card2
{
width: 320px;
height: 160px;
}
#card3
{
width: 320px;
height: 200px;
}
#card4
{
width: 320px;
height: 200px;
}
#card5
{
width: 320px;
height: 200px;
}
#card6
{
width: 320px;
height: 200px;
}
HTML:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Layout</title>
<link href="stylesheets/reset.css" media="screen" rel="stylesheet" type="text/css" />
<link href="stylesheets/main.css" media="screen" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="columns">
<div id="card1" class="card">Card 1 here</div>
<div id="card2" class="card">Card 2 here</div>
<div id="card3" class="card">Card 3 here</div>
<div id="card4" class="card">Card 4 here</div>
<div id="card5" class="card">Card 5 here</div>
<div id="card6" class="card">Card 6 here</div>
</div>
</body>
</html>
Must work in Chrome (Android/Desktop), Safari iOS 7+, Firefox 38+ (Android/Desktop)
