Hacker News new | past | comments | ask | show | jobs | submit login

right, but if I want a simple 2 column row with the first field being narrow and the second field stretching to fill the width "1fr auto" doesn't work nor does "1fr 2fr"



> second field stretching

If you want the second column to stretch, then the `fr` part is assigned to the second column. Mixing `fr` and `auto` doesn't really make sense. You can do it like this. https://codepen.io/tomtheisen/pen/emOeqPy

    grid-template-columns: 10em 1fr;


but i don't know if 10em is too much or too small. that's the point. i don't want a specific width defined


Try min-content, fit-content, or max-content instead of auto.


This is probably the way.

I also have issue of letting go and fully accepting the way of the flex. Instead of feeling comfortable just throwing elements inside the grid element, by brain needs each row to have a wrapper element like a tr and nested td instead of just tossing td elements in tbody (sticking to the table mentality). It took a minute for me to get that to click in my head for whatever reason


Then you can use 1fr 10fr or any ratio you want.


the any ratio I want is the point of the exercise. i don't know how many or what size. i want the first column to be just wide enough, and the second column to fill the space. what you suggested does not do that, but thanks for playing


You're welcome.

Now that you've explained the rest of your requirements, I can see that `fr` is not suitable for the purpose. In the meantime you've gotten a better answer for the updated requirements, in particular min-content and max-content.


The requirements have not changed.


Maybe not, but the way they were described has.

First:

> I want a simple 2 column row with the first field being narrow and the second field stretching to fill the width

Second:

> i want the first column to be just wide enough, and the second column to fill the space.





Consider applying for YC's Fall 2025 batch! Applications are open till Aug 4

Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: