Skip to content

Instantly share code, notes, and snippets.

@hyyan

hyyan/css3-masonry-grid.markdown

Created October 29, 2016 20:02
Show Gist options
  • Save hyyan/ae102d09db0ac925f4139088cf58eccd to your computer and use it in GitHub Desktop.
Save hyyan/ae102d09db0ac925f4139088cf58eccd to your computer and use it in GitHub Desktop.
Download ZIP
CSS3 Masonry Grid
Raw
css3-masonry-grid.markdown

CSS3 Masonry Grid

Simple CSS3 Masonry Grid , which can be used to create image gallery or to display posts grid wih no Javascript

A Pen by Hyyan Abo Fakher on CodePen.

License.

Raw
index.html
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS3 Masonry Grid</title>
</head>
<body>
<section id="masonry" class="masonry">
<!-- template
<figure>
<img src="..." />
<figcaption>
<div class="title"></div>
<div class="category"></div>
</figcaption>
</figure>
-->
</section>
</body>
</html>
Raw
script.js
(function() {
var mas = document.querySelector('#masonry');
for (var x = 0; x < 30; x++) {
var w = Math.floor(Math.random() * (800 - 400 + 1)) + 400;
var h = Math.floor(Math.random() * (800 - 400 + 1)) + 400;
var price = Math.floor(Math.random() * (1500) + 1);
var src = 'http://lorempixel.com/' + w + '/' + h + '/food/';
var category = 'CSS3 ';
var title = 'CSS3 Masonry Grid';
var content = '<figure>' +
'<img src="' + src + '" />' +
'<figcaption>' +
'<div class="price">' + price + '€</div>' +
'<div class="info">' +
'<div class="category">' + category + '</div>' +
'<div class="title">' + title + '</div>' +
'</div>' +
'</figcaption>' +
'</figure>';
mas.innerHTML = mas.innerHTML + content;
}
})();
Raw
style.scss
/// Mixin to prefix several properties at once
/// @author Hugo Giraudel
/// @param {Map} $declarations - Declarations to prefix
/// @param {List} $prefixes (()) - List of prefixes to print
@mixin prefix($declarations, $prefixes: ()) {
@each $property, $value in $declarations {
@each $prefix in $prefixes {
#{'-' + $prefix + '-' + $property}: $value;
}
// Output standard non-prefixed declaration
#{$property}: $value;
}
}
$masonry-border-color: #673AB7;
$masonry-border-color-hover: #E91E63;
$masonry-caption-bg: #000;
$masonry-caption-category-color: #90A4AE;
$masonry-caption-title-color: #fff;
$masonry-caption-price-color: #fff;
@keyframes "fadeIn" {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@-webkit-keyframes "fadeIn" {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@-moz-keyframes "fadeIn" {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
body{
margin: 0;
padding: 0;
background : #2e3141
}
.masonry {
position: relative;
width: 100%;
min-height: 1200px;
overflow: hidden;
@include prefix((
column-count: 4,
column-gap: 0,
box-sizing: border-box,
animation: fadeIn 500ms linear
), webkit moz ms o);
& , & * {
// fix css3 flickering
@include prefix((
transform: translate3d(0,0,0),
backface-visibility: hidden
), webkit moz ms o);
}
figure {
position: relative;
display: block;
padding: 0;
margin: 0;
width: 100%;
overflow: hidden;
cursor: auto;
@include prefix((
box-sizing: border-box
), webkit moz ms o);
&::before {
content: '';
position: absolute;
bottom: 0px;
width: 100%;
height: 25px;
z-index: 1000;
border-bottom: 8px solid $masonry-border-color;
@include prefix((
transition: 1s ease,
transform: translate3d(0,0,0),
backface-visibility: hidden
), webkit moz ms o);
}
&:hover {
&::before {
border-color: $masonry-border-color-hover;
}
img {
opacity: 1;
@include prefix((
transform: scale(1.2)
), webkit moz ms o);
}
figcaption {
bottom: 0;
}
}
img {
display: block;
width: 100%;
height: 200%;
opacity: .9;
@include prefix((
transform: scale(1),
transition: transform 500ms
), webkit moz ms o);
}
figcaption {
display: block;
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 100%;
padding: 2%;
opacity: .7;
@include prefix((
box-sizing: border-box,
transition: "bottom 500ms,border-bottom-color 500ms"
), webkit moz ms o);
background: $masonry-caption-bg;
background: -webkit-linear-gradient(transparent, $masonry-caption-bg);
background: -o-linear-gradient(transparent, $masonry-caption-bg);
background: -moz-linear-gradient(transparent, $masonry-caption-bg);
background: linear-gradient(transparent, $masonry-caption-bg);
.price , .info {
position: absolute;
bottom: 4%;
}
.price {
right: 2%;
font-size: 2.5vw;
color: $masonry-caption-price-color;
}
.info {
left: 2%;
.title {
a {
text-decoration: none !important;
}
font-weight: bolder;
font-size: 1.5vw;
color: $masonry-caption-title-color;
}
.category {
color: $masonry-caption-category-color;
}
}
}
}
}
/*========== Mobile First Method ==========*/
/* Custom, iPhone Retina */
@media only screen and (min-width : 320px) {
.masonry{
@include prefix((
column-count: 1
), webkit moz ms o);
}
}
/* Extra Small Devices, Phones */
@media only screen and (min-width : 480px) {
.masonry{
@include prefix((
column-count: 1
), webkit moz ms o);
}
}
/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
.masonry{
@include prefix((
column-count: 2
), webkit moz ms o);
}
}
/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
.masonry{
@include prefix((
column-count: 3
), webkit moz ms o);
}
}
/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
.masonry{
@include prefix((
column-count: 4
), webkit moz ms o);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment