CSS Grid Lanes is a new web layout mode available in Safari 26 that enables masonry-style layouts natively in CSS — no JavaScript required. Items flow into multiple columns or rows, each settling into the shortest available lane while preserving natural proportions.
• Eliminates the need for JavaScript masonry libraries (e.g. Masonry.js) for waterfall/brick-wall layouts in WKWebView-hosted or Safari-rendered web content
• Ships in Safari 26.4 / iOS 27 today, so apps using WKWebView or WebKit can adopt it immediately without waiting for cross-browser support
• Builds on familiar CSS Grid syntax (fr units, subgrid, gap, grid-column span) so existing web skills transfer directly
Loads an inline HTML page into a WKWebView that uses CSS Grid Lanes (display: grid-lanes) to render a waterfall photo grid — demonstrating the new layout mode available in Safari 26 on iOS 27.
import SwiftUI
import WebKit
struct GridLanesDemoView: UIViewRepresentable {
func makeUIView(context: Context) -> WKWebView {
let webView = WKWebView()
let html = """
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body { margin: 0; background: #111; }
/* CSS Grid Lanes: masonry layout in 3 lines */
.gallery {
display: grid-lanes;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 8px;
padding: 8px;
flow-tolerance: 1em;
}
.gallery img {
width: 100%;
border-radius: 8px;
display: block;
}
/* Span a featured item across 2 columns */
.gallery .featured {
grid-column: span 2;
}
</style>
</head>
<body>
<div class="gallery">
<img src="https://picsum.photos/seed/a/300/400" />
<img src="https://picsum.photos/seed/b/300/200" />
<img class="featured" src="https://picsum.photos/seed/c/600/350" />
<img src="https://picsum.photos/seed/d/300/500" />
<img src="https://picsum.photos/seed/e/300/250" />
<img src="https://picsum.photos/seed/f/300/380" />
<img src="https://picsum.photos/seed/g/300/300" />
<img src="https://picsum.photos/seed/h/300/450" />
<img src="https://picsum.photos/seed/i/300/220" />
</div>
</body>
</html>
"""
webView.loadHTMLString(html, baseURL: URL(string: "https://example.com"))
return webView
}
func updateUIView(_ uiView: WKWebView, context: Context) {}
}
struct ContentView: View {
var body: some View {
GridLanesDemoView()
.ignoresSafeArea()
.navigationTitle("Grid Lanes Demo")
}
}Liquid Glass is Apple's new material and visual design language introduced in iOS 27, bringing translucent, refractive glass-like surfaces to system and custom UI elements. It replaces the frosted vibrancy aesthetic with a more dynamic, depth-aware material that responds to content beneath it.
PaperKit is Apple's full-featured canvas framework — previously internal-only — now publicly available in iOS/macOS/visionOS 27. It powers the drawing and markup experience in Notes, Preview, and Freeform, giving developers access to a complete pencil, shapes, images, and text canvas with a rich data model.
Xcode 27 introduces a fully customizable toolbar and theme system, untitled scratch projects, coding agent integration directly in the editor, and the new Device Hub for evaluating apps across simulators and physical devices side-by-side.
In-depth guide
SwiftUI & Liquid Glass in iOS 27 →Only one axis can be specified — grid-template-columns OR grid-template-rows, not both simultaneously. flow-tolerance defaults to 1em and may cause unexpected ordering; tune it or disable it for accessibility-sensitive content. Tab order vs visual order mismatch can occur when flow-tolerance is low — test with VoiceOver.
No special hardware required; available on all iOS 27 devices in Safari and WKWebView. Other browsers support is behind a flag.
iOS 27 introduces new SwiftUI drag and drop APIs including reorderable, reorderContainer, dragContainer, and configuration modifiers that enable reordering within and across collections, multi-item drag, and fine-grained control over how data is transferred during drag and drop operations.