Hello friends, In this video, I’m creating how to make a masonry grid layout using HTML and CSS(Css3 column count, column gap property). Easy to use and easy to integrate. I am damn sure this article and video is very helpful to you. please share and subscribe to our learndesign youtube channel if you like our videos.
In this video and articles, I am going to create a simple masonry grid layout, and that too with the help of HTML and CSS. You must have seen on many website and videos how to make masonry grid layout with the help of HTML, CSS and JS but I will make masonry grid layout using only html and css, no JS. And it can be added to any website easily and in less time, without any dependencies and without any help.
I have created a masonry grid layout with the help of HTML and CSS only. First of all, I have created the structure in HTML (like we make layout of bootstrap grid using columns (col-md-4, col-md-3, etc), same way you need to create a layout in custom HTML) And you have to write the class in such a way that it is easy for you to understand and if someone sees your code then they will also like it. So you have to write a class like this, if you have any other name then you can also use that but here I have given class with the name of (.item).
You may also like
How to create personal portfolio website in html,css & jquery
Image hover effect using only HTML & CSS
How to create & add custom Loader on Website
Newsletter Form Interactive Effects In HTML, CSS & JS
Now coming to CSS and so I have a class called wrap in CSS, split it using the column-count and column gap css properties, and the middle is a bit wacky. After that, the class containing the item should be given 100% width and escape the css property. All you need to do is to have your masonry grid layout ready. After that you just have to give simple style according to your need like background color, border, box-shadow etc.
If you have seen the video, then you must have understood that even if it did not come, there is no problem, I have given the code of HTML and CSS in jsFiddle below. You can copy that code. When you copy this code, you will need two files, one index.html file in which to paste the html code and the other style.css file in which you have to copy the code.
Responsive Masonry Grid Layout Source Code
As I told you above this masonry grid layout, that I’ve made using only HTML and CSS, but you create using js, then I attach below the jquery plugin you can use it.
As you, people know that many js have to be added to make masonry layout but in this article, I have created this masonry grid layout only with the help of CSS which you can see above. I have also given its code.
I have taken only one main div in its HTML structure whose name is a wrap. And inside it, the div named item is taken (you can think of this item name div like a box) I have taken an image in this item name div and have written text in p tag below it. I have given its code below, which you can see.
After this I have written only a few lines in CSS and you can easily understand it and integrate it in any website. Inside this I have a class named wrap with margin: 30px; column-count: 4; column-gap: 30px; This property is of Ad. And in its child class ie item, I have width: 100%; break-inside: avoid; There are two main properties that you have to add. Just doing this thing will make your masonry grid layout. I have added its code below. And if you want to responsive to it, then you have to add media query in it according to you and inside it only column-count: 3 in the class named wrap; Have to add CSS property. According to the number of columns you want in it, you keep on reducing the column-count.
Friends, I will not attach its source code in the file because I have given all its code above, you can copy it in your file. And it is very simple because I have used only html and css in it, so you can do it in single file ie index.html also.
