I attempted to bring a unique design to life using CSS Grid. While initially exploring Isotope JS for the same layout, I encountered some difficulties. Eventually, I was able to achieve a close representation of the design through CSS grid.
There are a total of 7 dynamically generated items from a for loop. These items need to be arranged into 3 columns and 3 rows. The first two columns should contain two items each, while the last column should hold the remaining 3 items. Achieving the desired spacing in the first two columns proved challenging, especially with vertically aligning the items in the middle column.
For reference, here is an image depicting the layout I aim to implement: https://i.sstatic.net/CYIdT.png
Here is my current code attempt:
.pr-soft-masonry-layout {
display: grid;
grid-gap: 20px;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
align-items: center;
}
{/* Additional CSS rules */}