<html>
<head>
<style>
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap');
</style>
</head>
<body>
<header class="main-header">
<h1 class="project-title">Masonry-Like CSS Grid</h1>
</header>
<section class="post-grid-wrap">
<div class="post-grid-container">
<div class="post">
<a href="#">
<img src="https://picsum.photos/1600x900" alt="">
<div class="post-text">
<h2 class="post-title">Awesome Post</h2>
</div>
</a>
</div>
<div class="post">
<a href="#">
<img src="https://picsum.photos/800x600" alt="">
<div class="post-text">
<h2 class="post-title">Another Post</h2>
</div>
</a>
</div>
<div class="post">
<a href="#">
<img src="https://picsum.photos/800x600" alt="">
<div class="post-text">
<h2 class="post-title">A Cool Post</h2>
</div>
</a>
</div>
<div class="post">
<a href="#">
<img src="https://picsum.photos/800x600" alt="">
<div class="post-text">
<h2 class="post-title">Interesting Post</h2>
</div>
</a>
</div>
<div class="post">
<a href="#">
<img src="https://picsum.photos/800x600" alt="">
<div class="post-text">
<h2 class="post-title">Boring Post</h2>
</div>
</a>
</div>
</div>
</section>
<div class="load-more-wrap">
<a class="load-more-btn btn">Load More</a>
</div>
</body>
</html>
/*
**
** Probably a better way to do this but here is my version of a post grid layout similar to a masonry layout. Work in progess.
*/
body {
font-family: 'Roboto', sans-serif;
display: flex;
flex-direction: column;
margin: 0 0 83px;
scroll-behavior: smooth;
}
a {
text-decoration: none;
cursor: pointer;
}
a.btn {
padding: .5rem 1.5rem;
background: white;
color: gray;
font-weight: 500;
border-radius: 20px;
transition: all 150ms ease-in-out;
}
a.btn:hover {
background: #000A52;
color: white;
}
.main-header {
position: relative;
background: #1CB5E0;
position: sticky;
top: 0;
z-index: 100;
}
.project-title {
margin: 1em auto;
text-align: center;
color: white;
text-shadow: 2px 1px 4px rgb(0, 0, 0);
}
section.post-grid-wrap {
background: linear-gradient(0deg, #000851 0%, #1CB5E0 100%);
background-repeat: no-repeat;
padding: 1rem 0 3rem;
}
section.post-grid-wrap:nth-child(odd) {
background: linear-gradient(0deg, #1CB5E0 0%, #000851 100%);
}
/*
** Blog Post Grid
*/
.post-grid-container {
display: grid;
grid-template-columns: 1.5fr 1.5fr 2fr;
grid-gap: 2%;
max-width: 1200px;
margin: 0 auto 3rem;
}
.post-grid-container .post {
position: relative;
border: none;
overflow: hidden;
margin-bottom: 0;
background: transparent;
-webkit-box-shadow: 3px 5px 8px -1px rgba(0, 0, 0, 0);
-moz-box-shadow: 3px 5px 8px -1px rgba(0, 0, 0, 0);
box-shadow: 3px 5px 8px -1px rgba(0, 0, 0, 0);
transition: box-shadow .3s ease-in-out;
}
.post-grid-container .post:hover {
-webkit-box-shadow: 3px 5px 8px -1px rgba(0,0,0,0.5);
-moz-box-shadow: 3px 5px 8px -1px rgba(0,0,0,0.5);
box-shadow: 3px 5px 8px -1px rgba(0,0,0,0.5);
}
.post-grid-container .post-text {
position: absolute;
bottom: 1rem;
left: 1rem;
padding: 0 20px;
}
.post a {
color: white;
text-shadow: 2px 1px 4px rgb(0, 0, 0);
}
.post img {
opacity: 1;
transform: scale(1.25);
object-fit: cover;
transition: all .9s ease-in-out;
}
.post:hover img {
opacity: .25;
transform: scale(1.2);
}
.post:nth-child(1) {
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 2;
max-height: 400px;
}
.post:nth-child(1) img {
transform: scale(1.15);
margin-left: 3%;
}
.post:nth-child(1):hover img {
transform: scale(1.1);
}
.post:nth-child(2) {
grid-row-start: 1;
grid-row-end: 3;
}
.post:nth-child(2) img {
object-fit: cover;
object-position: 50% 50%;
min-height: 85%;
transform: scale(1.5);
}
.post:nth-child(2):hover img {
transform: scale(1.4);
}
.post:nth-child(3),
.post:nth-child(4) {
max-height: 218px;
}
.post:nth-child(3) img,
.post:nth-child(4) img {
min-height: 100%;
}
.post:nth-child(5) {
grid-column-start: 1;
grid-column-end: 4;
max-height: 400px;
}
.post:nth-child(5) img {
min-width: 1200px;
transform: scale(1.1);
}
.post:nth-child(5):hover img {
transform: scale(1.05);
}
@media all and (max-width: 992px) {
.post-grid-container {
display: block;
}
.post {
height: 220px;
margin-bottom: 5%;
}
}
.load-more-wrap {
background: #1CB5E0;
display: flex;
place-content: center;
position: fixed;
bottom: 0;
width: 100%;
z-index: 100;
}
.load-more-btn {
margin-top: 1.5em;
margin-bottom: 1.5em;
}
$(".load-more-btn").click(function(){
$(".post-grid-wrap:last-of-type").clone().appendTo("body");
$('html, body').animate({
scrollTop: $(window).scrollTop() + 400
});
});
This Pen doesn't use any external CSS resources.