-
-
Notifications
You must be signed in to change notification settings - Fork 153
Commit 8ca341f
committed
grid-lanes-polyfill
Started in Opus: https://claude.ai/share/2d1d2c3b-9ee5-407d-ab64-9135553e3086
Moved to Claude Code: https://tools.simonwillison.net/claude-code-timeline?url=https%3A%2F%2Fgist.githubusercontent.com%2Fsimonw%2F2a157668c080cc01954e46f914572af4%2Fraw%2Fed96915788447940bfc51524ff5ee5ca657c767c%2F16c4b025-7b6e-43f0-854e-ca7363f2fee9.jsonl#tz=local&q=&type=all&ct=all&role=all&hide=0&truncate=1&sel=3
Here is the README it wrote:
A JavaScript polyfill for the new `display: grid-lanes` CSS feature, enabling native masonry-style layouts in browsers that don't yet support it.
CSS Grid Lanes is a new CSS feature [introduced by WebKit](https://webkit.org/blog/17660/introducing-css-grid-lanes/) that enables true masonry-style layouts using native CSS. It allows items to flow into columns (or rows) like a waterfall, with each item positioned in whichever lane gets it closest to the top.
```css
.container {
display: grid-lanes;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 16px;
}
```
This polyfill supports:
- `display: grid-lanes` detection and layout
- `grid-template-columns` for waterfall (vertical) layouts
- `grid-template-rows` for brick (horizontal) layouts
- `repeat()` with `auto-fill` and `auto-fit`
- `minmax()` for flexible lane sizes
- `gap`, `column-gap`, `row-gap` spacing
- `item-tolerance` for placement sensitivity
- Spanning items with `grid-column: span N`
- Explicit placement with `grid-column: N / M`
- Negative indices (e.g., `grid-column: -2 / -1`)
- Responsive layouts (auto-recalculates on resize)
- Dynamic content (watches for DOM changes)
```html
```
The simplest way to use the polyfill is to initialize it after the DOM is ready:
```html
```
The polyfill will automatically find all elements with `display: grid-lanes` and apply the layout.
You can also apply the polyfill to specific elements:
```javascript
const container = document.querySelector('.my-container');
const instance = GridLanesPolyfill.apply(container);
// Later, to refresh the layout:
instance.refresh();
// To remove the polyfill:
instance.destroy();
```
```javascript
if (GridLanesPolyfill.supportsGridLanes()) {
console.log('Native support available!');
} else {
GridLanesPolyfill.init();
}
```
```javascript
GridLanesPolyfill.init({ force: true });
```
| Property | Description | Example |
|----------|-------------|---------|
| `display: grid-lanes` | Enables Grid Lanes layout | `display: grid-lanes` |
| `grid-template-columns` | Defines column lanes (waterfall layout) | `repeat(auto-fill, minmax(200px, 1fr))` |
| `grid-template-rows` | Defines row lanes (brick layout) | `repeat(3, 100px)` |
| `gap` | Gap between lanes and items | `16px` |
| `column-gap` | Gap between columns | `20px` |
| `row-gap` | Gap between rows | `16px` |
| `--item-tolerance` | Placement sensitivity (CSS variable) | `1em` |
| Property | Description | Example |
|----------|-------------|---------|
| `grid-column` | Column span or placement | `span 2` or `1 / 3` or `-2 / -1` |
| `grid-row` | Row span or placement (brick layout) | `span 2` |
```css
.gallery {
display: grid-lanes;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 16px;
}
```
```css
.container {
display: grid-lanes;
grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr) minmax(16rem, 2fr)) minmax(8rem, 1fr);
gap: 12px;
}
```
```css
.container {
display: grid-lanes;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 24px;
}
.hero {
grid-column: span 3;
}
.featured {
grid-column: span 2;
}
```
```css
.container {
display: grid-lanes;
grid-template-columns: repeat(5, 1fr);
gap: 16px;
}
.sidebar {
grid-column: -2 / -1; /* Last column */
}
```
```css
.container {
display: grid-lanes;
grid-template-rows: repeat(3, 100px);
gap: 12px;
}
```
```css
.container {
display: grid-lanes;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 16px;
--item-tolerance: 2em; /* Items within 2em are considered "tied" */
}
```
Returns `true` if the browser natively supports `display: grid-lanes`.
Initializes the polyfill for all grid-lanes containers in the document.
**Options:**
- `force` (boolean): Apply polyfill even if native support exists. Default: `false`
**Returns:** An object with:
- `supported` (boolean): Whether native support was detected
- `instances` (Map): Map of container elements to their layout instances
- `refresh()`: Re-layout all containers
- `destroy()`: Remove polyfill from all containers
Applies the polyfill to a specific element.
**Returns:** A `GridLanesLayout` instance with:
- `refresh()`: Re-layout the container
- `destroy()`: Remove polyfill from the container
The polyfill works in all modern browsers:
- Chrome 60+
- Firefox 55+
- Safari 11+
- Edge 79+
The polyfill uses:
- ResizeObserver (for responsive layouts)
- MutationObserver (for dynamic content)
- CSS.supports() (for feature detection)
1. **Batch DOM updates**: Add all items before initializing the polyfill
2. **Use appropriate tolerance**: Higher `item-tolerance` values can reduce layout thrashing
3. **Lazy load images**: Re-trigger layout after images load for accurate heights
4. **Limit re-layouts**: The polyfill automatically debounces resize events
The polyfill aims to match the native behavior as closely as possible, but there may be minor differences:
1. **CSS parsing**: Complex CSS expressions may not be fully supported
2. **Performance**: JavaScript layout is slower than native CSS
3. **Edge cases**: Some advanced grid features may not be polyfilled
Based on the CSS Grid Lanes specification and implementation by the WebKit team at Apple.
- [WebKit Blog: Introducing CSS Grid Lanes](https://webkit.org/blog/17660/introducing-css-grid-lanes/)
- [CSS Grid Level 3 Specification](https://www.w3.org/TR/css-grid-3/)File tree
2 files changed
+1576
-0
lines changed- grid-lanes-polyfill.html
- grid-lanes-polyfill.js
2 files changed
+1576
-0
lines changed
0 commit comments