I have been looking for an answer myself to implement dynamic Masonry layout and nothing worked for me properly so I had to develop my own algorithm for my blog page that support even IE11 and Edge browsers.
1. The grid layout should have the following structure:
<div class="grid-container">
<div class="grid-item">
<div class="grid-item-content"></div>
</div>
</div>
2. style the grid container:
.grid-container {
min-width: 70%;
max-width: 100%;
display: grid;
column-gap: 1rem;
grid-template-columns: repeat( auto-fit, minmax(22em , 1fr));
grid-auto-rows: 300px;
}
.grid-item {
height: fit-content;
/*add the rest of your desired styling properties*/
}
You can change the width of the container and assign it whatever value you want.
The other two important properties from the css snippet above are:
grid-template-columns to generate responsive grid items with minimum width of 22em and max width that equals the width of the grid container 1fr.grid-auto-rows property that, as the name suggests, gives rows height implicitly. for our masonry layout algorithm to work, I gave the minimum height value that a grid item in my case can have.
3. the following js algorithm will adjust the grid items after they have been loaded to achieve a masonry layout: ##
resizeAllGridItems() {
//calculate the grid container with
let gridWidth = document.getElementsByClassName("grid-container")[0].offsetWidth;
/*calculate the grid item width (the width should be the same for all grid items
because we used `repeat( auto-fit, minmax(22em , 1fr))` to generate our responsive
columns)*/
let gridItemWidth = document.getElementsByClassName("grid-item")[0].offsetWidth;
/*devide the with of the grid container by the with of the grid item item to get
the number of generated columns*/
let columnsNumber = ~~(gridWidth / gridItemWidth);
/*the second part of the algorithm with loop through all the generated grid items.
Starting with the second row, the grid item in that row will be given a `margin
-top` value that equals the height of the grid item situated right above it, minus
the value of `grid-auto-rows`. This way whenever there's an extra space, the grid
item below will have it's `margin-top` value adjusted to take the extra space.*/
let x = columnsNumber;
let colIdx = 0;
let columnsHeights = [0, 0, 0];
let tempColumnsHeights = [];
let allItems = document.getElementsByClassName("grid-item");
for(x; x<allItems.length; x++) {
let topItemHeight = columnsHeights[colIdx] + allItems[x - columnsNumber].offsetHeight;
allItems[x].style.marginTop = (topItemHeight - 300) + 'px';
tempColumnsHeights.push(topItemHeight - 300);
colIdx++;
/*move to the next row of grid items to adjust them if all the items of the
previous row are adjusted*/
if (colIdx === columnsNumber) {
colIdx = 0;
columnsHeights = tempColumnsHeights;
tempColumnsHeights = [];
}
}
}
That's it. Now you have a masonry layout that is made by adjusting the margin top of grid items programatically taking into consideration several variables like the value of auto rows, the height of grid items, their width and the width of the grid container.
I came across several articles that also explain other approaches and algorithms to implement masonry layout but they didn't work for me. This article from css-Trick explains a lot of methods to implement a masonry layout. However I already tried these two other methods but didn't work for me:
- the first adjusts the value of
grid-row-end according the height of the grid item and it's content to span the grid item by one or more rows.
- the second approach is using a third party library like Masonry.
Note if you're using grid items with image elements: I found this article that I tried that uses the imagesLoaded.js library. Using this library will make it possible to execute the algorithm after all the images are loaded. In my case I gave the images container a fixed height that way my articles' cards heights will be independent from the images it contains.
IE11 and Edge support
Use autoprefixer npm package which is a PostCSS plugin to parse CSS and add vendor prefixes to CSS rules using values from Can I Use. It is recommended by Google and used in Twitter and Alibaba. It add all necessary prefixes and parses your grid display properties for IE11 and edge. You can refer to this answer on how to enable grid support with autoprefixer since it's disabled by default: https://stackoverflow.com/a/61144097/8453311
