Hello! I am building a portfolio site using CSS grid. I am placing a lightbox link into the grid spaces and then I have the thumbnail image within that. I want the thumbnail image to cover the entire height of the grid space (and get cut off a little) so that the two images will be perfectly aligned. Is there a way to do this without setting the image as a background-image?
At the share link below, I have tried doing this with background-image and it looks great in the designer but looks completely jacked on the live site.
HI Chris I took a deeper dive into what you are doing and you need to relook at how grid works. I don’t know how many examples of work you are looking to have but the idea behind grid is you can stretch contend over a grid but for the simple example you built you need a grid of 1 row by 2 columns. I doubled it up to show how you could add another row
selecting HiDPI because the images you selected for your thumbnails are huge and when I first selected 100% on that image it ran down the height of the page
an it is responsive.
The number of grid boxes you were using were unecessary. Also your images are huge a good rule of thumb is to create an image up to twice the physical size you want to use on the site. They are easier to manipulate.
Neither of these lighboxes are using a background image, just the placeholder image in the lighbox widget.
You can similarily fix some of the spacing issues at the top of your site dealing in the same way. Your text is not fiting in your grid because you need to stretch the grid to fit the element.
from this point you can add rows to your gride fo instance if you want to reverse the layout of the second row and make it the opposite of the first. One thing I found when testing this is you need to make sure you are on the lightbox element and not the image element to shift the elements in grid.
I think there are some videos at the webflow university on grid that might be helpful.