This is a solution to the Galleria slideshow site challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Users should be able to:
- View the optimal layout for the app depending on their device's screen size
- See hover states for all interactive elements on the page
- Navigate the slideshow and view each painting in a lightbox
- desktop
- tablet
- mobile
- Solution URL: GitHub repo
- Live Site URL: vercel
At First, I thought I had to install some npm. But I came across a very clever solution (see below for the source): by dividing grid rows into a small fraction, and do some calculation (using the height of an image) to find how many rows certain image need to span.
But in my case, there's a problem:
By setting grid-template-rows: repeat(auto-fill, 5px), I didn't get every row height to be 5px as expected, but only the first row, and the other rows collaspe to fit the image. The above-mentioned solution doesn't seem to have this problem, I don't know if it's because it uses tailwind-CSS in that case (in my case, it's just pure CSS). But I learned that there's a property grid-auto-rows to set the height of the rows that are not explicitly set in grid-template-rows. And by setting grid-auto-rows: 5px, it works as I want.
But I came to another problem:
In the design of this challenge, each image has its own specific place in the grid layout, so that every column finishes neatly in the same row. But with the default placement, I didn't get that.
And then I got to learn the behavior of the grid layout that I've never realized before:
What I understood before is that the grid items place itself in the column consecutively, but it's actually not so. Rather, 'grid items place itself in the column that has the least rows occupied first', 'row' is the first priority, not 'column'. Anyway, I tried to fix that with grid-column. But then, I came to another problem:
By pushing certain grid item to the column that I wanted, I also pushed all the later grid items to later row (after the row where pushed grid item ends) as well, and leaving the earlier rows blank. How I solved this problem is just desperately trying all the grid property, by typing 'grid' and see what property that VS code suggests. And I saw grid-auto-flow, I didn't know what it's used for, but I tried that, and then tried some of its values, then it came to this value: grid-auto-flow: dense. And then everything worked as I wanted.
I researched more about grid-auto-flow, and what grid-auto-flow: dense does is that it places grid items to fill any holes in the grid. The value row dense also works as well.
I started this project because I wanted to try more advanced features of NextJS. But it turned out that the most challenging thing in this project is 'CSS'. I think I learn quite a lot.
- Example resource 1 - Playlist on how to build an image gallery.
- Frontend Mentor - @Wannika123
I have to thank Dave Gray, the teacher in the above-mentioned playlist.