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

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!
Thanks~
~fantasai

Received on Tuesday, 17 May 2016 21:14:39 UTC