Streaming live at 10am (PST)

CSS Grid Question

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?


Here is my site Read-Only: https://preview.webflow.com/preview/vonburske-design?utm_source=vonburske-design&preview=7d1032c2cf1718e080af4bd7a1a44e06

Set your image height to 100% and it will take up the height of the container grid.
I think that is what you are asking about.

hope that helps

jeremy

That’s what I would have thought too but it just seems to stretch the image. I must be missing something really obvious here.

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.

Live Site:
https://vonburske-design-c7599f6fcf04d8cbc8deba.webflow.io/

Share Link:
https://preview.webflow.com/preview/vonburske-design-c7599f6fcf04d8cbc8deba?utm_source=vonburske-design-c7599f6fcf04d8cbc8deba&preview=6746d82e63a78533c0fed95e323047d1

Doesnt it have to stetch the image to fit? The image isnt the same height and the grid row aligns to the tallest element.

The other option is to edit the image so that it is the same height ratio.

I guess i dont understand what you are trying to do. Grid allows you to put things in boxes. But they fit in them.

One thought it you can make the image relative position. Scale it up and manually move it.

Do you have an example of what you are trying to do. Grid might not be the best option.

Always

Jeremy

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

Into that row I pulled in lightboxes

Then bound them to the images you selected


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

then I duplicated for the next row

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.

always
Jeremy

1 Like

Jeremy,

Thanks a ton for looking into this further. Just had to be a little smarter about how I was using grid. Thanks again!