What is Masonry Layout? Masonry layout is when items of varying sizes are laid out so there aren't any uneven gaps. Usually, when items are in a grid view, they are either aligned row-wise, column-wise, or both. But in a masonry layout, even if there is a shorter element in a row or column, the next element will take up the space. How to achieve Masonry Layout? There are many ways to achieve this, but one of the best ways is to use and use the function. So let’s get started. grid-template-columns repeat() The grid-template-columns property In addition to explicit column sizing, one of the most valuable and practical aspects of CSS Grid is the ability to repeat columns until they are filled and then automatically place items in them. In particular, the option to specify the number of columns we want in the grid and then give the browser control of those columns' responsiveness results in fewer columns being displayed on smaller viewport sizes and more columns being displayed as the screen width increases. This is achieved by using the repeat() function and the auto-placement keywords. To summarize, the function allows us to repeat columns as many times as needed. For example, if we are creating a 12-columns grid, we can write the following: repeat() .grid {
   display: grid;

  /* define the number of grid columns */
  grid-template-columns: repeat(12, 1fr);
} By using the directive, the browser is instructed to divide the available space among the columns so that each one receives an equal share. That is, regardless of how large it is, the grid in this example will always have 12 columns. However, this is not good enough because the content will be too squeezed on smaller viewports. 1fr So we need to specify a minimum width for the columns, making sure they don’t get too narrow. We can do that by using the function. minmax() grid-template-columns: repeat(12, minmax(300px, 1fr)); But because of the way Grid functions, the row will overflow. We're explicitly instructing the browser to repeat the columns 12 times per row, so even if the viewport width is too small to fit them all with the new minimum width requirement, the column won't wrap into new rows. CSS To achieve wrapping, we can use the or keywords. auto-fit auto-fill grid-template-columns: repeat(auto-fit, minmax(300px,1fr)); By using these keywords, we instruct the browser to take care of element wrapping and column sizing for us, causing elements that would otherwise overflow to wrap into rows. This is how the grid looks now: But this is not the masonry layout. So how to achieve it? Let’s see. and property The grid-column grid-row The and properties specify the grid item's size and location within a grid layout. Thus, we are able to specify the width or height of a single grid item within the grid. And to do that, we can use the keyword. grid-column grid-row span To increase the width of the first grid item we can write: .grid-item: nth-child(1)
    {
        grid-column: span 2;
        grid-row: span 1;
    } The first grid cell will therefore span two columns and have the following appearance: Similarly, if we want to increase the height of the second grid item, we can write: .grid-item: nth-child(2)
    {
        grid-column: span 1;
        grid-row: span 2;
    } The second grid cell will therefore span two rows and have the following appearance: In a similar manner, if we span every grid item in the desired manner, we will obtain the following: However, if the number of grid items is excessive, it won't be possible to specify a precise height and width for each grid item. So instead, we can assign the values dynamically: .grid-item: nth-child(7n+1) {
        grid-column: span 2;
        grid-row: span 1;
    }

.grid-item: nth-child(7n+2) {
        grid-column: span 1;
        grid-row: span 2;
    }

.grid-item: nth-child(7n+4) {
        grid-column: span 1;
        grid-row: span 2;
    }

.grid-item: nth-child(7n+5) {
        grid-column: span 3;
        grid-row: span 1;
    } And here is the output: But is this enough? Let’s take it to the next level by adding some perspective. We can achieve this by adding perspective() and using the transform() property: .active
{
    transform: perspective(18cm) rotate(20deg);
    transform-style: preserve-3d; 
    transform-origin: left;
} Additionally, we have a menu bar that, when selected, switches the grid from a regular grid to one with perspective. We can use JavaScript for that: menu.onclick=()=>{
 grid.classList.toggle('active');
} And the final output is: Let me know in the comments below! Did you like this article? Want to know which is the most versatile JavaScript solution for data visualization? Read here: https://techvariable.com/blogs/the-most-versatile-js-solution-to-data-visualization-d3-js/

The code in this story is for educational purposes. The readers are solely responsible for whatever they build with it.

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

How to Build a Masonry Layout Using CSS

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

The Noonification: Top 10 CSS Performance Tips (11/14/2022)

100 Stories To Learn About Html5

10 Things You Probably Didn’t Know about Sass

10 Reasons To Use TailwindCSS In Your Next Project

10 Frontend Projects to Take Your Coding Skills to the Next Level

The Noonification: Top 10 CSS Performance Tips (11/14/2022)

100 Stories To Learn About Html5

10 Things You Probably Didn’t Know about Sass

10 Reasons To Use TailwindCSS In Your Next Project

10 Frontend Projects to Take Your Coding Skills to the Next Level

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps