This question already has answers here:
CSS-only masonry layout
(4 answers)
Closed 12 months ago.
Hi I am stuck on a css only masonry grid, I have the masonry part but I would like the first column to have a width of about 35% and 2nd column 75%. Any help is appreciated. I have tried with grid and column but it does not seem to work, here is a link to my codepen:
https://codepen.io/louise-fourie/pen/JjOgpZj
<h1>CSS Grid - Masonry Layout</h1>
<div class="grid">
<div class="content flow">
<img src="https://jennac.designshowcase.co.za/wp-content/uploads/2022/01/Mask-Group-15.png" alt="">
</div>
<div class="content flow featured">
<img src="https://unsplash.it/500/200" alt="">
</div>
<div class="content flow">
<img src="https://unsplash.it/500/200" alt="">
</div>
<div class="content flow">
<img src="https://unsplash.it/500/200" alt="">
</div>
<div class="content flow">
<img src="https://unsplash.it/500/200" alt="">
</div>
<div class="content flow">
<img src="https://unsplash.it/500/200" alt="">
</div>
<div class="content flow">
<img src="https://unsplash.it/500/200" alt="">
</div>
<div class="content flow">
<img src="https://jennac.designshowcase.co.za/wp-content/uploads/2022/01/Mask-Group-15.png" alt="">
</div>
<div class="content flow">
<img src="https://unsplash.it/500/200" alt="">
</div>
<div class="content flow">
<img src="https://unsplash.it/500/200" alt="">
</div>
</div>
<style>
.grid {
--gap: 1em;
--columns: 2;
/* max-width: 60rem;
margin: 0 auto; */
display: column;
columns: var(--columns);
gap: var(--gap);
}
.grid > * {
break-inside: avoid;
margin-bottom: var(--gap);
}
img {
max-width: 100%;
width:100%;
}
.flow {
grid-column-start: 1;
grid-column-end: 1;
}
.flow:nth-child(even) {
grid-column-start: 2;
grid-column-end: 12;
}
</style>
Use display grid instead of display column:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.grid {
display: grid;
grid-template-columns: 30% 1fr;
grid-row: unset;
}
.grid>* {
break-inside: avoid;
margin-bottom: var(--gap);
}
img {
max-width: 100%;
width: 100%;
}
.flow {
grid-column-start: 1;
grid-column-end: 2;
}
.flow:nth-child(even) {
grid-column-start: 2;
grid-column-end: 12;
}
</style>
<body>
<div class="grid">
<div class="content flow">
<img src="https://jennac.designshowcase.co.za/wp-content/uploads/2022/01/Mask-Group-15.png" alt="">
<img src="https://unsplash.it/500/200" alt="">
<img src="https://unsplash.it/500/200" alt="">
<img src="https://unsplash.it/500/200" alt="">
<img src="https://unsplash.it/500/200" alt="">
</div>
<div class="content flow">
<img src="https://unsplash.it/500/200" alt="">
<img src="https://unsplash.it/500/200" alt="">
<img src="https://unsplash.it/500/200" alt="">
<img src="https://jennac.designshowcase.co.za/wp-content/uploads/2022/01/Mask-Group-15.png" alt="">
<img src="https://unsplash.it/500/200" alt="">
</div>
</div>
</body>
</html>
Related
I have many images & I want to create a list of images like this:
but I generate this list & images not placed correctly:
For this specific case you could just use a grid with template areas as that gives you good control over positioning.
Essentially your grid will have six columns and six rows.
I'll come back to this shortly and put up a snippet but I thought you might like this idea immediately and look into it in case of use.
UPDATE: here's a snippet using grid. Obviously you'll need to put the right background-image into each div.
.container {
display: grid;
grid-template-columns: repeat(6, 12vw);
grid-template-rows: repeat(6, 12vw);
grid-gap: 1vw;
}
.container div:nth-child(1) {
grid-row: 1/span 2;
grid-column: 1/span 2;
}
.container div:nth-child(14) {
grid-row: 3/ span 2;
grid-column: 3/ span 2;
}
.container div:nth-child(27) {
grid-row: 5/ span 2;
grid-column: 5/ span 2;
}
.container div {
background-image: url(https://i.stack.imgur.com/ukCns.jpg);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
<div class="container">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
One way is to group content into html groups and control them that way. Just depends on the overall application of what you're trying to do. This is also responsive as well.
img {
width: 100%;
display: flex;
}
.row {
display: flex;
}
#media(max-width: 768px){
.row {
flex-direction: column;
}
}
.row .group.count-1,
.row .group.count-4 {
width: 33%;
}
#media(max-width: 768px){
.row .group.count-1,
.row .group.count-4 {
width: 100%;
}
}
.row .group.count-4 {
display: flex;
flex-wrap: wrap;
}
.row .group.count-1 img,
.row .group.count-4 img {
margin: 1%;
}
#media(max-width: 768px){
.row .group.count-1 img,
.row .group.count-4 img {
margin: 0 0 1%;
}
}
.row .group.count-1 img {
width: 98%;
}
#media(max-width: 768px){
.row .group.count-1 img {
width: 100%;
}
}
.row .group.count-4 img {
width: 48%;
}
#media(max-width: 768px){
.row .group.count-4 img {
width: 100%;
}
}
<div class="container">
<div class="row">
<div class="group count-1">
<img src="https://imagecdn.app/v1/images/https%3A%2F%2Fimages.unsplash.com%2Fphoto-1525923838299-2312b60f6d69?width=200&height=200" alt="">
</div>
<div class="group count-4">
<img src="https://imagecdn.app/v1/images/https%3A%2F%2Fimages.unsplash.com%2Fphoto-1525923838299-2312b60f6d69?width=200&height=200" alt="">
<img src="https://imagecdn.app/v1/images/https%3A%2F%2Fimages.unsplash.com%2Fphoto-1525923838299-2312b60f6d69?width=200&height=200" alt="">
<img src="https://imagecdn.app/v1/images/https%3A%2F%2Fimages.unsplash.com%2Fphoto-1525923838299-2312b60f6d69?width=200&height=200" alt="">
<img src="https://imagecdn.app/v1/images/https%3A%2F%2Fimages.unsplash.com%2Fphoto-1525923838299-2312b60f6d69?width=200&height=200" alt="">
</div>
<div class="group count-4">
<img src="https://imagecdn.app/v1/images/https%3A%2F%2Fimages.unsplash.com%2Fphoto-1525923838299-2312b60f6d69?width=200&height=200" alt="">
<img src="https://imagecdn.app/v1/images/https%3A%2F%2Fimages.unsplash.com%2Fphoto-1525923838299-2312b60f6d69?width=200&height=200" alt="">
<img src="https://imagecdn.app/v1/images/https%3A%2F%2Fimages.unsplash.com%2Fphoto-1525923838299-2312b60f6d69?width=200&height=200" alt="">
<img src="https://imagecdn.app/v1/images/https%3A%2F%2Fimages.unsplash.com%2Fphoto-1525923838299-2312b60f6d69?width=200&height=200" alt="">
</div>
</div>
<div class="row">
<div class="group count-4">
<img src="https://imagecdn.app/v1/images/https%3A%2F%2Fimages.unsplash.com%2Fphoto-1525923838299-2312b60f6d69?width=200&height=200" alt="">
<img src="https://imagecdn.app/v1/images/https%3A%2F%2Fimages.unsplash.com%2Fphoto-1525923838299-2312b60f6d69?width=200&height=200" alt="">
<img src="https://imagecdn.app/v1/images/https%3A%2F%2Fimages.unsplash.com%2Fphoto-1525923838299-2312b60f6d69?width=200&height=200" alt="">
<img src="https://imagecdn.app/v1/images/https%3A%2F%2Fimages.unsplash.com%2Fphoto-1525923838299-2312b60f6d69?width=200&height=200" alt="">
</div>
<div class="group count-1">
<img src="https://imagecdn.app/v1/images/https%3A%2F%2Fimages.unsplash.com%2Fphoto-1525923838299-2312b60f6d69?width=200&height=200" alt="">
</div>
<div class="group count-4">
<img src="https://imagecdn.app/v1/images/https%3A%2F%2Fimages.unsplash.com%2Fphoto-1525923838299-2312b60f6d69?width=200&height=200" alt="">
<img src="https://imagecdn.app/v1/images/https%3A%2F%2Fimages.unsplash.com%2Fphoto-1525923838299-2312b60f6d69?width=200&height=200" alt="">
<img src="https://imagecdn.app/v1/images/https%3A%2F%2Fimages.unsplash.com%2Fphoto-1525923838299-2312b60f6d69?width=200&height=200" alt="">
<img src="https://imagecdn.app/v1/images/https%3A%2F%2Fimages.unsplash.com%2Fphoto-1525923838299-2312b60f6d69?width=200&height=200" alt="">
</div>
</div>
<div class="row">
<div class="group count-4">
<img src="https://imagecdn.app/v1/images/https%3A%2F%2Fimages.unsplash.com%2Fphoto-1525923838299-2312b60f6d69?width=200&height=200" alt="">
<img src="https://imagecdn.app/v1/images/https%3A%2F%2Fimages.unsplash.com%2Fphoto-1525923838299-2312b60f6d69?width=200&height=200" alt="">
<img src="https://imagecdn.app/v1/images/https%3A%2F%2Fimages.unsplash.com%2Fphoto-1525923838299-2312b60f6d69?width=200&height=200" alt="">
<img src="https://imagecdn.app/v1/images/https%3A%2F%2Fimages.unsplash.com%2Fphoto-1525923838299-2312b60f6d69?width=200&height=200" alt="">
</div>
<div class="group count-4">
<img src="https://imagecdn.app/v1/images/https%3A%2F%2Fimages.unsplash.com%2Fphoto-1525923838299-2312b60f6d69?width=200&height=200" alt="">
<img src="https://imagecdn.app/v1/images/https%3A%2F%2Fimages.unsplash.com%2Fphoto-1525923838299-2312b60f6d69?width=200&height=200" alt="">
<img src="https://imagecdn.app/v1/images/https%3A%2F%2Fimages.unsplash.com%2Fphoto-1525923838299-2312b60f6d69?width=200&height=200" alt="">
<img src="https://imagecdn.app/v1/images/https%3A%2F%2Fimages.unsplash.com%2Fphoto-1525923838299-2312b60f6d69?width=200&height=200" alt="">
</div>
<div class="group count-1">
<img src="https://imagecdn.app/v1/images/https%3A%2F%2Fimages.unsplash.com%2Fphoto-1525923838299-2312b60f6d69?width=200&height=200" alt="">
</div>
</div>
</div>
This question already has answers here:
CSS-only masonry layout
(4 answers)
Closed 1 year ago.
I am trying to make a gallery that is uneven and staggered by using images and colored divs that are not the same size. I have the columns set to a min of 352px and to auto-fit the screen. So the container with grid looks something like this:
display: grid;
grid-template-columns: repeat(auto-fit, minmax(352px, 1fr));
grid-gap: 20px;
The issue I am having is the tallest picture sets the height of the row and the divs that have the smaller images follow the same height. Is there a way to tell the items in the row to not all be the same size? Or rather just target certain items in each row and tell them to be a specific height?
.grey {
background: #D9D9D9;
}
.tan {
background: #DCCEC8;
}
.light-brown {
background: #DC997D;
}
.brown {
background: #814A3D;
}
.black {
background: #000;
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(352px, 1fr));
grid-gap: 20px;
}
.grid > div {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
}
img {
max-width: 350px;
width: 350px;
}
.overlay {
position: absolute;
width: 350px;
height: 100%;
background: rgba(0, 0, 0, 0.05);
}
h4 {
text-transform: uppercase;
font-size: 26px;
color: #fff;
position: absolute;
z-index: 9;
}
h4:nth-child(2) {
bottom: 35px;
}
h4:nth-child(3) {
font-size: 18px;
margin: 5px 0;
bottom: 5px;
}
.fill {
max-width: 350px;
height: 100%;
width: 100%;
}
<div class='grid'>
<div>
<img class="thumbnail" src="https://picsum.photos/500/600" alt="person" />
<h4>Person One</h4>
<h4>#person1</h4>
<div class="overlay"></div>
</div>
<div><div class="tan fill"></div></div>
<div>
<img class="thumbnail" src="https://picsum.photos/300/220" alt="person" />
<h4>Person TWO</h4>
<h4>#person2</h4>
<div class="overlay"></div>
</div>
<div><div class="black fill"></div></div>
<div>
<img class="thumbnail" src="https://picsum.photos/700/700" alt="person" />
<h4>Person 3</h4>
<h4>#person3</h4>
<div class="overlay"></div>
</div>
<div>
<img class="thumbnail" src="https://picsum.photos/400/400" alt="person" />
<h4>Person four</h4>
<h4>#person4</h4>
<div class="overlay"></div>
</div>
<div>
<img class="thumbnail" src="https://picsum.photos/500/260" alt="person" />
<h4>Person Five</h4>
<h4>#pesron5</h4>
<div class="overlay"></div>
</div>
<div><div class="light-brown fill"></div></div>
<div><div class='brown fill'></div></div>
<div>
<img class="thumbnail" src="https://picsum.photos/600/220" alt="person" />
<h4>Person Six</h4>
<h4>#person6</h4>
<div class="overlay"></div>
</div>
<div><div class="black fill"></div></div>
<div>
<img class="thumbnail" src="https://picsum.photos/200/350" alt="person" />
<h4>Person Seven</h4>
<h4>#person7</h4>
<div class="overlay"></div>
</div>
<div>
<img class="thumbnail" src="https://picsum.photos/500/300" alt="person" />
<h4>Person Eight</h4>
<h4>#person8</h4>
<div class="overlay"></div>
</div>
<div><div class="tan fill"></div></div>
<div>
<img class="thumbnail" src="https://picsum.photos/250/250" alt="person" />
<h4>Person Nine</h4>
<h4>#Person9</h4>
<div class="overlay"></div>
</div>
<div>
<img class="thumbnail" src="https://picsum.photos/300/220" alt="person" />
<h4>Person Ten</h4>
<h4>#person10</h4>
<div class="overlay"></div>
</div>
</div>
Use height on the grid items. Moreover, the headings should be wrapped in a container and their default margins should be overwritten so that headings fit in container with image's height < 150px.
.grey {
background: #d9d9d9;
}
.tan {
background: #dccec8;
}
.light-brown {
background: #dc997d;
}
.brown {
background: #814a3d;
}
.black {
background: #000;
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(352px, 1fr));
grid-gap: 20px;
}
.grid>div {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
}
img {
max-width: 350px;
width: 350px;
}
.overlay {
position: absolute;
width: 350px;
height: fit-content;
background: rgba(0, 0, 0, 0.05);
bottom: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-content: center;
}
h4 {
text-transform: uppercase;
font-size: 26px;
color: #fff;
z-index: 9;
text-align: center;
margin: 0;
margin-bottom: 10px;
}
.fill {
max-width: 350px;
height: 100%;
width: 100%;
}
.grid-item {
height: fit-content;
height: -moz-fit-content;
}
<div class="grid">
<div class="grid-item">
<img class="thumbnail" src="https://picsum.photos/500/1000" alt="person" />
<div class="overlay">
<h4>Person One</h4>
<h4>#person1</h4>
</div>
</div>
<div>
<div class="tan fill"></div>
</div>
<div class="grid-item">
<img class="thumbnail" src="https://picsum.photos/1500/2000" alt="person" />
<div class="overlay">
<h4>Person TWO</h4>
<h4>#person2</h4>
</div>
</div>
<div>
<div class="black fill"></div>
</div>
<div class="grid-item">
<img class="thumbnail" src="https://picsum.photos/700/1500" alt="person" />
<div class="overlay">
<h4>Person 3</h4>
<h4>#person3</h4>
</div>
</div>
<div class="grid-item">
<img class="thumbnail" src="https://picsum.photos/400/100" alt="person" />
<div class="overlay">
<h4>Person four</h4>
<h4>#person4</h4>
</div>
</div>
<div class="grid-item">
<img class="thumbnail" src="https://picsum.photos/500/200" alt="person" />
<div class="overlay">
<h4>Person Five</h4>
<h4>#pesron5</h4>
</div>
</div>
<div>
<div class="light-brown fill"></div>
</div>
<div>
<div class="brown fill"></div>
</div>
<div class="grid-item">
<img class="thumbnail" src="https://picsum.photos/600/220" alt="person" />
<div class="overlay">
<h4>Person Six</h4>
<h4>#person6</h4>
</div>
</div>
<div>
<div class="black fill"></div>
</div>
<div class="grid-item">
<img class="thumbnail" src="https://picsum.photos/200/150" alt="person" />
<div class="overlay">
<h4>Person Seven</h4>
<h4>#person7</h4>
</div>
</div>
<div class="grid-item">
<img class="thumbnail" src="https://picsum.photos/500/300" alt="person" />
<div class="overlay">
<h4>Person Eight</h4>
<h4>#person8</h4>
</div>
</div>
<div>
<div class="tan fill"></div>
</div>
<div class="grid-item">
<img class="thumbnail" src="https://picsum.photos/250/250" alt="person" />
<div class="overlay">
<h4>Person Nine</h4>
<h4>#Person9</h4>
</div>
</div>
<div class="grid-item">
<img class="thumbnail" src="https://picsum.photos/300/220" alt="person" />
<div class="overlay">
<h4>Person Ten</h4>
<h4>#person10</h4>
</div>
</div>
</div>
5.30.20 EDIT: Works on stackoverflows code snippet viewer but not on chrome or any html hosting. Here's the hosted file:
https://unholytool.htmlpasta.com/
wondering what's going on.
Here's an image to show what I'm talking about
https://i.stack.imgur.com/ggQcF.png
So I'm new to CSS and I'm not finding a lot of luck on google.
I have a media query set up that works great for mobile, however I can't seem to get it to display correctly on different monitor sizes.
On very wide screens it works well and displays four columns and the left sidebar.
However as the screen shrinks it displays a wonky view of three images on one row and one image on the next row
This is my current display with the answer below
body {
font-family: 'Montserrat';
font-size: 18px;
}
.body {
margin-left: 5%;
margin-right: 5%;
}
.logo {
display: block;
margin-left: auto;
margin-right: auto;
width: 400px height:90px max-width: 30%;
}
.hero {
display: block;
margin-left: auto;
margin-right: auto;
max-width: 100%;
}
.leftsidebar {
display: none;
}
.row {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}
.column {
margin-left: 1%;
margin-right: 1%;
}
#media screen and (min-width: 1050px) {
.row {
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: center;
}
.column {
flex: 1 1 auto;
}
.container {
display: grid;
}
.leftsidebar {
grid-column: 1;
display: inherit;
}
.products {
grid-column: 2;
}
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Our Catalog</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel='stylesheet'>
<style>
</style>
</head>
<body class="body">
<div>
<img class="logo" src="logoimg.jpeg">
</div>
<hr class="divider">
<div>
<picture>
<source media="(max-width: 799px)" class="hero" srcset="heroimg1.jpeg, heroimg2.jpeg">
<img class="hero" src="heroimg1.jpeg">
</picture>
</div>
<hr class="divider">
<div class="container">
<div class="leftsidebar">
<img src="img.jpeg" />
</div>
<div class="products">
<div class="row">
<div class="column">
<img src="img.jpeg" />
<h1> product</h1>
<p>$100</p>
</div>
<div class="column">
<img src="img.jpeg" />
<h1> product</h1>
<p>$100</p>
</div>
<div class="column">
<img src="img.jpeg" />
<h1> product</h1>
<p>$100</p>
</div>
<div class="column">
<img src="img.jpeg" />
<h1> product</h1>
<p>$100</p>
</div>
</div>
<div class="row">
<div class="column">
<img src="img.jpeg" />
<h1>product</h1>
<p>$100</p>
</div>
<div class="column">
<img src="img.jpeg" />
<h1> product</h1>
<p>$100</p>
</div>
<div class="column">
<img src="img.jpeg" />
<h1> product</h1>
<p>$100</p>
</div>
<div class="column">
<img src="img.jpeg" />
<h1> product</h1>
<p>$100</p>
</div>
</div>
<div class="row">
<div class="column">
<img src="img.jpeg" />
<h1> product</h1>
<p>$100</p>
</div>
<div class="column">
<img src="img.jpeg" />
<h1> product</h1>
<p>$100</p>
</div>
<div class="column">
<img src="img.jpeg" />
<h1> product</h1>
<p>$100</p>
</div>
<div class="column">
<img src="img.jpeg" />
<h1> product</h1>
<p>$100</p>
</div>
</div>
<div class="row">
<div class="column">
<img src="img.jpeg" />
<h1> product</h1>
<p>$100</p>
</div>
<div class="column">
<img src="img.jpeg" />
<h1> product</h1>
<p>$100</p>
</div>
<div class="column">
<img src="img.jpeg" />
<h1> product</h1>
<p>$100</p>
</div>
<div class="column">
<img src="img.jpeg" />
<h1> product</h1>
<p>$100</p>
</div>
</div>
</div>
</div>
<hr class="divider">
<br>
<h3>Return Policy | Shipping Policy | Privacy Policy | About Us | Our Cause</h3>
<br>
<hr class="divider">
</body>
</html>
I've tried a lot of stuff, including using both flex-shrink and flex-grow properties on all elements,
messing with height and width attributes setting them between auto and a %.
and setting a % with the flex property
Any ideas? I'm trying to keep javascript to a minimum so CSS only.
I have configured your flexbox CSS and it should work as per your requirement. I have also added </div> for every <div class="column">
.row {
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: center;
}
.column {
flex: 1 1 auto;
}
<div class="row">
<div class="column">
<img src="image.jpeg" />
<h1> text</h1>
<p>text</p>
</div>
<div class="column">
<img src="image.jpeg" />
<h1> text</h1>
<p>text</p>
</div>
<div class="column">
<img src="image.jpeg" />
<h1>text</h1>
<p>text</p>
</div>
<div class="column">
<img src="image.jpeg" />
<h1>text</h1>
<p>text</p>
</div>
I'm stuck with one problem I don't know how to solve.
I have a grid system with 18 items/boxes in the same size. I need to delete 4 items/boxes and make one big item/box of it.
Please check wireframe below. This is how I want it to look :)
.grid_big {
margin-bottom: 200px;
}
.grid_big .grid_item {
width: 16.6%;
display: inline-block;
float: left;
}
.grid_big .grid_item img {
width: 100%;
border: 1px solid;
/* visibility: hidden; */
}
.grid_big .grid_item .grid_content {
margin: 20px;
}
<div class="grid_big">
<div class="grid_item">
<div class="grid_content">
<img src="https://www.axiapayments.com/wp-content/uploads/2014/09/placeholder-square.jpg" alt="">
</div>
</div>
<div class="fixfloat"></div>
</div>
( grid item + grid content x 18 )
You can do something like this with the Grid, which is ideal for this type of a task:
* {box-sizing: border-box}
.grid_big {
display: grid;
grid-template: repeat(3, 1fr) / repeat(6, 1fr); /* grid-template-rows / grid-template-columns */
grid-gap: 10px; /* grid-row-gap / grid-column-gap */
}
/* grab the 7th one and make it span 2 rows & columns */
.grid_item:nth-child(7){
grid-row: span 2;
grid-column: span 2;
}
img {
display: block; /* removes bottom margin/whitespace */
width: 100%;
border: 1px solid;
}
<div class="grid_big">
<div class="grid_item">
<div class="grid_content">
<img src="https://www.axiapayments.com/wp-content/uploads/2014/09/placeholder-square.jpg" alt="">
</div>
</div>
<div class="grid_item">
<div class="grid_content">
<img src="https://www.axiapayments.com/wp-content/uploads/2014/09/placeholder-square.jpg" alt="">
</div>
</div>
<div class="grid_item">
<div class="grid_content">
<img src="https://www.axiapayments.com/wp-content/uploads/2014/09/placeholder-square.jpg" alt="">
</div>
</div>
<div class="grid_item">
<div class="grid_content">
<img src="https://www.axiapayments.com/wp-content/uploads/2014/09/placeholder-square.jpg" alt="">
</div>
</div>
<div class="grid_item">
<div class="grid_content">
<img src="https://www.axiapayments.com/wp-content/uploads/2014/09/placeholder-square.jpg" alt="">
</div>
</div>
<div class="grid_item">
<div class="grid_content">
<img src="https://www.axiapayments.com/wp-content/uploads/2014/09/placeholder-square.jpg" alt="">
</div>
</div>
<div class="grid_item">
<div class="grid_content">
<img src="https://www.axiapayments.com/wp-content/uploads/2014/09/placeholder-square.jpg" alt="">
</div>
</div>
<div class="grid_item">
<div class="grid_content">
<img src="https://www.axiapayments.com/wp-content/uploads/2014/09/placeholder-square.jpg" alt="">
</div>
</div>
<div class="grid_item">
<div class="grid_content">
<img src="https://www.axiapayments.com/wp-content/uploads/2014/09/placeholder-square.jpg" alt="">
</div>
</div>
<div class="grid_item">
<div class="grid_content">
<img src="https://www.axiapayments.com/wp-content/uploads/2014/09/placeholder-square.jpg" alt="">
</div>
</div>
<div class="grid_item">
<div class="grid_content">
<img src="https://www.axiapayments.com/wp-content/uploads/2014/09/placeholder-square.jpg" alt="">
</div>
</div>
<div class="grid_item">
<div class="grid_content">
<img src="https://www.axiapayments.com/wp-content/uploads/2014/09/placeholder-square.jpg" alt="">
</div>
</div>
<div class="grid_item">
<div class="grid_content">
<img src="https://www.axiapayments.com/wp-content/uploads/2014/09/placeholder-square.jpg" alt="">
</div>
</div>
<div class="grid_item">
<div class="grid_content">
<img src="https://www.axiapayments.com/wp-content/uploads/2014/09/placeholder-square.jpg" alt="">
</div>
</div>
<div class="grid_item">
<div class="grid_content">
<img src="https://www.axiapayments.com/wp-content/uploads/2014/09/placeholder-square.jpg" alt="">
</div>
</div>
</div>
Grid (grid-template-areas) might solve your problem.
I'm using Bootstrap4. If I do responsive for mansory style gallery with img-fluid tag. For example, the second image is so long(as height) and there is a so much space with other images. How can I do this gallery like these for example tumblr or pexels.com ?
<div class="row">
<div class="col-md-4">
<img class="img-fluid" src="https://d1p5m9g4zcqpp8.cloudfront.net/Photos/popular/buffalo-nature-animals-animal-green.jpg">
</div>
<div class="col-md-4">
<img class="img-fluid" src="https://pixellous.imgix.net/animals/africa-african-animal-cat-41315.jpeg">
</div>
<div class="col-md-4">
<img class="img-fluid" src="https://d1p5m9g4zcqpp8.cloudfront.net/Photos/popular/landscape-dark-view-nature.jpg">
</div>
<div class="col-md-4">
<img class="img-fluid" src="https://d1p5m9g4zcqpp8.cloudfront.net/Photos/popular/lifts-technology-lift-black-and-white.jpg">
</div>
<div class="col-md-4">
<img class="img-fluid" src="https://d1p5m9g4zcqpp8.cloudfront.net/Photos/popular/man-black-and-white-excited.jpg">
</div>
<div class="col-md-4">
<img class="img-fluid" src="https://d1p5m9g4zcqpp8.cloudfront.net/Photos/popular/spices-salt-pepper-spoon.jpg">
</div>
</div>
I did like the answer but I need lazy load on this. I've tried so much but I could do this together please help!
#media only screen and (min-width: 1100px) {
.masonry {
-moz-column-count: 4;
-webkit-column-count: 4;
column-count: 4;
}
}
#media only screen and (min-width: 900px) {
.masonry {
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
}
}
#media only screen and (min-width: 700px) {
.masonry {
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
}
}
.masonry {
margin: 1.5em 0;
padding: 0;
-moz-column-gap: 1.5em;
-webkit-column-gap: 1.5em;
column-gap: 1.5em;
font-size: .85em;
}
.item {
background-color: #eee;
display: inline-block;
margin: 0 0 1em;
width: 100%;
}
.item img {
max-width: 100%;
height: auto;
display: block;
}
<div class="masonry">
<div class="item">
<img class="img-fluid" src="https://d1p5m9g4zcqpp8.cloudfront.net/Photos/popular/buffalo-nature-animals-animal-green.jpg">
</div>
<div class="item">
<img class="img-fluid" src="https://pixellous.imgix.net/animals/africa-african-animal-cat-41315.jpeg">
</div>
<div class="item">
<img class="img-fluid" src="https://d1p5m9g4zcqpp8.cloudfront.net/Photos/popular/landscape-dark-view-nature.jpg">
</div>
<div class="item">
<img class="img-fluid" src="https://d1p5m9g4zcqpp8.cloudfront.net/Photos/popular/lifts-technology-lift-black-and-white.jpg">
</div>
<div class="item">
<img class="img-fluid" src="https://d1p5m9g4zcqpp8.cloudfront.net/Photos/popular/man-black-and-white-excited.jpg">
</div>
<div class="item">
<img class="img-fluid" src="https://d1p5m9g4zcqpp8.cloudfront.net/Photos/popular/spices-salt-pepper-spoon.jpg">
</div>
</div>
Pure CSS version of responsive masonry, no plugin or script used.
#media only screen and (min-width: 1100px) {
.masonry {
-moz-column-count: 4;
-webkit-column-count: 4;
column-count: 4;
}
}
#media only screen and (min-width: 900px) {
.masonry {
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
}
}
#media only screen and (min-width: 700px) {
.masonry {
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
}
}
.masonry {
margin: 1.5em 0;
padding: 0;
-moz-column-gap: 1.5em;
-webkit-column-gap: 1.5em;
column-gap: 1.5em;
font-size: .85em;
}
.item {
background-color: #eee;
display: inline-block;
margin: 0 0 1em;
width: 100%;
}
.item img {
max-width: 100%;
height: auto;
display: block;
}
<div class="masonry">
<div class="item">
<img class="img-fluid" src="https://d1p5m9g4zcqpp8.cloudfront.net/Photos/popular/buffalo-nature-animals-animal-green.jpg">
</div>
<div class="item">
<img class="img-fluid" src="https://pixellous.imgix.net/animals/africa-african-animal-cat-41315.jpeg">
</div>
<div class="item">
<img class="img-fluid" src="https://d1p5m9g4zcqpp8.cloudfront.net/Photos/popular/landscape-dark-view-nature.jpg">
</div>
<div class="item">
<img class="img-fluid" src="https://d1p5m9g4zcqpp8.cloudfront.net/Photos/popular/lifts-technology-lift-black-and-white.jpg">
</div>
<div class="item">
<img class="img-fluid" src="https://d1p5m9g4zcqpp8.cloudfront.net/Photos/popular/man-black-and-white-excited.jpg">
</div>
<div class="item">
<img class="img-fluid" src="https://d1p5m9g4zcqpp8.cloudfront.net/Photos/popular/spices-salt-pepper-spoon.jpg">
</div>
</div>
Just add masonry to the page and configure it with itemSelector: '.col-md-4'
$('.row').masonry(function() {
itemSelector: '.col-md-4'
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.1.1/masonry.pkgd.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet">
<div class="row">
<div class="col-md-4">
<img class="img-fluid" src="https://d1p5m9g4zcqpp8.cloudfront.net/Photos/popular/buffalo-nature-animals-animal-green.jpg">
</div>
<div class="col-md-4">
<img class="img-fluid" src="https://pixellous.imgix.net/animals/africa-african-animal-cat-41315.jpeg">
</div>
<div class="col-md-4">
<img class="img-fluid" src="https://d1p5m9g4zcqpp8.cloudfront.net/Photos/popular/landscape-dark-view-nature.jpg">
</div>
<div class="col-md-4">
<img class="img-fluid" src="https://d1p5m9g4zcqpp8.cloudfront.net/Photos/popular/lifts-technology-lift-black-and-white.jpg">
</div>
<div class="col-md-4">
<img class="img-fluid" src="https://d1p5m9g4zcqpp8.cloudfront.net/Photos/popular/man-black-and-white-excited.jpg">
</div>
<div class="col-md-4">
<img class="img-fluid" src="https://d1p5m9g4zcqpp8.cloudfront.net/Photos/popular/spices-salt-pepper-spoon.jpg">
</div>
</div>
And if you want to get rid of the horizontal padding in the cells that creates a gutter between the images, you could always just not use bootstrap .col classes there, or you can add .nowrap to the parent .row and remove the padding with CSS like .nopad > div { padding: 0; }
$('.row').masonry(function() {
itemSelector: '.col-md-4'
});
.nopad > div {
padding: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.1.1/masonry.pkgd.min.js"></script>
<div class="row nopad">
<div class="col-md-4">
<img class="img-fluid" src="https://d1p5m9g4zcqpp8.cloudfront.net/Photos/popular/buffalo-nature-animals-animal-green.jpg">
</div>
<div class="col-md-4">
<img class="img-fluid" src="https://pixellous.imgix.net/animals/africa-african-animal-cat-41315.jpeg">
</div>
<div class="col-md-4">
<img class="img-fluid" src="https://d1p5m9g4zcqpp8.cloudfront.net/Photos/popular/landscape-dark-view-nature.jpg">
</div>
<div class="col-md-4">
<img class="img-fluid" src="https://d1p5m9g4zcqpp8.cloudfront.net/Photos/popular/lifts-technology-lift-black-and-white.jpg">
</div>
<div class="col-md-4">
<img class="img-fluid" src="https://d1p5m9g4zcqpp8.cloudfront.net/Photos/popular/man-black-and-white-excited.jpg">
</div>
<div class="col-md-4">
<img class="img-fluid" src="https://d1p5m9g4zcqpp8.cloudfront.net/Photos/popular/spices-salt-pepper-spoon.jpg">
</div>
</div>