New Safari developer tools provide insight into CSS Grid Lanes

4 months ago

Safari Technology Preview 234 introduces CSS Grid Lanes for masonry-style layouts.
CSS Grid Lanes allows content alignment in either columns or rows, not both.
Content flows perpendicular to the layout shape, improving packing of various aspect ratios.
New 'Order Numbers' feature in Safari's Grid Inspector helps visualize content flow.
Grid Lanes Inspector reveals grid lines, sizes, line numbers, and area names.
Order Numbers assist in understanding content flow for better accessibility.
Safari's layout tools allow multiple overlays without performance issues.
Flexbox Inspector distinguishes between free space and gaps, showing item boundaries.
Grid and Flexbox Inspectors are the only tools labeling content order.
Order Numbers feature is available in Safari Technology Preview 235.

Hasty Briefsbeta