Grid min max to display overflowing text

User 2706435 Photo


Ambassador
443 posts

I am hoping to set up a grid for the following scenario/snippet, but have been unsuccessful.
    1. a grid of two columns.
    2. columns centered
    3. when the text in the right side columns extends past the screen, resize right side column width to show all the text, and reduce the width of the leftside column to accommodate that.

small working file https://drive.google.com/file/d/1d1haZl-9ydrGAaeo9IglfMxbEJwRrWEv/view?usp=sharing

been working on a 2x2, where an image takes up the entire left column area using named areas, and separate containers with different text elements in the rows of the rightside column. The problem presents itself the most in small viewing ports.
User 122279 Photo


Senior Advisor
13,004 posts

There will be others who are able to offer better help, but I find your attempt interesting, so I will mention a couple of things that strike me:

You are saying that the image is to take up the whole area of the left column.
Then both columns have the width 1fr at all the breakpoints, which to me means that they are supposed to be the same width throughout.
I think you need to set the width of the image to 100%, and some min and max width on the container holding it. And in order to make room for the text in the right containers, you need to change the proportions of left/right at the various breakpoints.You may perhaps even have a different grid for very small widths, where the two containers are stacked, unless you leave that for fall-back and use flex or float.
Others, who are better at grid, will have to tell you how to go about this.

I'd like to follow your proceedings, I may learn something too ;)
Ha en riktig god dag!
Inger, Norway
My new honey site, built with RFF: https://eikweb.com/horgenhonning/
Component sharing for RFF, RBB, RSD and SD: https://eikweb.com/sharing/


User 2706435 Photo


Ambassador
443 posts

I'm sorry. The image is to just be placed in the left column's rows in a named area that consumes two rows of the left column, but the iage will not take up all the space. Its width will be much, much smaller than the width of the right column.

I am hoping to not to have to create superfluous breakpoints and that there is a configuration for this.

What I CAN do is determine what the pixel width of the text is, then set minmax to be (1fr), and (xx px 1 fr). However, it can blowup possibly based on a browser using a user's browser custom zoom-text function.
User 122279 Photo


Senior Advisor
13,004 posts

Bill, check this wee thingie, if that comes anywhere near what you are trying to reach. I used flex positioning as fallback-first and switched to grid after the first (custom) breakpoint. It seems to be working, even in IE11, in the fallback version.

I just used a simple grid, two 'cells', and reused the flex on the right side. That may of course also be turned to grid, though, but then I'd say turn it into a separate grid unit, inside the first one.
Attachments:
Ha en riktig god dag!
Inger, Norway
My new honey site, built with RFF: https://eikweb.com/horgenhonning/
Component sharing for RFF, RBB, RSD and SD: https://eikweb.com/sharing/


User 2706435 Photo


Ambassador
443 posts

Thanks, I'll check that out. I was hoping there was a way with the Grids. What I did learn is that there is supposed to be a new spec being worked on that can apply two different values to both the min and max (two each), and a "clamp" attribute.
User 122279 Photo


Senior Advisor
13,004 posts

I'm not that much 'advanced' in grid yet... ;)
Ha en riktig god dag!
Inger, Norway
My new honey site, built with RFF: https://eikweb.com/horgenhonning/
Component sharing for RFF, RBB, RSD and SD: https://eikweb.com/sharing/


User 379556 Photo


Registered User
1,028 posts

I may have misunderstood, and I haven't seriously worked with CSS Grid, but it seems to me that the following might resemble what is wanted -

1. a picture at the left with a max-width of 75px and a min-width of (say) 30px;
2. textual etc. information at the right with a max-width of 50% and a min-width of the widest info. container.

If so, perhaps a grid as follows would do the trick -
(a) left column having the min-width and max-width as in 1 above;
(b) a middle (spacer) column with a width of 1fr;
(c) right column having the min-width and max-width as in 2 above.

I attach a revision of the original SD file accordingly.

Frank




Attachments:
User 122279 Photo


Senior Advisor
13,004 posts

We'll see what Bill says ;)

I notice that I may be too hung up in containers, and I'm also following the advice previously given about starting with fall-back first. Both of you don't seem to follow that. I think all modern browsers are able to handle grid by now, aren't they, but don't we still have to take IE11 into consideration?

Anyway, I also guess that I'm a 'visual' sort of person, I feel safer if I can position something visual on the canvas. I haven't made the plunge completely into invisible grids yet, seems scary. :lol:

I'm sitting here thinking whether to transform my '2nd-attempt' file into something with min-max, we'll see...
Ha en riktig god dag!
Inger, Norway
My new honey site, built with RFF: https://eikweb.com/horgenhonning/
Component sharing for RFF, RBB, RSD and SD: https://eikweb.com/sharing/


User 379556 Photo


Registered User
1,028 posts

Inger wrote:
... the advice previously given about starting with fall-back first. Both of you don't seem to follow that ...

I do. I've only ever played with CSS Grid, and I've not found any situation where I've needed it!

Frank
User 122279 Photo


Senior Advisor
13,004 posts

I had contact with Bob last night, and we discussed this project. He thought that actually flex would be the best option in this case, not grid. And also, that starting with Fallback would still be important.
Ha en riktig god dag!
Inger, Norway
My new honey site, built with RFF: https://eikweb.com/horgenhonning/
Component sharing for RFF, RBB, RSD and SD: https://eikweb.com/sharing/



Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.