Changes on CSS Grid Layout in percentages and indefinite height

This is a wonderfully nerdy deep dive into a very specific CSS change by Manuel Rego Casasnovas. Here's a bit of terminology we should know:

First question is, what is an indefinite size? The simple answer is that a definite size is a size that you can calculate without taking into account the contents of the element. An indefinite size is the opposite, in order to compute it you need to check the contents first.

And then goes on to explain how complicated this all gets. The change, in a nutshell:

Percentages row tracks and gutters for indefinite height grid containers will be resolved against the intrinsic height instead of being treated as auto and zero respectively.

Manuel provides a nice visual demo:

See the Pen [css-grid] Percentage row tracks by Manuel Rego Casasnovas (@mrego) on CodePen.

Direct Link to Article — Permalink

The post Changes on CSS Grid Layout in percentages and indefinite height appeared first on CSS-Tricks.

from CSS-Tricks https://ift.tt/2PvGdrd
via IFTTT