Pure CSS: Masonry Layout

Показать описание

Build masonry layouts with pure CSS in 3 simple steps. Using column-count, column-gap, and media queries, you can give your webpages that cool masonry effect, complete with auto-fitting blocks of content. A fast and easy method that works across browsers and devices.

Рекомендации по теме

Комментарии

This is brilliant. For the past few days I was cracking my brain over how to do something like this with grid or flexbox. Especially when the amount of images in your collection varies or is unknown this is more difficult than it seems. This is by far the simplest and most elegant solution. A grid layout may be more visually striking but leads to image cropping and aspect ratio''s are a pain in the ass. This is the best solution I've come across!

Ithicuss

thank you so much, sounds stupid but ive been looking at countless solutions in css grid and libraries for my react project, i decided to start from scratch and redo it this way. so much easier

imane

In the future I hope there will be a row based masonry with pure css as a complement to this column based version.

jenstornell

The code snippet for this tutorial is appended below; the illustrations of the planets used as placeholder images have been created by me and are free for most uses:

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Masonry Blocks</title>

<style>
body{
font-family: 'Avenir Next', sans-serif;
background: #191D21;
font-weight: 300;
font-size: 14px;
padding: 20px;
}

.masonryholder{
column-count: 4;
column-gap: 20px;
max-width: 1600px;
margin: 0 auto;
}

.masonryblocks{
display: inline-block;
background: #ebeded;
padding: 20px;
margin: 0 0 15px;
width: 100%;
box-sizing: border-box;
}

.masonryblocks img{
width: 100%;
}

@media screen and (max-width:768px){
.masonryholder{
column-count: 1;
}
}

@media screen and (min-width:769px){
.masonryholder{
column-count: 2;
}
}

@media screen and (min-width:1080px){
.masonryholder{
column-count: 3;
}
}

@media screen and (min-width:1200px){
.masonryholder{
column-count: 4;
}
}
</style>
</head>

<body>
<div class="masonryholder">

</div>
</body>
</html>

ArjunKhara

You can just use columns: 250px 4; and get responsive without media queries.

techtipsuk

Is there a way to make it so that the elements are ordered properly from the top to the bottom? What I mean is, at 1:27, the elements are not ordered correctly. The topmost elements as seen on screen are (1, 3, 5, 8), when it should be (1, 2, 3, 4), just as ordered in the HTML. Thanks!

eggvedeon

Like before the video even starts playing.

Shualam

My only problem with this masonry is that if the container had a lot more height then every item will be put in the first column without thinking about the others. How you do a masonry that focuses on filling the first row and then goes to the next one?

ElXavs

can you please do a video on carousel... please

blackpilledbuddha

Can i know how the voice over of your videos is made? Which technique you use to record that voice?. Thank you.

karunakarpatel

Hi can you please tell me which theme are you using?

HaxGuru

Drop Shadows don't work properly they cause alignment issues on mobile browsers.

techtipsuk

2nd card is coming down ni desktop, but my requirement is 2nd card should come right side in desktop and tablet. In mobile second 2nd card should come down

VishwaKumarKatta

I wrote the same code but column is 2. why?

freedom

Pure CSS: Masonry Layout

Pure CSS: Masonry Layout

CSS Tips & Tricks: Creating a Masonry Grid Layout with Pure CSS, No JavaScript Required

Pure CSS Masonry Grid Design | Quick Tutorial

Pure CSS Grid with Masonry Layout | CSS Masonry Grid

Masonry layout with CSS only!

How To Create a Responsive Image Grid (Masonry Layout) with HTML and CSS - Flexbox

Responsive Masonry Layout Using CSS | Image Gallery Masonry Layout Using Only CSS

Pure CSS Tutorial: Masonry Layout

How to Create CSS Masonry Layouts | FREE COURSE

Pure CSS Responsive Masonry Grid Layouts

Masonry Grid [ 12 Best CSS Masonry Layout Examples ]

Pure CSS Masonry Layout/Waterfall Layout

Easy Masonry Grid Layout Using Only HTML & CSS | Masonry Layout Using Only CSS Grid

Responsive Masonry Image Gallery Using Pure HTML & CSS Only

Pinterest layout style with CSS | CSS Only Masonry grid

Pure CSS 3 Masonry Grid Layout - CSS 3 Grid Layout / CSS Grids

CSS Masonry Layout Examples Using Html and Css | Css Masonary Layout | practical program

Pure CSS Responsive Masonry Gallery Layout || Masonry Image Card Gallery Using Media Queries

Masonry Layout with CSS only ! ! #Grid

Pure CSS Responsive Masonry Grid Layout using CSS Flexbox - No Plugin - Pure CSS

CSS Grid Masonry Layout || CSS Grid Layout-2020

Auto Responsive Masonry Layout for Gallery/Post using CSS only!

Material UI Tutorial #18 - React Masonry CSS (masonry layout)

CSS Masonry Layout. Simple CSS Tricks.