Why bother creating a portfolio from A to Z when there are dozens (hundreds?) ready to use and installable in a few clicks?
It's true that the question deserves to be asked because I could probably have put this part online on my site in a few tens of minutes and thus, take advantage of my weekend to rest. But let's try to see things from another angle.
- Designing and creating is learning. Creating a Masonry portfolio in CSS is probably not the most complicated thing I've done so far. Admittedly, this requires paying attention to a few details so that the whole thing is perfectly functional on all modern browsers, but nothing very complicated, as you will see later. By installing an extension (or a plugin), you will surely save a lot of time but you won't learn... anything.
- Light is right. The motto of Colin Chapman (the creator of the Lotus car brand) is perfectly applicable to the web. An installed extension represents dozens of files and folders that will burden your site and will need to be kept up to date regularly. The portfolio that I propose here is lighter than a feather: 60 lines of CSS!
- A perfectly adapted design. The Masonry portfolio in CSS that you will learn to create is fully customizable, according to your needs. If you installed an extension, are you sure that the rendering will be perfectly adapted to your website? Can you modify and adapt it easily?
Create a Masonry portfolio in CSS
There are several portfolio styles and the one we are going to create here is Masonry. In this configuration, the images pile up on top of each other trying to fill all the available space. If you're familiar with Pinterest, you see the effect.
Typically, a portfolio has an option to click images to display them in a modal window. We will use this possibility in this tutorial.
Some portfolios also have a filter system (to sort images from the same category, for example) but since this functionality requires the use of JavaScript, we will skip it in this case.
If you haven't seen it yet, here's what a Masonry-type grid looks like:
Source : Reddit
What do you need to create a Masonry portfolio in CSS
- A text editor: any IDE is suitable here for writing HTML and CSS. If you don't have one installed on your computer yet, I recommend Notepad++ which is free and perfectly sufficient to follow this tutorial.
- Material Design Bootstrap: it is with this framework that we will create our Masonry portfolio. Why this framework? Because it's free, because it's very comprehensive and easy to learn, even by novices. You can download the free version here.
The HTML Markup a Masonry portfolio in CSS
For the moment, we start by laying the foundations of the structure. This boils down to a first div which contains as many other divs as there are images to display. Which gives us this:
<div class="masonry">
<div class="item">
<img src="/url/de/mon/image1.jpg" class="img-fluid" alt="">
</div>
<div class="item">
<img src="/url/de/mon/image2.jpg" class="img-fluid" alt="">
</div>
<div class="item">
<img src="/url/de/mon/image3.jpg" class="img-fluid" alt="">
</div>
<div class="item">
<img src="/url/de/mon/image4.jpg" class="img-fluid" alt="">
</div>
<div class="item">
<img src="/url/de/mon/image5.jpg" class="img-fluid" alt="">
</div>
<div class="item">
<img src="/url/de/mon/image6.jpg" class="img-fluid" alt="">
</div>
<div class="item">
<img src="/url/de/mon/image7.jpg" class="img-fluid" alt="">
</div>
<div class="item">
<img src="/url/de/mon/image8.jpg" class="img-fluid" alt="">
</div>
</div>Of course, you have noted that the parent div already contains a class Masonry and that each child div has a class item.
That makes for a great transition to... CSS! a Masonry portfolio in CSS
The CSS
The beauty of CSS is that all it takes is a few instructions to turn it all into an elegant image gallery.
In this example, we are going to display our images in 3 columns, taking great care to have a perfectly respected display on the different web browsers. To do this simply, we are going to use the column-count property, which will give us this:
.masonry {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
-webkit-column-gap: 1em;
-moz-column-gap: 1em;
column-gap: 1em;
margin: 1.5em;
padding: 0;
-moz-column-gap: 1.5em;
-webkit-column-gap: 1.5em;
column-gap: 1.5em;
font-size: .85em;
}If you rather want to have a 4-column display, you can see immediately which rows you need to modify. Simple, isn't it!
It's really not more complicated than that and these few lines will be enough (well, almost) to have a very nice Mansory portfolio.
For the record, remember that -webkit concerns browsers derived from Chromium (Opera, Chrome, Brave, Safari, etc) and that -moz concerns the Mozilla Firefox browser. a Masonry portfolio in CSS
As we are in the 21st century, we also want our portfolio to be responsive to display perfectly on all devices. In this case, we will arbitrarily choose 4 screen resolutions: less than 320 px (display on one column), from 321 px to 768 px (display on 2 columns), from 769 px to 1200 px (display on 2 columns) and from 1201 px (display on 3 columns). Naturally, you are free to modify these values if you wish, for example, to have a 4-column display on the largest screens.
@media only screen and (max-width: 320px) {
.masonry {
-moz-column-count: 1;
-webkit-column-count: 1;
column-count: 1;
}
}
@media only screen and (min-width: 321px) and (max-width: 768px){
.masonry {
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
}
}
@media only screen and (min-width: 769px) and (max-width: 1200px){
.masonry {
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
}
}
@media only screen and (min-width: 1201px) {
.masonry {
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
}
}Admit that CSS is still very easy to read. a Masonry portfolio in CSS
Now that the formatting of the structure is complete, we only have to take care of the images!
Here, our images will be displayed one below the other (in columns, therefore) and the CSS will take care of distributing them over the number of columns that we have decided. So you don't have to worry about the order of your images or the overall formatting of your Masonry portfolio in CSS at all.
For better visual rendering, care should also be taken to have identical spacing between the columns and between the images and that the images occupy all the available space.
These will be displayed on a white background to mimic a frame. To emphasize these frames, I used the z-depth-1 CSS class to apply a drop shadow to them.
Let's now translate all of this into CSS, which gives us:
.item {
display: inline-block;
background: #fff;
padding: 1em;
margin: 0 0 1.5em;
width: 100%;
-webkit-transition:1s ease all;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.item img{max-width:100%;}There you go, we have already finished the first part of this tutorial. Now let's move on to the last part about opening images in a modal window.
The popup window a Masonry portfolio in CSS
For the images to be clickable, we will have to apply a <a> link to them. Quite simply.
<div class="item z-depth-1">
<a data-toggle="modal" data-target="#RefImage1">
<img src="/url/de/mon/image1.jpg" class="img-fluid" alt="">
</a>
</div>To our <a> link, I added Bootstrap's data-toggle and data-target attributes. These attributes allow respectively to open the modal window and to indicate which Bootstrap window should open. If you know the operating principle of anchors, it is exactly the same that is mobilized here.
Now let's build the content of our modal window. a Masonry portfolio in CSS
In this example, I split the window into two equal parts: an image on one side and some text on the other. It's up to you to swap the text and the image, to have only one image, to have only text or whatever you want.
<div class="row">
<!-- Left side -->
<div class="col-md-6 py-5 pl-5">
<!-- Project presentation -->
<h5 class="font-weight-normal mb-3">That's a title</h5>
<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ornare, tortor in accumsan imperdiet, diam felis pellentesque neque, et feugiat eros augue quis leo. Aliquam eu malesuada dui, eget fermentum erat. Etiam ante est fringilla et.</p>
<!-- Features -->
<ul class="list-unstyled font-small mt-5 mb-0">
<li>
<p class="text-uppercase mb-2"><strong>Adipiscing elit</strong></p>
<p class="text-muted mb-4">Etiam ante est fringilla et</p>
</li>
<li>
<p class="text-uppercase mb-2"><strong>Lorem ipsum dolor</strong></p>
<p class="text-muted mb-4">Etiam ante est fringilla et</p>
</li>
<li>
<p class="text-uppercase mb-2"><strong>Pellentesque neque</strong></p>
<p class="text-muted mb-4">Etiam ante est fringilla et</p>
</li>
</ul>
</div>
<!-- Right side -->
<div class="col-md-6">
<div class="view rounded-right">
<img class="img-fluid" src="/url/to/my/image1.jpg" alt="">
</div>
</div>
</div>Explanations a Masonry portfolio in CSS
Here we simply use the Bootstrap's grid to create our two columns with first row and then two col-md-6.
For the left part (the one containing the text), I applied a padding of 5 at the top, left and bottom: py-5 pl-5. This will make an inner margin which will give space to the content.
The formatting of the text is up to you, this is just an example of what is possible with the CSS classes of the Material Design Bootstrap framework.
For the right part (the one containing the image), I added a rounded-right class to slightly round the right corners of the image.
If we display a modal window, we must give the possibility to the user to be able to simply close it. For this, we will add a button (ie, a cross displayed with the symbol ×) in the upper right corner of our window.
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>Explanations a Masonry portfolio in CSS
Again, we use Bootstrap attributes to indicate how the object should react.
Be careful to ensure that the cross symbol (where the user must click to close the window) is encoded correctly.
Finally, to position the button in the right place, you have to add a CSS class close here:
button.close {
position: absolute;
right: 0;
z-index: 2;
padding-right: 1rem;
padding-top: .6rem;
}We just have to add the structure of our window using the Modal Bootstrap 4 component. a Masonry portfolio in CSS
Following the Bootstrap 4 documentation, building this step is a breeze. A copy / paste and some slight adaptations give us the following code:
<div class="modal fade" id="RefImage1" tabindex="-1" role="dialog" aria-labelledby="ExempleLabelFenetreModal" aria-hidden="true">
<div class="modal-dialog modal-lg modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-body p-0">
<!-- Content of the popup window -->
</div>
</div>
</div>
</div>Explanation
For the modal window to interact with the corresponding link, we enter the id (here: RefImage1) which must correspond to the content of the attribute data-target : #RefImage1
Et voilà, it's done! a Masonry portfolio in CSS
The HTML and CSS codes of this Masonry portfolio
The complete HTML Markup
<!-- HTML markup for the popup window to duplicate for each window -->
<div class="modal fade" id="RefImage1" tabindex="-1" role="dialog" aria-labelledby="ExempleLabelFenetreModal" aria-hidden="true">
<div class="modal-dialog modal-lg modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-body p-0">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<div class="row">
<div class="col-md-6 py-5 pl-5">
<h5 class="font-weight-normal mb-3">That's a title</h5>
<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ornare, tortor in accumsan imperdiet, diam felis pellentesque neque, et feugiat eros augue quis leo. Aliquam eu malesuada dui, eget fermentum erat. Etiam ante est fringilla et.</p>
<ul class="list-unstyled font-small mt-5 mb-0">
<li>
<p class="text-uppercase mb-2"><strong>Adipiscing elit</strong></p>
<p class="text-muted mb-4">Etiam ante est fringilla et</p>
</li>
<li>
<p class="text-uppercase mb-2"><strong>Lorem ipsum dolor</strong></p>
<p class="text-muted mb-4">Etiam ante est fringilla et</p>
</li>
<li>
<p class="text-uppercase mb-2"><strong>Pellentesque neque</strong></p>
<p class="text-muted mb-4">Etiam ante est fringilla et</p>
</li>
</ul>
</div>
<div class="col-md-6">
<div class="view rounded-right">
<img class="img-fluid" src="/url/to/my/image1.jpg" alt="">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Masonry Gallery -->
<div class="masonry">
<!-- HTML markup for an image - à duplicate it for each image -->
<div class="item z-depth-1">
<a data-toggle="modal" data-target="#RefImage1">
<img src="/url/to/my/image1.jpg" class="img-fluid" alt="">
</a>
</div>
</div>The complete CSS code a Masonry portfolio in CSS
/* Masonry Gallery */
.masonry {
-webkit-column-count: 3;
-moz-column-count:3;
column-count: 3;
-webkit-column-gap: 1em;
-moz-column-gap: 1em;
column-gap: 1em;
margin: 1.5em;
padding: 0;
-moz-column-gap: 1.5em;
-webkit-column-gap: 1.5em;
column-gap: 1.5em;
font-size: .85em;
}
.item {
display: inline-block;
background: #fff;
padding: 1em;
margin: 0 0 1.5em;
width: 100%;
-webkit-transition:1s ease all;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.item img{max-width:100%;}
button .close {
position: absolute;
right: 0;
z-index: 2;
padding-right: 1rem;
padding-top: .6rem;
}
@media only screen and (max-width: 320px) {
.masonry {
-moz-column-count: 1;
-webkit-column-count: 1;
column-count: 1;
}
}
@media only screen and (min-width: 321px) and (max-width: 768px){
.masonry {
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
}
}
@media only screen and (min-width: 769px) and (max-width: 1200px){
.masonry {
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
}
}
@media only screen and (min-width: 1201px) {
.masonry {
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
}
}Finally, to complete the realization of this Masonry portfolio in CSS, I applied the grayscale property so that the images are displayed in black in white and that they are colored when hovering over the mouse. Test it on the homepage of that site!
Conclusion
Voilà, I hope that this exercise has helped you and that you will have the desire to implement it on your site in accordance with your needs.
Feel free to ask your questions (if you have any) in the comments below and share this tutorial with your networks.
