"CSS Grid Lanes adds a whole new capability to CSS Grid. It lets you line up content in either columns or rows - and not both. This layout pattern allows content of various aspect ratios to pack together. No longer do you need to truncate content artificially to make it fit. Plus, the content that's earlier in the HTML gets grouped together towards the start of the container. If new items get lazy loaded, they appear at the end without reshuffling what's already on screen."
"Safari's Grid Inspector already reveals the grid lines for Grid Lanes, and labels track sizes, line numbers, line names, and area names. Now it has a new feature - "Order Numbers". By turning on the order numbers in the example above, we can clearly see how Item 1, 2, 3, and 4 flow across the columns, as if there were a row."
Grid Lanes is a new CSS Grid capability that enables masonry-style layouts by lining up content exclusively in either columns or rows. Items of varying aspect ratios pack together without artificial truncation, and earlier HTML content groups toward the start of the container. Lazy-loaded items append at the end without reshuffling visible content. Content flow runs perpendicular to the defined layout shape: defining columns causes items to flow across them as if rows existed, while defining rows causes items to flow in the column direction as if columns existed. Safari's Grid Inspector gains an Order Numbers feature to visualize item order in Grid Lanes.
Read at WebKit
Unable to calculate read time
Collection
[
|
...
]