Bernardo Belchior
I had some good luck integrating this tutorial with simple-react-lightbox just had to change around some of the CSS to account for the extra div it adds to the output:
.gallery > div {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 16vw;
grid-gap: 1em;
}
.gallery > div > * {
box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.2), 0 3px 20px 0 rgba(0, 0, 0, 0.19);
}
.gallery > div > :hover {
filter: drop-shadow(8px 8px 8px gray);
transition: all ease 0.5s;
cursor: pointer;
}
.gallery > div > :nth-child(6n + 3) {
grid-column: span 1;
grid-row: span 2;
}
.gallery > div > :nth-child(6n + 2),
.gallery > div > :nth-child(6n + 5),
.gallery > div > :nth-child(6n + 6) {
grid-column: span 2;
grid-row: span 2;
}
Ojonugwa Justice Alikali
Software development
Nice article, it was really helpful... though I noticed that onclick on any of the pictures on your personal blog it displays the image in modal view, how can that be achieved?