Implicit Grids, Repeatable Layout Patterns, and Danglers

Dave Rupert cleverly uses modern CSS to solve the classic puzzle: What happens when the component's CSS can't handle what we provide?

Specifically, when the layout grid expects an even number of items, but actually provides an odd number of items. The last remaining "hungry" element will destroy the layout. This requires some defensive CSS, Dave did it.

He wrote a concise selector using:has() to find the last item in a grid containing odd numbers of items:

 <code>.items:has(.item:last-of-type:nth-of-type(odd)) .item:first-of-type { }</code>

Decomposition as follows:

• We have a parent container called .items.
• If the container: has() a .item child element, it is the last of its type,
• ...and the .item happens to be an odd instance,
• ...Then select the first .item element of that type and style it!

In this case, the last .item can be set to full width to prevent voids from being present in the layout.

If...then...CSS has conditional logic capabilities! Currently we are only talking about Safari TP and Edge/Chrome Canary support, but this is already great.

It happens that Temani Afif recently shared the tips he learned when using implicit mesh to experiment. By leveraging CSS Grid's automatic placement algorithm, we don't even have to explicitly declare a fixed number of columns and rows for the grid - CSS will create them for us if needed!

No, Temani's trick is not an alternative to Dave's "hungry" puzzle. However, combining Temani's approach to repeatable mesh layout mode with Dave's defensive CSS usage of :has(), we get a powerful and complex-looking mesh that is lightweight and capable of handling any number of items while maintaining a balanced repeatable mode.

The above is the detailed content of Implicit Grids, Repeatable Layout Patterns, and Danglers. For more information, please follow other related articles on the PHP Chinese website!