CSS Grid Lanes is a new web layout mode available in Safari 26/27 that enables masonry-style layouts — where items of varying sizes flow naturally into columns or rows — using just a few lines of CSS, no JavaScript required.
• Replaces complex JavaScript masonry libraries with 3 lines of CSS, dramatically reducing code complexity for image-heavy web views embedded in apps
• Preserves each item's natural aspect ratio without cropping, stretching, or distortion — ideal for photo galleries and mixed-content feeds
• Builds on familiar CSS Grid syntax (fr units, subgrid, span, gap) so web developers already know most of the API
Demonstrates embedding a CSS Grid Lanes masonry layout inside a WKWebView, showing how to inject the minimal CSS needed for a waterfall photo grid without any JavaScript library.
import SwiftUI
import WebKit
struct GridLanesWebView: UIViewRepresentable {
func makeUIView(context: Context) -> WKWebView {
let webView = WKWebView()
webView.loadHTMLString(htmlContent, baseURL: nil)
return webView
}
func updateUIView(_ uiView: WKWebView, context: Context) {}
private var htmlContent: String {
"""
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body { margin: 0; background: #111; }
/* CSS Grid Lanes: 3-column masonry layout */
.gallery {
display: grid-lanes;
grid-template-columns: 1fr 1fr 1fr;
gap: 8px;
padding: 8px;
}
.gallery img {
width: 100%;
border-radius: 8px;
display: block;
}
/* Span one item across two columns */
.gallery img.featured {
grid-column: span 2;
}
</style>
</head>
<body>
<div class="gallery">
<img src="https://picsum.photos/seed/a/400/600" />
<img src="https://picsum.photos/seed/b/400/300" />
<img src="https://picsum.photos/seed/c/400/500" class="featured" />
<img src="https://picsum.photos/seed/d/400/250" />
<img src="https://picsum.photos/seed/e/400/450" />
<img src="https://picsum.photos/seed/f/400/350" />
<img src="https://picsum.photos/seed/g/400/550" />
<img src="https://picsum.photos/seed/h/400/300" />
</div>
</body>
</html>
"""
}
}
struct ContentView: View {
var body: some View {
GridLanesWebView()
.ignoresSafeArea()
}
}
Grid Lanes only supports one flow direction at a time (columns OR rows, not both). The flow-tolerance property (default 1em) controls placement order looseness — unexpected visual ordering can affect accessibility and tab order. Subgrid support requires adding display:grid-lanes and grid-template-columns:subgrid to nested containers explicitly.
No special hardware required; CSS-only feature rendered by WebKit. Other browsers require a flag to be enabled.
More iOS 27 APIs land every week.
Get notified when new capabilities are published — no noise, just signal.