search

rachelandrew / cssgrid-ama

Ask me anything about CSS Grid Layout
328 stars 12 forks source link

Horizontally scrolling CSS grid for gallery #39

Closed sassquad closed 7 years ago

sassquad commented 7 years ago

Hi Rachel,

Thanks for creating this AMA, it's been very useful to me.

I've been using CSS Grid for only a week or so, having followed yours and others postings about the subject since earlier this year. I've been trying to create a horizontally scrolling gallery, and have come across a problem. Here's my Codepen to demonstrate the issue:

http://codepen.io/sassquad/pen/PpPNbp

Being aware that grid guttering is only applied inbetween grid items, how does one get outside guttering on a container with overflowing content? When I add left and right padding, or indeed margin to the container, the padding is only applied to the viewport element, ignoring the fact that the content is overflowing.

Hopefully, this screenshot shows you what is happening.

gridlayout

As I have other onscreen elements, I can't simply apply padding to the body tag.

I now have an image gallery which has 10px padding/margin on the left, but butts right against the right hand edge when you scroll to the end. I can't seem to find a way around this.

Hope you can assist in defogging my interpretation.

rachelandrew commented 7 years ago

I'm not seeing the problem I'm afraid, once you are scrolled to the right then the viewport padding or margin surely then is in the right place, or that is how it looks to me. I don't understand what the difference is between what is currently happening and what you want to happen.

sassquad commented 7 years ago

My apologies, I didn't finish what I was editing in the Codepen. My bad :scream:

I've updated it now. I've added a margin of 10px to the .panels and .fadedpanels rule. If you look now, you'll see the margin gets applied to the top, left and bottom of the scrolling area. But if you scroll to the right, no margin.

That's my problem.

I've worked around it in my project by setting grid-gap to 20px 0, and setting the content boxes to 20px wider, with 10px padding either side, effectively centering the image. It's not ideal, but I can't think of any other workaround for now.

Hopefully, I've clarified things now.