Responsive Masonry in CSS only

Developer
Olivier C
Size
3,823 Kb
Views
18,216
  1. Responsive Masonry in CSS only Previews
  2. Responsive Masonry in CSS only HTML Codes
  3. Responsive Masonry in CSS only CSS Codes
  4. Responsive Masonry in CSS only JS Codes

How do I make an responsive masonry in css only?

What is a responsive masonry in css only? How do you make a responsive masonry in css only? This script and codes were developed by Olivier C on 19 November 2022, Saturday.

Responsive Masonry in CSS only Previews
IQ Test

Responsive Masonry in CSS only - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Responsive Masonry in CSS only</title> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>Responsive Masonry with CSS column</h1>
<div class="intro"> <p>Browser compatibility, see: <a href="http://caniuse.com/#feat=multicolumn" target="_blank">Can I Use</a>.</p>
</div>
<div class="wrapper"> <div class="masonry"> <div> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque luctus non tellus nec egestas.</p> <p>Donec ornare, nibh nec lacinia efficitur, lectus dolor consequat sem, eu sagittis nisi lectus eget mi. Nulla non metus nulla.</p> </div> <div> <p>Nulla facilisi. Mauris vitae orci ullamcorper elit fringilla volutpat.</p> </div> <div> <p>Donec at efficitur augue. Duis ornare diam et tristique ullamcorper. Sed ullamcorper leo at ligula ultricies feugiat. Vivamus erat purus, blandit sit amet est sed, feugiat iaculis dolor.</p> </div> <div> <p>Aliquam erat volutpat. Nulla facilisi. Phasellus ac leo vel est ultricies faucibus. Sed id semper diam.</p> </div> <div> <p>Fusce eros mauris, congue vitae purus quis, suscipit semper metus.</p> </div> <div> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque luctus non tellus nec egestas.</p> <p>Donec ornare, nibh nec lacinia efficitur, lectus dolor consequat sem, eu sagittis nisi lectus eget mi. Nulla non metus nulla.</p> </div> <div> <p>Nulla facilisi. Mauris vitae orci ullamcorper elit fringilla volutpat.</p> </div> <div> <p>Donec at efficitur augue. Duis ornare diam et tristique ullamcorper. Sed ullamcorper leo at ligula ultricies feugiat. Vivamus erat purus, blandit sit amet est sed, feugiat iaculis dolor.</p> </div> <div> <p>Aliquam erat volutpat. Nulla facilisi. Phasellus ac leo vel est ultricies faucibus. Sed id semper diam.</p> </div> <div> <p>Fusce eros mauris, congue vitae purus quis, suscipit semper metus.</p> </div> <div> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque luctus non tellus nec egestas.</p> <p>Donec ornare, nibh nec lacinia efficitur, lectus dolor consequat sem, eu sagittis nisi lectus eget mi. Nulla non metus nulla.</p> </div> <div> <p>Nulla facilisi. Mauris vitae orci ullamcorper elit fringilla volutpat.</p> </div> <div> <p>Donec at efficitur augue. Duis ornare diam et tristique ullamcorper. Sed ullamcorper leo at ligula ultricies feugiat. Vivamus erat purus, blandit sit amet est sed, feugiat iaculis dolor.</p> </div> <div> <p>Aliquam erat volutpat. Nulla facilisi. Phasellus ac leo vel est ultricies faucibus. Sed id semper diam.</p> </div> <div> <p>Fusce eros mauris, congue vitae purus quis, suscipit semper metus.</p> </div> <div> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque luctus non tellus nec egestas.</p> <p>Donec ornare, nibh nec lacinia efficitur, lectus dolor consequat sem, eu sagittis nisi lectus eget mi. Nulla non metus nulla.</p> </div> <div> <p>Nulla facilisi. Mauris vitae orci ullamcorper elit fringilla volutpat.</p> </div> <div> <p>Donec at efficitur augue. Duis ornare diam et tristique ullamcorper. Sed ullamcorper leo at ligula ultricies feugiat. Vivamus erat purus, blandit sit amet est sed, feugiat iaculis dolor.</p> </div> <div> <p>Aliquam erat volutpat. Nulla facilisi. Phasellus ac leo vel est ultricies faucibus. Sed id semper diam.</p> </div> <div> <p>Fusce eros mauris, congue vitae purus quis, suscipit semper metus.</p> </div> <div> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque luctus non tellus nec egestas.</p> <p>Donec ornare, nibh nec lacinia efficitur, lectus dolor consequat sem, eu sagittis nisi lectus eget mi. Nulla non metus nulla.</p> </div> <div> <p>Nulla facilisi. Mauris vitae orci ullamcorper elit fringilla volutpat.</p> </div> <div> <p>Donec at efficitur augue. Duis ornare diam et tristique ullamcorper. Sed ullamcorper leo at ligula ultricies feugiat. Vivamus erat purus, blandit sit amet est sed, feugiat iaculis dolor.</p> </div> <div> <p>Aliquam erat volutpat. Nulla facilisi. Phasellus ac leo vel est ultricies faucibus. Sed id semper diam.</p> </div> <div> <p>Fusce eros mauris, congue vitae purus quis, suscipit semper metus.</p> </div> <div> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque luctus non tellus nec egestas.</p> <p>Donec ornare, nibh nec lacinia efficitur, lectus dolor consequat sem, eu sagittis nisi lectus eget mi. Nulla non metus nulla.</p> </div> <div> <p>Nulla facilisi. Mauris vitae orci ullamcorper elit fringilla volutpat.</p> </div> <div> <p>Donec at efficitur augue. Duis ornare diam et tristique ullamcorper. Sed ullamcorper leo at ligula ultricies feugiat. Vivamus erat purus, blandit sit amet est sed, feugiat iaculis dolor.</p> </div> <div> <p>Aliquam erat volutpat. Nulla facilisi. Phasellus ac leo vel est ultricies faucibus. Sed id semper diam.</p> </div> <div> <p>Fusce eros mauris, congue vitae purus quis, suscipit semper metus.</p> </div> <div> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque luctus non tellus nec egestas.</p> <p>Donec ornare, nibh nec lacinia efficitur, lectus dolor consequat sem, eu sagittis nisi lectus eget mi. Nulla non metus nulla.</p> </div> <div> <p>Nulla facilisi. Mauris vitae orci ullamcorper elit fringilla volutpat.</p> </div> <div> <p>Donec at efficitur augue. Duis ornare diam et tristique ullamcorper. Sed ullamcorper leo at ligula ultricies feugiat. Vivamus erat purus, blandit sit amet est sed, feugiat iaculis dolor.</p> </div> <div> <p>Aliquam erat volutpat. Nulla facilisi. Phasellus ac leo vel est ultricies faucibus. Sed id semper diam.</p> </div> <div> <p>Fusce eros mauris, congue vitae purus quis, suscipit semper metus.</p> </div> <div> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque luctus non tellus nec egestas.</p> <p>Donec ornare, nibh nec lacinia efficitur, lectus dolor consequat sem, eu sagittis nisi lectus eget mi. Nulla non metus nulla.</p> </div> <div> <p>Nulla facilisi. Mauris vitae orci ullamcorper elit fringilla volutpat.</p> </div> <div> <p>Donec at efficitur augue. Duis ornare diam et tristique ullamcorper. Sed ullamcorper leo at ligula ultricies feugiat. Vivamus erat purus, blandit sit amet est sed, feugiat iaculis dolor.</p> </div> <div> <p>Aliquam erat volutpat. Nulla facilisi. Phasellus ac leo vel est ultricies faucibus. Sed id semper diam.</p> </div> <div> <p>Fusce eros mauris, congue vitae purus quis, suscipit semper metus.</p> </div> <div> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque luctus non tellus nec egestas.</p> <p>Donec ornare, nibh nec lacinia efficitur, lectus dolor consequat sem, eu sagittis nisi lectus eget mi. Nulla non metus nulla.</p> </div> <div> <p>Nulla facilisi. Mauris vitae orci ullamcorper elit fringilla volutpat.</p> </div> <div> <p>Donec at efficitur augue. Duis ornare diam et tristique ullamcorper. Sed ullamcorper leo at ligula ultricies feugiat. Vivamus erat purus, blandit sit amet est sed, feugiat iaculis dolor.</p> </div> <div> <p>Aliquam erat volutpat. Nulla facilisi. Phasellus ac leo vel est ultricies faucibus. Sed id semper diam.</p> </div> <div> <p>Fusce eros mauris, congue vitae purus quis, suscipit semper metus.</p> </div> <div> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque luctus non tellus nec egestas.</p> <p>Donec ornare, nibh nec lacinia efficitur, lectus dolor consequat sem, eu sagittis nisi lectus eget mi. Nulla non metus nulla.</p> </div> <div> <p>Nulla facilisi. Mauris vitae orci ullamcorper elit fringilla volutpat.</p> </div> <div> <p>Donec at efficitur augue. Duis ornare diam et tristique ullamcorper. Sed ullamcorper leo at ligula ultricies feugiat. Vivamus erat purus, blandit sit amet est sed, feugiat iaculis dolor.</p> </div> <div> <p>Aliquam erat volutpat. Nulla facilisi. Phasellus ac leo vel est ultricies faucibus. Sed id semper diam.</p> </div> <div> <p>Fusce eros mauris, congue vitae purus quis, suscipit semper metus.</p> </div> <div> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque luctus non tellus nec egestas.</p> <p>Donec ornare, nibh nec lacinia efficitur, lectus dolor consequat sem, eu sagittis nisi lectus eget mi. Nulla non metus nulla.</p> </div> <div> <p>Nulla facilisi. Mauris vitae orci ullamcorper elit fringilla volutpat.</p> </div> <div> <p>Donec at efficitur augue. Duis ornare diam et tristique ullamcorper. Sed ullamcorper leo at ligula ultricies feugiat. Vivamus erat purus, blandit sit amet est sed, feugiat iaculis dolor.</p> </div> <div> <p>Aliquam erat volutpat. Nulla facilisi. Phasellus ac leo vel est ultricies faucibus. Sed id semper diam.</p> </div> <div> <p>Fusce eros mauris, congue vitae purus quis, suscipit semper metus.</p> </div> </div>
</div> <script src="js/index.js"></script>
</body>
</html>

Responsive Masonry in CSS only - Script Codes CSS Codes

.masonry { margin: 1.5rem 0; -webkit-column-gap: 1.5rem; -moz-column-gap: 1.5rem; column-gap: 1.5rem;
}
@media (min-width: 36.01rem) { .masonry { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; }
}
@media (min-width: 65.01rem) { .masonry { -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; }
}
@media (min-width: 90.01rem) { .masonry { -webkit-column-count: 4; -moz-column-count: 4; column-count: 4; }
}
.masonry > * { display: inline-block; width: 100%; margin: 0 0 1.5rem; padding: 0 1em; box-sizing: border-box;
}
body { margin: 1em; line-height: 1.67; font-family: 'Open Sans', Arial, Sans-serif; background: #333;
}
.wrapper { max-width: 90rem; margin: 3em auto;
}
a { text-decoration: none;
}
a:focus,
a:hover,
a:active { text-decoration: underline;
}
h1,
.intro p { text-align: center; color: Tan;
}
a { color: Peru;
}
.masonry > * { position: relative; color: #333; background-color: Peru; -webkit-transition: background-color 0.3s ease-in-out; transition: background-color 0.3s ease-in-out; border-radius: 0.3rem;
}
.masonry > :hover { background-color: Tan;
}
.masonry > p { counter-reset: div;
}
.masonry > * { counter-increment: div;
}
.masonry > * p:first-child::before { display: inline; content: counter(div) '/ ';
}

Responsive Masonry in CSS only - Script Codes JS Codes

// No js
Responsive Masonry in CSS only - Script Codes
Responsive Masonry in CSS only - Script Codes
Home Page Home
Developer Olivier C
Username olivier-c
Uploaded November 19, 2022
Rating 3
Size 3,823 Kb
Views 18,216
Do you need developer help for Responsive Masonry in CSS only?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Olivier C (olivier-c) Script Codes
Name
Graphs
TagSphere
Calendar
One Page Template HTML5
Full SVG
Space Invaders
Some problems caused by flexbox
Picture tag, srcset and sizes attributes
Signature
Arrow Scroll Top
Create amazing Facebook ads with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!