How to create two aligned columns with unknown items size.
I have card like this: https://codepen.io/H4ds0n/pen/RwzVMKG
What I want is two columns (i do not know the width of label and its percentage at build time).
Two even grid column is bad because parent container is too big for its children.
Flexbox wont work because size of children is not know at the build time (cannot set something like with:300 px) and I would like to make it resposive.
Any advices ?
19 Replies
hi?
u cant create it using percentages
this iw what I would expect
For wider screens -
imma try
what you mean percentage?
grid-template-columns: auto 1fr; doesnt work?
its like
<ol>
<li><span>....</span><span>...</span></li>
</ol>
then i will have to ditch li i guess
At first it seems like some candidate for subgrid but them meh wasn't able to do anything with it
something like this?
not exacly, what I am trying is to avid this big gap
oh
you can give a min-width like 20% or something
i think u need to remove width:50% from the items
and it would solve the issue
the gap issue
something like this?
so quick question does the code update if i make changes? for u
yes i forgot about gap concept
thanks I will try it out and get back to you 😄
one small thing
it is react based
so I have component called <ItemRow/> which returns <li> for me
right
seems to be working thanks
I was wondering if subgrid will be able to work the same for non direct child?