I'm building a blog site. I'm going to have there a posts miniatures. I want to get layout like this:
effect
I found a library called Masonry.js, it's a perfect solution for me but I have no idea how I need to set up this. I'm looking for help! :)
Maybye I have to change my method? I was trying float, grid, columns...
Thank you all in advance!
.container {
max-width: 1140px;
min-width: 360px;
padding: 0 15px 0 15px;
margin: auto;
}
.float {
float: left;
}
body {
background-color: #E5E5E5;
font-family: 'Montserrat', sans-serif;
font-size: 16px;
}
/*------NAGŁÓWEK------*/
header {
background-color: #fff;
font-size: 1em;
border-bottom: 4px solid #E88F30;
font-weight: 800;
overflow: auto;
/*padding: 25px 0;*/
height: 120px;
box-shadow: 0 5px 20px #c2c2c2;
top: 0;
width: 100%;
}
header .container {
-ms-transform: translateY(30%);
transform: translateY(30%);
}
header img {
width: 250px;
margin-right: 30px;
}
header nav {
text-transform: uppercase;
/*padding: 20px 0 0;*/
box-sizing: border-box;
-ms-transform: translateY(50%);
transform: translateY(50%);
}
header nav ul li {
float: left;
padding: 10px;
border-radius: 7px;
-webkit-transition: background-color 0.3s ease-in-out;
-moz-transition: background-color 0.3s ease-in-out;
-o-transition: background-color 0.3s ease-in-out;
transition: background-color 0.3s ease-in-out;
}
header nav ul li:hover {
background-color: #EDB034;
}
header nav ul li a:link {
color: #121212;
text-decoration: none;
}
header nav ul li a:hover {
text-decoration: none;
}
header nav ul li a:visited {
color: #121212;
}
/*------POST------*/
.container2 {
margin-top: 40px;
}
.post {
background-color: #fff;
margin: 0 25px 20px 0;
width: 360px;
border-radius: 15px;
-webkit-transition: box-shadow 0.2s ease-in-out;
-moz-transition: box-shadow 0.2s ease-in-out;
-o-transition: box-shadow 0.2s ease-in-out;
transition: box-shadow 0.2s ease-in-out;
}
.post img {
width: inherit;
border-radius: 15px 15px 0 0;
-webkit-border-radius: 15px 15px 0 0;
-moz-border-radius: 15px 15px 0 0;
-ms-border-radius: 15px 15px 0 0;
-o-border-radius: 15px 15px 0 0;
}
.post:hover {
box-shadow: 10px 10px 35px #b9b9b9;
}
.post-inside {
padding: 20px 30px;
overflow: auto;
}
.post-inside * {
margin-bottom: 8px;
}
.post-inside h3 {
font-weight: 800;
font-size: 1.1em;
line-height: 20px;
-webkit-transition: color 0.3s ease;
-moz-transition: color 0.3s ease;
-o-transition: color 0.3s ease;
transition: color 0.3s ease;
}
.post-inside h3:hover {
color: #EDB034;
cursor: pointer;
}
.post-inside .article-min {
text-align: justify;
font-size: 0.9em;
line-height: 16px;
}
.post-inside .more {
font-weight: 800;
font-size: 0.95em;
margin-bottom: 0;
-webkit-transition: color 0.3s ease;
-moz-transition: color 0.3s ease;
-o-transition: color 0.3s ease;
transition: color 0.3s ease;
-ms-transition: color 0.3s ease;
}
.post-inside .more .more-text,
.post-inside .more i {
float: right;
}
.post-inside .more i {
margin-left: 5px;
font-size: 1.2em;
}
.post-inside .more:hover {
color: #EDB034;
cursor: pointer;
}
.meta {
height: 20px;
color: #444444;
}
.meta i::before {
margin: 0;
}
.meta i {
margin-right: 5px;
font-size: 0.95em;
line-height: 20px;
}
.meta .text {
font-size: 0.7em;
line-height: 20px;
}
.meta div.float {
height: 7px;
}
.meta .author {
width: 160px;
}
.meta .date {
width: 90px;
}
.meta .comments {
width: 30px;
}<!DOCTYPE html>
<html lang="pl-PL">
<head>
<title>He Reads! | Z książką w ręce</title>
<meta charset="utf-8">
<meta name="author" content="Konrad Szczepanowski">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,800&subset=latin-ext" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="style/css-reset.css">
<link rel="stylesheet" href="fontello/css/fontello.css">
<link rel="stylesheet" type="text/css" href="style/style.css">
</head>
<body>
<header>
<div class="container">
<img src="img/hereads-logo.png" alt="He Reads!" class="float">
<nav class="float">
<ul>
<li><a href="#">Książka</a></li>
<li><a href="#">Serial</a></li>
<li><a href="#">Wylosuj</a></li>
</ul>
</nav>
<div style="clear: both;"></div>
</div>
</header>
<div class="container container2">
<div class="post">
<img src="img/dziewczyna.jpg" alt="dziew">
<div class="post-inside">
<h3>Nie gadaj tylko podaj mi broń. Recenzja cyklu o Nikicie.</h3>
<div class="meta">
<div class="float author"><i class="icon-user float"></i><div class="text" class="float">Konrad Szczepanowski</div></div>
<div class="float date"><i class="icon-calendar float"></i><div class="text" class="float">03.06.2019</div></div>
<div class="float comments"><i class="icon-commenting float"></i><div class="text" class="float">2</div></div>
</div><div style="clear: both;"></div>
<article class="article-min">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quasi aut harum quibusdam quis esse hic commodi, vel, culpa quaerat exercitationem excepturi. Hic sequi ipsum, quis aspernatur quidem porro ab esse, sunt numquam quam libero sit tenetur officiis modi facilis beatae eum voluptates</article>
<div class="more"><i class="icon-right-hand float"></i><div class="more-text">Czytaj</div></div>
</div>
</div>
<div class="post">
<img src="img/dziewczyna.jpg" alt="dziew">
<div class="post-inside">
<h3>Nie gadaj tylko podaj mi broń. Recenzja cyklu o Nikicie.</h3>
<div class="meta">
<div class="float author"><i class="icon-user float"></i><div class="text" class="float">Konrad Szczepanowski</div></div>
<div class="float date"><i class="icon-calendar float"></i><div class="text" class="float">03.06.2019</div></div>
<div class="float comments"><i class="icon-commenting float"></i><div class="text" class="float">2</div></div>
</div><div style="clear: both;"></div>
<article class="article-min">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quasi aut harum quibusdam quis esse hic commodi, vel, culpa quaerat exercitationem excepturi. Hic sequi ipsum, quis aspernatur quidem porro ab esse, sunt numquam quam libero sit tenetur officiis modi facilis beatae eum voluptates aliquid veritatis saepe consequuntur? Sint cum ipsum libero? Lorem ipsum dolor sit amet consectetur adipisicing.</article>
<div class="more"><i class="icon-right-hand float"></i><div class="more-text">Czytaj</div></div>
</div>
</div>
<div class="post">
<img src="img/dziewczyna.jpg" alt="dziew">
<div class="post-inside">
<h3>Nie gadaj tylko podaj mi broń. Recenzja cyklu o Nikicie.</h3>
<div class="meta">
<div class="float author"><i class="icon-user float"></i><div class="text" class="float">Konrad Szczepanowski</div></div>
<div class="float date"><i class="icon-calendar float"></i><div class="text" class="float">03.06.2019</div></div>
<div class="float comments"><i class="icon-commenting float"></i><div class="text" class="float">2</div></div>
</div><div style="clear: both;"></div>
<article class="article-min">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quasi aut harum quibusdam quis esse hic commodi, vel, culpa quaerat exercitationem excepturi. Hic sequi ipsum, quis aspernatur quidem porro ab esse, sunt numquam quam libero sit tenetur officiis modi facilis beatae eum voluptates aliquid veritatis saepe consequuntur? Sint cum ipsum libero?</article>
<div class="more"><i class="icon-right-hand float"></i><div class="more-text">Czytaj</div></div>
</div>
</div>
<div class="post">
<img src="img/dziewczyna.jpg" alt="dziew">
<div class="post-inside">
<h3>Nie gadaj tylko podaj mi broń. Recenzja cyklu o Nikicie.</h3>
<div class="meta">
<div class="float author"><i class="icon-user float"></i><div class="text" class="float">Konrad Szczepanowski</div></div>
<div class="float date"><i class="icon-calendar float"></i><div class="text" class="float">03.06.2019</div></div>
<div class="float comments"><i class="icon-commenting float"></i><div class="text" class="float">2</div></div>
</div><div style="clear: both;"></div>
<article class="article-min">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quasi aut harum quibusdam quis esse hic commodi, vel, culpa quaerat exercitationem excepturi. Hic sequi ipsum, quis aspernatur quidem porro ab esse, sunt numquam quam libero sit tenetur officiis modi facilis beatae eum voluptates</article>
<div class="more"><i class="icon-right-hand float"></i><div class="more-text">Czytaj</div></div>
</div>
</div>
<div class="post">
<img src="img/dziewczyna.jpg" alt="dziew">
<div class="post-inside">
<h3>Nie gadaj tylko podaj mi broń. Recenzja cyklu o Nikicie.</h3>
<div class="meta">
<div class="float author"><i class="icon-user float"></i><div class="text" class="float">Konrad Szczepanowski</div></div>
<div class="float date"><i class="icon-calendar float"></i><div class="text" class="float">03.06.2019</div></div>
<div class="float comments"><i class="icon-commenting float"></i><div class="text" class="float">2</div></div>
</div><div style="clear: both;"></div>
<article class="article-min">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quasi aut harum quibusdam quis esse hic commodi, vel, culpa quaerat exercitationem excepturi. Hic sequi ipsum, quis aspernatur quidem porro ab esse, sunt numquam quam libero sit tenetur officiis modi facilis beatae eum voluptates aliquid veritatis saepe consequuntur? Sint cum ipsum libero? Lorem ipsum dolor sit amet consectetur adipisicing.</article>
<div class="more"><i class="icon-right-hand float"></i><div class="more-text">Czytaj</div></div>
</div>
</div>
<div class="post">
<img src="img/dziewczyna.jpg" alt="dziew">
<div class="post-inside">
<h3>Nie gadaj tylko podaj mi broń. Recenzja cyklu o Nikicie.</h3>
<div class="meta">
<div class="float author"><i class="icon-user float"></i><div class="text" class="float">Konrad Szczepanowski</div></div>
<div class="float date"><i class="icon-calendar float"></i><div class="text" class="float">03.06.2019</div></div>
<div class="float comments"><i class="icon-commenting float"></i><div class="text" class="float">2</div></div>
</div><div style="clear: both;"></div>
<article class="article-min">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quasi aut harum quibusdam quis esse hic commodi, vel, culpa quaerat exercitationem excepturi. Hic sequi ipsum, quis aspernatur quidem porro ab esse, sunt numquam quam libero sit tenetur officiis modi facilis beatae eum voluptates aliquid veritatis saepe consequuntur? Sint cum ipsum libero? Lorem ipsum dolor sit amet consectetur adipisicing.</article>
<div class="more"><i class="icon-right-hand float"></i><div class="more-text">Czytaj</div></div>
</div>
</div>
</div>
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.container2').masonry({
// options
itemSelector: '.post',
});
});
</script>
</body>
</html>The right margin for .post is too large. Your container is 1140px wide and a post is 385px wide (width + right margin). 385 * 3 = 1155px, wider than your container so Masonry.js creates two columns instead of three. Reduce the right margin for .post to 20px.
.container {
max-width: 1140px;
min-width: 360px;
padding: 0 15px 0 15px;
margin: auto;
}
.float {
float: left;
}
body {
background-color: #E5E5E5;
font-family: 'Montserrat', sans-serif;
font-size: 16px;
}
/*------NAGŁÓWEK------*/
header {
background-color: #fff;
font-size: 1em;
border-bottom: 4px solid #E88F30;
font-weight: 800;
overflow: auto;
/*padding: 25px 0;*/
height: 120px;
box-shadow: 0 5px 20px #c2c2c2;
top: 0;
width: 100%;
}
header .container {
-ms-transform: translateY(30%);
transform: translateY(30%);
}
header img {
width: 250px;
margin-right: 30px;
}
header nav {
text-transform: uppercase;
/*padding: 20px 0 0;*/
box-sizing: border-box;
-ms-transform: translateY(50%);
transform: translateY(50%);
}
header nav ul li {
float: left;
padding: 10px;
border-radius: 7px;
-webkit-transition: background-color 0.3s ease-in-out;
-moz-transition: background-color 0.3s ease-in-out;
-o-transition: background-color 0.3s ease-in-out;
transition: background-color 0.3s ease-in-out;
}
header nav ul li:hover {
background-color: #EDB034;
}
header nav ul li a:link {
color: #121212;
text-decoration: none;
}
header nav ul li a:hover {
text-decoration: none;
}
header nav ul li a:visited {
color: #121212;
}
/*------POST------*/
.container2 {
margin-top: 40px;
}
.post {
background-color: #fff;
margin: 0 20px 20px 0;
width: 360px;
border-radius: 15px;
-webkit-transition: box-shadow 0.2s ease-in-out;
-moz-transition: box-shadow 0.2s ease-in-out;
-o-transition: box-shadow 0.2s ease-in-out;
transition: box-shadow 0.2s ease-in-out;
}
.post img {
width: inherit;
border-radius: 15px 15px 0 0;
-webkit-border-radius: 15px 15px 0 0;
-moz-border-radius: 15px 15px 0 0;
-ms-border-radius: 15px 15px 0 0;
-o-border-radius: 15px 15px 0 0;
}
.post:hover {
box-shadow: 10px 10px 35px #b9b9b9;
}
.post-inside {
padding: 20px 30px;
overflow: auto;
}
.post-inside * {
margin-bottom: 8px;
}
.post-inside h3 {
font-weight: 800;
font-size: 1.1em;
line-height: 20px;
-webkit-transition: color 0.3s ease;
-moz-transition: color 0.3s ease;
-o-transition: color 0.3s ease;
transition: color 0.3s ease;
}
.post-inside h3:hover {
color: #EDB034;
cursor: pointer;
}
.post-inside .article-min {
text-align: justify;
font-size: 0.9em;
line-height: 16px;
}
.post-inside .more {
font-weight: 800;
font-size: 0.95em;
margin-bottom: 0;
-webkit-transition: color 0.3s ease;
-moz-transition: color 0.3s ease;
-o-transition: color 0.3s ease;
transition: color 0.3s ease;
-ms-transition: color 0.3s ease;
}
.post-inside .more .more-text,
.post-inside .more i {
float: right;
}
.post-inside .more i {
margin-left: 5px;
font-size: 1.2em;
}
.post-inside .more:hover {
color: #EDB034;
cursor: pointer;
}
.meta {
height: 20px;
color: #444444;
}
.meta i::before {
margin: 0;
}
.meta i {
margin-right: 5px;
font-size: 0.95em;
line-height: 20px;
}
.meta .text {
font-size: 0.7em;
line-height: 20px;
}
.meta div.float {
height: 7px;
}
.meta .author {
width: 160px;
}
.meta .date {
width: 90px;
}
.meta .comments {
width: 30px;
}<!DOCTYPE html>
<html lang="pl-PL">
<head>
<title>He Reads! | Z książką w ręce</title>
<meta charset="utf-8">
<meta name="author" content="Konrad Szczepanowski">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,800&subset=latin-ext" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="style/css-reset.css">
<link rel="stylesheet" href="fontello/css/fontello.css">
<link rel="stylesheet" type="text/css" href="style/style.css">
</head>
<body>
<header>
<div class="container">
<img src="img/hereads-logo.png" alt="He Reads!" class="float">
<nav class="float">
<ul>
<li><a href="#">Książka</a></li>
<li><a href="#">Serial</a></li>
<li><a href="#">Wylosuj</a></li>
</ul>
</nav>
<div style="clear: both;"></div>
</div>
</header>
<div class="container container2">
<div class="post">
<img src="img/dziewczyna.jpg" alt="dziew">
<div class="post-inside">
<h3>Nie gadaj tylko podaj mi broń. Recenzja cyklu o Nikicie.</h3>
<div class="meta">
<div class="float author"><i class="icon-user float"></i><div class="text" class="float">Konrad Szczepanowski</div></div>
<div class="float date"><i class="icon-calendar float"></i><div class="text" class="float">03.06.2019</div></div>
<div class="float comments"><i class="icon-commenting float"></i><div class="text" class="float">2</div></div>
</div><div style="clear: both;"></div>
<article class="article-min">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quasi aut harum quibusdam quis esse hic commodi, vel, culpa quaerat exercitationem excepturi. Hic sequi ipsum, quis aspernatur quidem porro ab esse, sunt numquam quam libero sit tenetur officiis modi facilis beatae eum voluptates</article>
<div class="more"><i class="icon-right-hand float"></i><div class="more-text">Czytaj</div></div>
</div>
</div>
<div class="post">
<img src="img/dziewczyna.jpg" alt="dziew">
<div class="post-inside">
<h3>Nie gadaj tylko podaj mi broń. Recenzja cyklu o Nikicie.</h3>
<div class="meta">
<div class="float author"><i class="icon-user float"></i><div class="text" class="float">Konrad Szczepanowski</div></div>
<div class="float date"><i class="icon-calendar float"></i><div class="text" class="float">03.06.2019</div></div>
<div class="float comments"><i class="icon-commenting float"></i><div class="text" class="float">2</div></div>
</div><div style="clear: both;"></div>
<article class="article-min">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quasi aut harum quibusdam quis esse hic commodi, vel, culpa quaerat exercitationem excepturi. Hic sequi ipsum, quis aspernatur quidem porro ab esse, sunt numquam quam libero sit tenetur officiis modi facilis beatae eum voluptates aliquid veritatis saepe consequuntur? Sint cum ipsum libero? Lorem ipsum dolor sit amet consectetur adipisicing.</article>
<div class="more"><i class="icon-right-hand float"></i><div class="more-text">Czytaj</div></div>
</div>
</div>
<div class="post">
<img src="img/dziewczyna.jpg" alt="dziew">
<div class="post-inside">
<h3>Nie gadaj tylko podaj mi broń. Recenzja cyklu o Nikicie.</h3>
<div class="meta">
<div class="float author"><i class="icon-user float"></i><div class="text" class="float">Konrad Szczepanowski</div></div>
<div class="float date"><i class="icon-calendar float"></i><div class="text" class="float">03.06.2019</div></div>
<div class="float comments"><i class="icon-commenting float"></i><div class="text" class="float">2</div></div>
</div><div style="clear: both;"></div>
<article class="article-min">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quasi aut harum quibusdam quis esse hic commodi, vel, culpa quaerat exercitationem excepturi. Hic sequi ipsum, quis aspernatur quidem porro ab esse, sunt numquam quam libero sit tenetur officiis modi facilis beatae eum voluptates aliquid veritatis saepe consequuntur? Sint cum ipsum libero?</article>
<div class="more"><i class="icon-right-hand float"></i><div class="more-text">Czytaj</div></div>
</div>
</div>
<div class="post">
<img src="img/dziewczyna.jpg" alt="dziew">
<div class="post-inside">
<h3>Nie gadaj tylko podaj mi broń. Recenzja cyklu o Nikicie.</h3>
<div class="meta">
<div class="float author"><i class="icon-user float"></i><div class="text" class="float">Konrad Szczepanowski</div></div>
<div class="float date"><i class="icon-calendar float"></i><div class="text" class="float">03.06.2019</div></div>
<div class="float comments"><i class="icon-commenting float"></i><div class="text" class="float">2</div></div>
</div><div style="clear: both;"></div>
<article class="article-min">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quasi aut harum quibusdam quis esse hic commodi, vel, culpa quaerat exercitationem excepturi. Hic sequi ipsum, quis aspernatur quidem porro ab esse, sunt numquam quam libero sit tenetur officiis modi facilis beatae eum voluptates</article>
<div class="more"><i class="icon-right-hand float"></i><div class="more-text">Czytaj</div></div>
</div>
</div>
<div class="post">
<img src="img/dziewczyna.jpg" alt="dziew">
<div class="post-inside">
<h3>Nie gadaj tylko podaj mi broń. Recenzja cyklu o Nikicie.</h3>
<div class="meta">
<div class="float author"><i class="icon-user float"></i><div class="text" class="float">Konrad Szczepanowski</div></div>
<div class="float date"><i class="icon-calendar float"></i><div class="text" class="float">03.06.2019</div></div>
<div class="float comments"><i class="icon-commenting float"></i><div class="text" class="float">2</div></div>
</div><div style="clear: both;"></div>
<article class="article-min">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quasi aut harum quibusdam quis esse hic commodi, vel, culpa quaerat exercitationem excepturi. Hic sequi ipsum, quis aspernatur quidem porro ab esse, sunt numquam quam libero sit tenetur officiis modi facilis beatae eum voluptates aliquid veritatis saepe consequuntur? Sint cum ipsum libero? Lorem ipsum dolor sit amet consectetur adipisicing.</article>
<div class="more"><i class="icon-right-hand float"></i><div class="more-text">Czytaj</div></div>
</div>
</div>
<div class="post">
<img src="img/dziewczyna.jpg" alt="dziew">
<div class="post-inside">
<h3>Nie gadaj tylko podaj mi broń. Recenzja cyklu o Nikicie.</h3>
<div class="meta">
<div class="float author"><i class="icon-user float"></i><div class="text" class="float">Konrad Szczepanowski</div></div>
<div class="float date"><i class="icon-calendar float"></i><div class="text" class="float">03.06.2019</div></div>
<div class="float comments"><i class="icon-commenting float"></i><div class="text" class="float">2</div></div>
</div><div style="clear: both;"></div>
<article class="article-min">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quasi aut harum quibusdam quis esse hic commodi, vel, culpa quaerat exercitationem excepturi. Hic sequi ipsum, quis aspernatur quidem porro ab esse, sunt numquam quam libero sit tenetur officiis modi facilis beatae eum voluptates aliquid veritatis saepe consequuntur? Sint cum ipsum libero? Lorem ipsum dolor sit amet consectetur adipisicing.</article>
<div class="more"><i class="icon-right-hand float"></i><div class="more-text">Czytaj</div></div>
</div>
</div>
</div>
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.container2').masonry({
// options
itemSelector: '.post',
});
});
</script>
</body>
</html>