CSS Logical Properties and Values is a module of CSS introducing logical properties and values that provide the ability to control layout through logical, rather than physical, direction and dimension mappings.
These properties are writing-mode relative equivalents of their corresponding physical properties.
Think of a simple property like padding-left for example. In a left-to-right language such as English you actually mean the left hand side of the box. But in a right-to-left language such as Arabic you want that padding to appear at the right hand side of the box. This is where CSS Logical Properties come into action: instead of using the physical padding-left, you use the logical padding-inline-start which denominates “the padding at the start of the inline axis”.
If you find yourself wrestling with CSS layout, it’s likely you’re making decisions for browsers they should be making themselves. Through a series of simple, composable layouts, Every Layout will teach you how to better harness the built-in algorithms that power browsers and CSS.
Employing algorithmic layout design means doing away with @media breakpoints, “magic numbers”, and other hacks, to create context-independent layout components. Your future design systems will be more consistent, terser in code, and more malleable in the hands of your users and their devices.
Good news! Firefox 69 will support subgrid. As Rachel Andrew explains:
In terms of new syntax, and new things to learn, this is a very small change for web developers who have learned grid layout. A grid defined as a subgrid is pretty much the same as a regular nested grid, albeit with its own track listings. However it makes a number of previously difficult patterns possible.
For example, if you have a card layout, and the cards have headers and footers with uneven amounts of content, you might want the card headers and footers to align across the rows. However, with a standard nested grid this isn’t possible.
With Subgrid that type of layout is perfectly possible:
On the surface it seems fairly easy to create a masonry layout with flexbox; all you need to do is set flex-flow to column wrap and voilà, you have a masonry layout. Sort of. The problem with this approach is that it produces a grid with a seemingly shuffled and obscure order.
Beware though: this technique requires you to set a fixed height on the wrapper, which is not always possible 😕
Sometimes you want your items to wrap in a very particular way. For instance, when you have three items, you’ll be happy with the three-abreast layout and accepting of the single-column configuration. But you might like to avoid the intermediary part where you get a pair of elements on one line followed by a longer element underneath.
How do we skip this intermediary layout state and switch directly from a horizontal to vertical triptych? What’s the solution?
The solution he knocked up involves flex-basis being changed thanks to calc() and CSS Custom Properties (“CSS Variables”). The code behaves nicely when the viewport becomes too narrow, or when the container becomes too narrow (set the max-width of the body to 37em to see it in action)
Now, are these “Container Queries” we want? Not quite imho: whilst is does tackle the issue of layout for flexed children, it’s still not possible to, for example, change the font-size or, another example, switch from flexbox to grid using this technique.
Sidenote: I think one could hack the font-size thing together if CSS calc() were to support the modulo operator, but that’s not the case unfortunately. Also, it would still leave switching from flexbox to grid out of the loop.