Re: [css-sizing][css-grid] fit-content(<length>|<percentage>)

On 05/19/2016 03:41 AM, Sergio Villar Senin wrote:
> On 17/05/16 23:14, fantasai wrote:
>> On 04/01/2016 04:35 PM, fantasai wrote:
>>> I ran into a few cases where it would have been useful
>>> to be able to fit-content into a size other than the
>>> available space, and just wanted to note that here as
>>> a potential idea for some future level of Sizing.
>>
>> The CSSWG resolved to add this to Sizing and to Grid last week.
>> Changes are:
>>    https://hg.csswg.org/drafts/rev/4a6dbb20cb1c
>>    https://hg.csswg.org/drafts/rev/e6ce367fcb79
>>
>> Basic use case for block layout is the current spec style sheet,
>> which sets max-width: 50em on <body> to keep lines short enough
>> to be comfortably readable; but tables should be shrink-to-fit
>> into the full viewport width to take advantage of the space and
>> reduce unnecessary wrapping within the table cells.
>>
>>    table { width: fit-content(100vw); align-self: center; }
>>
>> Basic use case for grid is a basic form with labels on one side
>> and inputs on the other: you want the column of labels to just
>> fit the contents without inducing wrapping, and the inputs to
>> take up the remaining space. However, if the window gets narrow
>> enough that the labels are more than X% of the window, you want
>> to induce wrapping on the label column so that there is still
>> plenty of room for filling out the form (but you don't want any
>> of the labels to overflow).
>>
>> form {
>>    grid-template-columns: fit-content(40%) minmax(5em, 1fr);
>> }
>>
>> Let me know if there are any errors / other concerns!
>
> A bunch of questions
>
> * Couldn't this be properly resolved using media queries?

No, because you are comparing a content-based size to the 40%,
and media queries can't do that.

> * What is that percentage relative to? Grid container, viewport,...?

Same as if it were
   grid-template-columns: 40% minmax(5em, 1fr);

> * What happens when trying to use a percentage of an indefinite size?

This is a good question. It should probably degrade to the same
behavior as 'auto'.

~fantasai

Received on Thursday, 19 May 2016 21:21:56 UTC