Copy link to clipboard
Copied
Hi, I want to make a gallery page that is responsive but includes both portrait and landscape images (like the image attached) is there a way to achieve this without buying a plugin? The only way I figured to do it so far is to add individual classes to each image and then adjust the margins to get them in line, I'm going to have multiple pages like this and don't want to have to do this for each as it is incredibly time consuming. Any suggestions would be much appreciated!
Try the below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Masonry</title>
</head>
<body>
<style>
body {
}
img {
max-width: 100%;
display: block;
}
* {
box-sizing: border-box;
}
.masonry {
width: 80%;
margin: 0 auto;
column-count: 4;
column-gap: .5em;
}
@media screen and (max-width: 768px) {
.masonry {
width: 90%;
}
}
@media screen and (max-width: 480px) {
.masonry {
width: 100%;
}
}
.masonry_item {
margin: 0;
width: 100%;
}
.masonry_item img {
margin: 0 0 .5em 0;
}
@media screen and (max-width: 76
...Copy link to clipboard
Copied
Try the below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Masonry</title>
</head>
<body>
<style>
body {
}
img {
max-width: 100%;
display: block;
}
* {
box-sizing: border-box;
}
.masonry {
width: 80%;
margin: 0 auto;
column-count: 4;
column-gap: .5em;
}
@media screen and (max-width: 768px) {
.masonry {
width: 90%;
}
}
@media screen and (max-width: 480px) {
.masonry {
width: 100%;
}
}
.masonry_item {
margin: 0;
width: 100%;
}
.masonry_item img {
margin: 0 0 .5em 0;
}
@media screen and (max-width: 768px) {
.masonry {
column-count: 3;
}
}
@media screen and (max-width: 480px) {
.masonry {
column-count: 2;
}
}
@media screen and (max-width: 320px) {
.masonry {
column-count: 1;
}
}
}
</style>
<div class="masonry">
<div class="masonry_item">
<img src="https://source.unsplash.com/random/?nature" alt="Nature">
<img src="https://source.unsplash.com/random/?food" alt="Food">
<img src="https://source.unsplash.com/random/?business" alt="Business">
<img src="https://source.unsplash.com/random/?fashion" alt="Fashion">
<img src="https://source.unsplash.com/random/?animal" alt="Animal">
<img src="https://source.unsplash.com/random/?nature" alt="Nature">
<img src="https://source.unsplash.com/random/?people" alt="Food">
<img src="https://source.unsplash.com/random/?lion" alt="Business">
<img src="https://source.unsplash.com/random/?fruit" alt="Fashion">
<img src="https://source.unsplash.com/random/?architecture" alt="Animal">
<img src="https://source.unsplash.com/random/?water" alt="Nature">
<img src="https://source.unsplash.com/random/?transport" alt="Food">
<img src="https://source.unsplash.com/random/?shopping" alt="Business">
<img src="https://source.unsplash.com/random/?leaves" alt="Fashion">
<img src="https://source.unsplash.com/random/?elephant" alt="Animal">
</div>
</div>
</body>
</html>
Copy link to clipboard
Copied
While Osgood gave you the best pure CSS hack for a masonry grid, which your screen capture depicts, I thought I'd add that masonry grids are kind of unnatural things where web pages are concerned. So, if you can live without the faux masonry look, you can use CSS Flexbox to create a more readable grid:
Copy link to clipboard
Copied
This gallery is dynamically populated with images on the server with PHP code -- a huge time saver for large collections.
Alt-Web Demo :: Responsive Masonry Gallery
The CSS layout is similar to what osgood posted but it incorporates a Fancybox3 mobile-friendly viewer.
Fancybox3 costs $29 for a single commercial license. I think the options & user experience on mobile devices are worth the price.
https://fancyapps.com/fancybox/3/#license
Copy link to clipboard
Copied
and here is a true Dreamweaver plugin: