Hasty Briefsbeta

CSS Grid Lanes

a day ago
https://webkit.org/blog/17660/introducing-css-grid-lanes/
Copy Link
  • #Layout
  • #CSS
  • #Web Design
  • CSS Grid Lanes introduces a new way to create masonry layouts on the web.
  • The feature is now available in Safari Technology Preview 234.
  • Grid Lanes use `display: grid-lanes` and `grid-template-columns` to create flexible layouts.
  • The layout automatically adjusts to screen sizes without media queries.
  • Items are placed in the lane that gets them closest to the top, similar to traffic flow.
  • Grid Lanes support varying lane sizes and spanning items across multiple lanes.
  • Items can be explicitly placed, and layouts can be oriented in columns or rows.
  • A new concept called 'tolerance' adjusts how picky the layout algorithm is when placing items.
  • Grid Lanes are useful for various layouts, including image grids and mega menus.
  • The CSS Working Group is finalizing some details, but the core feature is ready for use.
AboutLogin