How to force parent grid to flow when nested grid content overflows
Is there a property I can give the parent grid to stop this from happening?
62 Replies
fyi this happens because I want the images to be a minimum width, so the nested grid of img and blue bubble overflows onto the previous parent grid that contains both elements.
it would be helpful to share your code if you have a specific example already
either a live version, or something on codepen. You can use something like https://picsum.photos/ for placeholder images
there we go. at certain viewport width, the img overlaps the previous parent grid item.
I'll take a look later if I can, but that should help anyone else trying to help in the meantime
thanks a bunch, if you find the time that'd be grand. I'll populate content for today and sort the layout later !
Can’t look right now but sounds like you want to use the keyword “auto-fit” in your
grid-template-columns: repeat(auto-fit, minmax(min(100%, 8rem), 1fr));I have an autofit on the parent grid.
Adding your code to the nested grid does solve the issue of the parent grid overlapping, but now the nested grid starts to overlap !
Those values were just examples , you’ll need to adjust to the sizes you need
This is what I see on mobile, where is the overlap you don’t want ?
Also what are you trying to accomplish by putting a grid on your h2 element? There is nothing inside to position ? If you aren’t aware yet, the grid inspector in your dev tools is very helpful to visualize what your grid is doing. When you inspect, go to your html and there will be a “grid” button next to items that have grid declared (same with flex btw). If you press this grid btn, it will turn on your grid and there are tools to help you visualize what’s happening
as a way of easily centering both vertically and horizontally the text in the middle of its background.
it's only at certain width, mobile doesn't have an issue I've seen
If you had more than one element inside that would make sense but it’s the only element so it’s only the size of itself. You have grid on its parent, that’s where you would want to assign the h2 it’s cell and position.
You probably want to adjust your values in your GTCs then
I'll try and play around with that, cheers. But I'm struggling to makje it work. Either it overlaps when adding an autofit to the nested grid, or the items make two rows, when I only want the one row for the nested grid.
That’s what auto fit does, it fits as many cells as it can with the size you’ve specified. You probably don’t need auto-fit on the nested grid, if you’re referring to the ytcontainer as the nested grid
the banner needs to have a variable height. but the text needs to stay middle horizontal and vertical. I have not found another way to achieve this and conserve the background full width of viewport. Happy to heaar another none weird way !
Careful putting fixed heights on anything , even w the clamp. You want to use padding to make its size, and if you HAVE to have a height, you’ll want a min-height so it can stretch and not overflow
cheers, no autofit on that then, I want it 1fr, 1fr
Use a pseudo element with inset 0 and padding. It’s currently not full width anyways?
There’s only two elements inside right? And you don’t want it to stack? So just declaring two columns on ytcontainer and then autofit on the parent grid will keep the children on one row
Or to be semantic I would use a <header> that has the bg colour, with your h2 inside it. You could then declare grid on the header with place-content center and padding to make the block size you want, no need to declare a height. Then the header will get a grid-column: 1/-1 so it’s not affected by the auto-fit
oh the banner is not part of the main grid. I know I used a class and id of the same name, that was a little silly for readability
well, your height insight has found my issue for the grid overlap: setting a height on the thumbnail images was causing a problem
Class is fine but you can’t have two ids that are the same name. That’s the point of IDs, they are unique. I recommend using classes for styling and only use IDs for form elements and on elements that you need to select with JavaScript if you don’t want to use the class. It’s inevitable that using IDs to style will one day create a specificity problem and you won’t understand why your styles aren’t being applied
now trying to find how to make the image bigger without breaking things !
cool, this is pure html and css for now. I was using IDs for navigation, can I navigate with a class?
One of the wonderful things about grid is that you can set the cells size with your grid template and the item will take up the space of its cell so it’s a way to get height without setting a height property. Another way around is using aspect-ratio. You can use aspect-ratio: 1 on your images so they’ll always be the same height as their width
Nope, ID for navigating but they have to be unique. You can’t have two elements with the same ID. And classes/IDs can’t start with a numeric value just btw. You can’t have two sections with an ID of #about, it would have to be #about-1 and #about-2 for example
Forgot also to mention you want to set margin:0; on your body or html element so that your banner can be full width
so I don't get this:
.ytcontainer {
display: grid;
grid-template-columns:1fr 1fr;
}
but I get this result depending on viewport width:
that is not 1 fr 1fr, like grid doesn't care 🤣
It may not be getting applied. Open up your dev tools and see if the property is getting crossed out or if another property is getting in your way.
cheers ! that'll probably be the case, it should make two boxes of the same size
The grid inspector is a lifesaver
is that on chrome only?
Nope
I don’t think safari had it but safari is a trash browser for development anyway , I only use it for browser testing
well, even with this, I still don't get it, still overlaps, 1fr 1fr not being respected by grid and therefore image too small at certain viewport width. I'll leave it for a while and come back to it with fresh eyes ! it's been stomping me all afternoon !
might have to do with my variable font size for the <p>
but I dont get why it would, but then again, I'm a real noob !
Did you inspect your file? When you come back , update the codepen above with your current code
oooooh, godamnit. ok, yeah, the issue was with the <p>, I had set a clamp for the width to keep it wide enough so it would create a super high column, and that was messing with the grid and overiding the 1fr 1fr
so it wouldn't* creat a high column
sooooooo, can I tell grid to make my stuff wider rather than higher?
I dont want this to happen, I'd prefer it made the grid wider to maintain both elements the same height
Your selector is ytcontainer1 and you have 1fr 1fr in ytcontainer
Putting widths on grid items makes it respective to their grid-cell. Eg if you add width 50%, it’s no longer 50% of its parent, it’s 50% of its grid cell. You set the elements size with its cell , so you set its size with the grid template
ytcontainer1 was old code commented out. the selector for 1fr 1fr should be ytcontainer
Ah well I’m going off your codepen
adding a clamp width to my <p> was making the grid not respect 1fr 1fr, overriding it somehow
Adjust your minmax values
Clamp properties on your text should not affect your grid template
I didn’t change the clamp and when I added the right selector the 1fr 1fr worked
I have refactored it. You have a fixed height on the body which will cause overflow, it needs to be a min-height. Took off margin, you never closed your section element that had the ID on it. Used ems for padding and margin so it’s fluid.
If you won’t use your dev tools, put an outline on the cell with the image and paragraph. You’ll see they are the same height as the blue bg element. The img has an aspect ratio so it’s keeping its size that way. The cells are the same height though. I’d really encourage you to use the grid-inspector, it’s helpful
Oh a width. I misread this
cheers !
Yes widths and heights make it respective to it’s cell. You use the cell to make up its size
thanks. I'll try and find a fix to this:
I'd like the grid to grow wider so the content looks more balanced. currently the text is allowed to make the cell grow very tall compared to the image. I'd rather it grew sideways.
Like I said you need to adjust your minmax values so your auto-fit is wider
cheers I'll look into this
Tip: you can use min width eg width:min(100%, 40em); within your minmax
grid-template-columns: repeat(auto-fit, minmax(min(100%, 30em), 1fr));what a legend
thanks dude
that was my new problem !
at small screen everything was breaking
now it doesnt
And did you see the message above this? Putting a clamp on your font-size wouldn’t affect it but putting a width, whether clamp or percentage or fixed or anything does affect how the grid-child lives in its cell. Want to make sure you saw my misunderstanding and are understanding that widths and heights on grid items affect how it lives in its cell. You use the parent grid to set the items width and height.
Adjust the 30em to fit your needs at large screens
yep, cheers for making sure I grasp the concepts !
very, very helpful !
you are owed a box of chocolate and a coffee !
Haha no worries , glad to help
I will make sure, one day, to return the favour to another noob !
much love and appreciation, again, you are a legend
swuresources.netlify.app
making a website for an upcoming card game to help new players find information !
We were all there once and there’s so many new css properties to learn, it’s constant study. Making it responsive can be very frustrating but once you get it , you rarely need media queries. And now with container queries , components will be a breeze
Just remember , style with classes use ids for functionality or specificity will bite ya!
oooooh container queries ! just nipped over to look, veeeery cool concept.
Yeah it’s fun! Same with the new view-transitions API and scroll-driven animations API. trying to grasp it these days as well as accessibility.
Oh and on your base code, don’t forget to close off the section element #listen-in, there was no closing tag
will do, thanks a bunch. after this site I will venture into javascript, so definitely need to watch out for that
Bah. JS drives me crazy.
then it'll probably kill me 🤣
I come from a design background so grasping the JS concepts took me longer than anything I’ve ever tried to learn. But some people just have that logical brain that it makes total sense. You never know, maybe you’ll grasp it right away! Good luck on your front end journey!
THANK YOU !