const{Fragment:e,jsx:l,jsxs:n}=arguments[0];function _createMdxContent(r){const o={a:"a",code:"code",figure:"figure",h2:"h2",hr:"hr",li:"li",p:"p",pre:"pre",span:"span",strong:"strong",ul:"ul",...r.components},{Callout:s}=o;return s||function(e,l){throw new Error("Expected "+(l?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}("Callout",!0),n(e,{children:[n(o.p,{children:["A masonry grid looks simple: variable-height cards, left-to-right reading order, columns that fill naturally. You reach for ",l(o.code,{children:"column-count"})," in CSS because that's what the tutorials recommend. Everything looks correct on your three uniform-height test cards. Then you add real content — cards with different amounts of text, images, tags — and the order breaks. Card 4 appears before card 2. Card 7 jumps to the top of column 1. The layout is shuffled."]}),"\n",l(o.p,{children:"I hit this on my portfolio's blog and projects pages. I found the popular fix, implemented it, and watched it fail in production. Then I built an approach that actually works. Here's what the popular fix gets wrong and what to do instead."}),"\n",n(o.h2,{children:["Why ",l(o.code,{children:"column-count"})," Breaks Ordering"]}),"\n",n(o.p,{children:["CSS ",l(o.code,{children:"column-count"})," is a newspaper-layout primitive. You give it a container and a number of columns, and the browser fills those columns top-to-bottom — not left-to-right. The first column fills completely before the second starts."]}),"\n",l(o.p,{children:"That's the correct behavior for newspaper text. It's the wrong behavior for a card grid where reading order should go left-to-right across the top row."}),"\n",l(o.pre,{children:l(o.code,{children:"Items: [1, 2, 3, 4, 5, 6]\ncolumn-count: 3\n\nWhat CSS does: What you want:\n┌────┬────┬────┐ ┌────┬────┬────┐\n│ 1 │ 3 │ 5 │ │ 1 │ 2 │ 3 │\n│ │ │ │ │ │ │ │\n│ 2 │ 4 │ 6 │ │ 4 │ 5 │ 6 │\n└────┴────┴────┘ └────┴────┴────┘\n"})}),"\n",n(o.p,{children:["The standard fix that circulates on Medium and in Stack Overflow answers is to reorder the array in JavaScript before rendering it into the ",l(o.code,{children:"column-count"})," container — placing items in column-reading order so that CSS's top-to-bottom fill produces the correct left-to-right result."]}),"\n",l(o.h2,{children:"The Popular Reorder Algorithm — And Why It Fails"}),"\n",n(o.p,{children:["Jesse Korzan published ",l(o.a,{href:"https://medium.com/hackernoon/masonry-layout-technique-react-demo-of-100-css-control-of-the-view-e4190fa4296",rel:"noopener noreferrer",target:"_blank",children:"a clean write-up of this technique on Medium"})," with a live demo. The idea is elegant: instead of passing ",l(o.code,{children:"[1, 2, 3, 4, 5, 6]"})," to the CSS column container, reorder it to ",l(o.code,{children:"[1, 4, 2, 5, 3, 6]"})," so that CSS fills column 1 with items 1 and 4, column 2 with items 2 and 5, column 3 with items 3 and 6 — producing the correct left-to-right reading order."]}),"\n",l(o.p,{children:"The solution is correct under its own assumption. The problem is the assumption itself."}),"\n",l("div",{className:"diagonal-line",children:l(o.figure,{"data-rehype-pretty-code-figure":"",children:l(o.pre,{tabIndex:"0","data-language":"tsx","data-theme":"one-dark-pro",children:n(o.code,{"data-language":"tsx","data-theme":"one-dark-pro",style:{display:"grid"},children:[l(o.span,{"data-line":"",children:l(o.span,{style:{color:"#7F848E",fontStyle:"italic"},children:"// ❌ This approach breaks with variable-height cards"})}),"\n",n(o.span,{"data-line":"",children:[l(o.span,{style:{color:"#C678DD"},children:"function"}),l(o.span,{style:{color:"#61AFEF"},children:" reorder"}),l(o.span,{style:{color:"#ABB2BF"},children:"<"}),l(o.span,{style:{color:"#E5C07B"},children:"T"}),l(o.span,{style:{color:"#ABB2BF"},children:">("}),l(o.span,{style:{color:"#E06C75",fontStyle:"italic"},children:"items"}),l(o.span,{style:{color:"#ABB2BF"},children:": "}),l(o.span,{style:{color:"#E5C07B"},children:"T"}),l(o.span,{style:{color:"#ABB2BF"},children:"[], "}),l(o.span,{style:{color:"#E06C75",fontStyle:"italic"},children:"cols"}),l(o.span,{style:{color:"#ABB2BF"},children:": "}),l(o.span,{style:{color:"#E5C07B"},children:"number"}),l(o.span,{style:{color:"#ABB2BF"},children:"): "}),l(o.span,{style:{color:"#E5C07B"},children:"T"}),l(o.span,{style:{color:"#ABB2BF"},children:"[] {"})]}),"\n",n(o.span,{"data-line":"",children:[l(o.span,{style:{color:"#C678DD"},children:" const"}),l(o.span,{style:{color:"#E5C07B"},children:" out"}),l(o.span,{style:{color:"#ABB2BF"},children:": "}),l(o.span,{style:{color:"#E5C07B"},children:"T"}),l(o.span,{style:{color:"#ABB2BF"},children:"[] "}),l(o.span,{style:{color:"#56B6C2"},children:"="}),l(o.span,{style:{color:"#ABB2BF"},children:" [];"})]}),"\n",n(o.span,{"data-line":"",children:[l(o.span,{style:{color:"#C678DD"},children:" for"}),l(o.span,{style:{color:"#ABB2BF"},children:" ("}),l(o.span,{style:{color:"#C678DD"},children:"let"}),l(o.span,{style:{color:"#E06C75"},children:" col"}),l(o.span,{style:{color:"#56B6C2"},children:" ="}),l(o.span,{style:{color:"#D19A66"},children:" 0"}),l(o.span,{style:{color:"#ABB2BF"},children:"; "}),l(o.span,{style:{color:"#E06C75"},children:"col"}),l(o.span,{style:{color:"#56B6C2"},children:" <"}),l(o.span,{style:{color:"#E06C75"},children:" cols"}),l(o.span,{style:{color:"#ABB2BF"},children:"; "}),l(o.span,{style:{color:"#E06C75"},children:"col"}),l(o.span,{style:{color:"#56B6C2"},children:"++"}),l(o.span,{style:{color:"#ABB2BF"},children:") {"})]}),"\n",n(o.span,{"data-line":"",children:[l(o.span,{style:{color:"#C678DD"},children:" for"}),l(o.span,{style:{color:"#ABB2BF"},children:" ("}),l(o.span,{style:{color:"#C678DD"},children:"let"}),l(o.span,{style:{color:"#E06C75"},children:" i"}),l(o.span,{style:{color:"#56B6C2"},children:" ="}),l(o.span,{style:{color:"#E06C75"},children:" col"}),l(o.span,{style:{color:"#ABB2BF"},children:"; "}),l(o.span,{style:{color:"#E06C75"},children:"i"}),l(o.span,{style:{color:"#56B6C2"},children:" <"}),l(o.span,{style:{color:"#E5C07B"},children:" items"}),l(o.span,{style:{color:"#ABB2BF"},children:"."}),l(o.span,{style:{color:"#E06C75"},children:"length"}),l(o.span,{style:{color:"#ABB2BF"},children:"; "}),l(o.span,{style:{color:"#E06C75"},children:"i"}),l(o.span,{style:{color:"#C678DD"},children:" +="}),l(o.span,{style:{color:"#E06C75"},children:" cols"}),l(o.span,{style:{color:"#ABB2BF"},children:") {"})]}),"\n",n(o.span,{"data-line":"",children:[l(o.span,{style:{color:"#E5C07B"},children:" out"}),l(o.span,{style:{color:"#ABB2BF"},children:"."}),l(o.span,{style:{color:"#61AFEF"},children:"push"}),l(o.span,{style:{color:"#ABB2BF"},children:"("}),l(o.span,{style:{color:"#E06C75"},children:"items"}),l(o.span,{style:{color:"#ABB2BF"},children:"["}),l(o.span,{style:{color:"#E06C75"},children:"i"}),l(o.span,{style:{color:"#ABB2BF"},children:"]);"})]}),"\n",l(o.span,{"data-line":"",children:l(o.span,{style:{color:"#ABB2BF"},children:" }"})}),"\n",l(o.span,{"data-line":"",children:l(o.span,{style:{color:"#ABB2BF"},children:" }"})}),"\n",n(o.span,{"data-line":"",children:[l(o.span,{style:{color:"#C678DD"},children:" return"}),l(o.span,{style:{color:"#E06C75"},children:" out"}),l(o.span,{style:{color:"#ABB2BF"},children:";"})]}),"\n",l(o.span,{"data-line":"",children:l(o.span,{style:{color:"#ABB2BF"},children:"}"})})]})})})}),"\n",l(o.p,{children:"Usage:"}),"\n",l("div",{className:"diagonal-line",children:l(o.figure,{"data-rehype-pretty-code-figure":"",children:l(o.pre,{tabIndex:"0","data-language":"tsx","data-theme":"one-dark-pro",children:n(o.code,{"data-language":"tsx","data-theme":"one-dark-pro",style:{display:"grid"},children:[l(o.span,{"data-line":"",children:l(o.span,{style:{color:"#7F848E",fontStyle:"italic"},children:"// ❌ Broken in production — see explanation below"})}),"\n",n(o.span,{"data-line":"",children:[l(o.span,{style:{color:"#ABB2BF"},children:"<"}),l(o.span,{style:{color:"#E06C75"},children:"div"}),l(o.span,{style:{color:"#D19A66",fontStyle:"italic"},children:" style"}),l(o.span,{style:{color:"#56B6C2"},children:"="}),l(o.span,{style:{color:"#C678DD"},children:"{"}),l(o.span,{style:{color:"#ABB2BF"},children:"{ "}),l(o.span,{style:{color:"#E06C75"},children:"columnCount"}),l(o.span,{style:{color:"#ABB2BF"},children:": "}),l(o.span,{style:{color:"#D19A66"},children:"3"}),l(o.span,{style:{color:"#ABB2BF"},children:", "}),l(o.span,{style:{color:"#E06C75"},children:"columnGap"}),l(o.span,{style:{color:"#ABB2BF"},children:": "}),l(o.span,{style:{color:"#98C379"},children:'"1.5rem"'}),l(o.span,{style:{color:"#ABB2BF"},children:" }"}),l(o.span,{style:{color:"#C678DD"},children:"}"}),l(o.span,{style:{color:"#ABB2BF"},children:">"})]}),"\n",n(o.span,{"data-line":"",children:[l(o.span,{style:{color:"#C678DD"},children:" {"}),l(o.span,{style:{color:"#61AFEF"},children:"reorder"}),l(o.span,{style:{color:"#ABB2BF"},children:"("}),l(o.span,{style:{color:"#E06C75"},children:"posts"}),l(o.span,{style:{color:"#ABB2BF"},children:", "}),l(o.span,{style:{color:"#D19A66"},children:"3"}),l(o.span,{style:{color:"#ABB2BF"},children:")."}),l(o.span,{style:{color:"#61AFEF"},children:"map"}),l(o.span,{style:{color:"#ABB2BF"},children:"(("}),l(o.span,{style:{color:"#E06C75",fontStyle:"italic"},children:"post"}),l(o.span,{style:{color:"#ABB2BF"},children:") "}),l(o.span,{style:{color:"#C678DD"},children:"=>"}),l(o.span,{style:{color:"#ABB2BF"},children:" ("})]}),"\n",n(o.span,{"data-line":"",children:[l(o.span,{style:{color:"#ABB2BF"},children:" <"}),l(o.span,{style:{color:"#E06C75"},children:"div"}),l(o.span,{style:{color:"#D19A66",fontStyle:"italic"},children:" key"}),l(o.span,{style:{color:"#56B6C2"},children:"="}),l(o.span,{style:{color:"#C678DD"},children:"{"}),l(o.span,{style:{color:"#E5C07B"},children:"post"}),l(o.span,{style:{color:"#ABB2BF"},children:"."}),l(o.span,{style:{color:"#E06C75"},children:"slug"}),l(o.span,{style:{color:"#C678DD"},children:"}"}),l(o.span,{style:{color:"#D19A66",fontStyle:"italic"},children:" style"}),l(o.span,{style:{color:"#56B6C2"},children:"="}),l(o.span,{style:{color:"#C678DD"},children:"{"}),l(o.span,{style:{color:"#ABB2BF"},children:"{ "}),l(o.span,{style:{color:"#E06C75"},children:"breakInside"}),l(o.span,{style:{color:"#ABB2BF"},children:": "}),l(o.span,{style:{color:"#98C379"},children:'"avoid"'}),l(o.span,{style:{color:"#ABB2BF"},children:" }"}),l(o.span,{style:{color:"#C678DD"},children:"}"}),l(o.span,{style:{color:"#ABB2BF"},children:">"})]}),"\n",n(o.span,{"data-line":"",children:[l(o.span,{style:{color:"#ABB2BF"},children:" <"}),l(o.span,{style:{color:"#E5C07B"},children:"PostCard"}),l(o.span,{style:{color:"#D19A66",fontStyle:"italic"},children:" post"}),l(o.span,{style:{color:"#56B6C2"},children:"="}),l(o.span,{style:{color:"#C678DD"},children:"{"}),l(o.span,{style:{color:"#E06C75"},children:"post"}),l(o.span,{style:{color:"#C678DD"},children:"}"}),l(o.span,{style:{color:"#ABB2BF"},children:" />"})]}),"\n",n(o.span,{"data-line":"",children:[l(o.span,{style:{color:"#ABB2BF"},children:" "})]}),"\n",n(o.span,{"data-line":"",children:[l(o.span,{style:{color:"#ABB2BF"},children:" ))"}),l(o.span,{style:{color:"#C678DD"},children:"}"})]}),"\n",n(o.span,{"data-line":"",children:[l(o.span,{style:{color:"#ABB2BF"},children:""})]})]})})})}),"\n",n(o.p,{children:["The algorithm assumes CSS will put exactly ",l(o.code,{children:"Math.ceil(N / cols)"})," items into each column. That assumption is only valid when every card has the same height."]}),"\n",l(o.p,{children:"When cards have different heights — which is always true for real content — CSS distributes items by pixel height, not by count. A tall card in column 1 means that column fills up with fewer items. Column 2 then starts earlier, takes more items, and fills faster. By the time you reach the last column, the distribution is completely different from what the reorder algorithm predicted."}),"\n",l(o.pre,{children:l(o.code,{children:"6 cards, heights: [300px, 100px, 150px, 200px, 100px, 250px]\nColumn target height: ~333px each\n\nAlgorithm expects: CSS actually produces:\nCol 1: items 1, 4 Col 1: item 1 (300px) → full\nCol 2: items 2, 5 Col 2: items 2, 3, 5 → 350px\nCol 3: items 3, 6 Col 3: items 4, 6 → 450px\n\nResult: items appear in wrong visual positions\n"})}),"\n",l(o.p,{children:"The reorder step produces the right order for equal-height cards. For real cards, you've just shuffled the content in a way that makes the visual order less predictable, not more."}),"\n",l(s,{type:"warning",children:l(o.p,{children:"The reorder trick is only correct when all cards have identical heights. With real content —\nvarying text lengths, images, tag counts — the algorithm makes ordering worse, not better."})}),"\n",l(o.h2,{children:"The Correct Approach: Replace CSS Columns With JS Columns"}),"\n",n(o.p,{children:["The fix is to stop using ",l(o.code,{children:"column-count"})," entirely. Instead of one CSS container that CSS distributes into columns, create N separate ",l(o.code,{children:"

"})," elements — one per column — and distribute items into them in JavaScript using round-robin assignment."]}),"\n",l(o.pre,{children:l(o.code,{children:"item 0 → col 0\nitem 1 → col 1\nitem 2 → col 2\nitem 3 → col 0 ← back to col 0\nitem 4 → col 1\nitem 5 → col 2\n"})}),"\n",l(s,{type:"tip",children:l(o.p,{children:"The key insight: when JS controls which column each item goes into, CSS has no say in the\ndistribution. Card heights don't matter. The reading order is always exactly what you specified."})}),"\n",n(o.p,{children:["With round-robin assignment, row 1 always contains items ",l(o.code,{children:"[0, 1, 2]"}),", row 2 always contains ",l(o.code,{children:"[3, 4, 5]"})," — regardless of how tall each card renders. CSS still controls the visual layout (flex row, gap, column width), but the distribution decision is made entirely in JS before render."]}),"\n",n(o.p,{children:["The trade-off: you lose CSS's ability to balance column heights. With ",l(o.code,{children:"column-count"}),", CSS naturally puts more items in a column if the previous items were short. With the JS approach, each column gets exactly ",l(o.code,{children:"Math.ceil(N / cols)"})," items — columns with shorter cards will have more whitespace at the bottom. For most portfolio and blog grid use cases, consistent reading order matters more than height balancing."]}),"\n",l(o.h2,{children:"Full MasonryGrid Component"}),"\n",l(o.p,{children:"Here is the complete TypeScript component, 60 lines including the breakpoint hook:"}),"\n",l(o.figure,{"data-rehype-pretty-code-figure":"",children:l(o.pre,{tabIndex:"0","data-language":"tsx","data-theme":"one-dark-pro",children:n(o.code,{"data-language":"tsx","data-theme":"one-dark-pro",style:{display:"grid"},children:[n(o.span,{"data-line":"",children:[l(o.span,{style:{color:"#98C379"},children:'"use client"'}),l(o.span,{style:{color:"#ABB2BF"},children:";"})]}),"\n",l(o.span,{"data-line":"",children:" "}),"\n",n(o.span,{"data-line":"",children:[l(o.span,{style:{color:"#C678DD"},children:"import"}),l(o.span,{style:{color:"#E06C75"},children:" React"}),l(o.span,{style:{color:"#ABB2BF"},children:", { "}),l(o.span,{style:{color:"#E06C75"},children:"useEffect"}),l(o.span,{style:{color:"#ABB2BF"},children:", "}),l(o.span,{style:{color:"#E06C75"},children:"useLayoutEffect"}),l(o.span,{style:{color:"#ABB2BF"},children:", "}),l(o.span,{style:{color:"#E06C75"},children:"useState"}),l(o.span,{style:{color:"#ABB2BF"},children:", "}),l(o.span,{style:{color:"#E06C75"},children:"ReactNode"}),l(o.span,{style:{color:"#ABB2BF"},children:" } "}),l(o.span,{style:{color:"#C678DD"},children:"from"}),l(o.span,{style:{color:"#98C379"},children:' "react"'}),l(o.span,{style:{color:"#ABB2BF"},children:";"})]}),"\n",l(o.span,{"data-line":"",children:" "}),"\n",l(o.span,{"data-line":"",children:l(o.span,{style:{color:"#7F848E",fontStyle:"italic"},children:"// useLayoutEffect on client, useEffect on server (Next.js SSR compatible)"})}),"\n",n(o.span,{"data-line":"",children:[l(o.span,{style:{color:"#C678DD"},children:"const"}),l(o.span,{style:{color:"#E5C07B"},children:" useIsomorphicLayoutEffect"}),l(o.span,{style:{color:"#56B6C2"},children:" ="}),l(o.span,{style:{color:"#C678DD"},children:" typeof"}),l(o.span,{style:{color:"#E06C75"},children:" window"}),l(o.span,{style:{color:"#56B6C2"},children:" !=="}),l(o.span,{style:{color:"#98C379"},children:' "undefined"'}),l(o.span,{style:{color:"#C678DD"},children:" ?"}),l(o.span,{style:{color:"#E06C75"},children:" useLayoutEffect"}),l(o.span,{style:{color:"#C678DD"},children:" :"}),l(o.span,{style:{color:"#E06C75"},children:" useEffect"}),l(o.span,{style:{color:"#ABB2BF"},children:";"})]}),"\n",l(o.span,{"data-line":"",children:" "}),"\n",n(o.span,{"data-line":"",children:[l(o.span,{style:{color:"#C678DD"},children:"interface"}),l(o.span,{style:{color:"#E5C07B"},children:" Breakpoints"}),l(o.span,{style:{color:"#ABB2BF"},children:" {"})]}),"\n",n(o.span,{"data-line":"",children:[l(o.span,{style:{color:"#E06C75"},children:" default"}),l(o.span,{style:{color:"#ABB2BF"},children:": "}),l(o.span,{style:{color:"#E5C07B"},children:"number"}),l(o.span,{style:{color:"#ABB2BF"},children:";"})]}),"\n",n(o.span,{"data-line":"",children:[l(o.span,{style:{color:"#E06C75"},children:" sm"}),l(o.span,{style:{color:"#C678DD"},children:"?"}),l(o.span,{style:{color:"#ABB2BF"},children:": "}),l(o.span,{style:{color:"#E5C07B"},children:"number"}),l(o.span,{style:{color:"#ABB2BF"},children:";"})]}),"\n",n(o.span,{"data-line":"",children:[l(o.span,{style:{color:"#E06C75"},children:" md"}),l(o.span,{style:{color:"#C678DD"},children:"?"}),l(o.span,{style:{color:"#ABB2BF"},children:": "}),l(o.span,{style:{color:"#E5C07B"},children:"number"}),l(o.span,{style:{color:"#ABB2BF"},children:";"})]}),"\n",n(o.span,{"data-line":"",children:[l(o.span,{style:{color:"#E06C75"},children:" lg"}),l(o.span,{style:{color:"#C678DD"},children:"?"}),l(o.span,{style:{color:"#ABB2BF"},children:": "}),l(o.span,{style:{color:"#E5C07B"},children:"number"}),l(o.span,{style:{color:"#ABB2BF"},children:";"})]}),"\n",l(o.span,{"data-line":"",children:l(o.span,{style:{color:"#ABB2BF"},children:"}"})}),"\n",l(o.span,{"data-line":"",children:" "}),"\n",n(o.span,{"data-line":"",children:[l(o.span,{style:{color:"#C678DD"},children:"function"}),l(o.span,{style:{color:"#61AFEF"},children:" getColumns"}),l(o.span,{style:{color:"#ABB2BF"},children:"("}),l(o.span,{style:{color:"#E06C75",fontStyle:"italic"},children:"bp"}),l(o.span,{style:{color:"#ABB2BF"},children:": "}),l(o.span,{style:{color:"#E5C07B"},children:"Breakpoints"}),l(o.span,{style:{color:"#ABB2BF"},children:"): "}),l(o.span,{style:{color:"#E5C07B"},children:"number"}),l(o.span,{style:{color:"#ABB2BF"},children:" {"})]}),"\n",n(o.span,{"data-line":"",children:[l(o.span,{style:{color:"#C678DD"},children:" const"}),l(o.span,{style:{color:"#E5C07B"},children:" w"}),l(o.span,{style:{color:"#56B6C2"},children:" ="}),l(o.span,{style:{color:"#E5C07B"},children:" window"}),l(o.span,{style:{color:"#ABB2BF"},children:"."}),l(o.span,{style:{color:"#E06C75"},children:"innerWidth"}),l(o.span,{style:{color:"#ABB2BF"},children:";"})]}),"\n",n(o.span,{"data-line":"",children:[l(o.span,{style:{color:"#C678DD"},children:" if"}),l(o.span,{style:{color:"#ABB2BF"},children:" ("}),l(o.span,{style:{color:"#E5C07B"},children:"bp"}),l(o.span,{style:{color:"#ABB2BF"},children:"."}),l(o.span,{style:{color:"#E06C75"},children:"lg"}),l(o.span,{style:{color:"#56B6C2"},children:" &&"}),l(o.span,{style:{color:"#E06C75"},children:" w"}),l(o.span,{style:{color:"#56B6C2"},children:" >="}),l(o.span,{style:{color:"#D19A66"},children:" 1024"}),l(o.span,{style:{color:"#ABB2BF"},children:") "}),l(o.span,{style:{color:"#C678DD"},children:"return"}),l(o.span,{style:{color:"#E5C07B"},children:" bp"}),l(o.span,{style:{color:"#ABB2BF"},children:"."}),l(o.span,{style:{color:"#E06C75"},children:"lg"}),l(o.span,{style:{color:"#ABB2BF"},children:";"})]}),"\n",n(o.span,{"data-line":"",children:[l(o.span,{style:{color:"#C678DD"},children:" if"}),l(o.span,{style:{color:"#ABB2BF"},children:" ("}),l(o.span,{style:{color:"#E5C07B"},children:"bp"}),l(o.span,{style:{color:"#ABB2BF"},children:"."}),l(o.span,{style:{color:"#E06C75"},children:"md"}),l(o.span,{style:{color:"#56B6C2"},children:" &&"}),l(o.span,{style:{color:"#E06C75"},children:" w"}),l(o.span,{style:{color:"#56B6C2"},children:" >="}),l(o.span,{style:{color:"#D19A66"},children:" 768"}),l(o.span,{style:{color:"#ABB2BF"},children:") "}),l(o.span,{style:{color:"#C678DD"},children:"return"}),l(o.span,{style:{color:"#E5C07B"},children:" bp"}),l(o.span,{style:{color:"#ABB2BF"},children:"."}),l(o.span,{style:{color:"#E06C75"},children:"md"}),l(o.span,{style:{color:"#ABB2BF"},children:";"})]}),"\n",n(o.span,{"data-line":"",children:[l(o.span,{style:{color:"#C678DD"},children:" if"}),l(o.span,{style:{color:"#ABB2BF"},children:" ("}),l(o.span,{style:{color:"#E5C07B"},children:"bp"}),l(o.span,{style:{color:"#ABB2BF"},children:"."}),l(o.span,{style:{color:"#E06C75"},children:"sm"}),l(o.span,{style:{color:"#56B6C2"},children:" &&"}),l(o.span,{style:{color:"#E06C75"},children:" w"}),l(o.span,{style:{color:"#56B6C2"},children:" >="}),l(o.span,{style:{color:"#D19A66"},children:" 640"}),l(o.span,{style:{color:"#ABB2BF"},children:") "}),l(o.span,{style:{color:"#C678DD"},children:"return"}),l(o.span,{style:{color:"#E5C07B"},children:" bp"}),l(o.span,{style:{color:"#ABB2BF"},children:"."}),l(o.span,{style:{color:"#E06C75"},children:"sm"}),l(o.span,{style:{color:"#ABB2BF"},children:";"})]}),"\n",n(o.span,{"data-line":"",children:[l(o.span,{style:{color:"#C678DD"},children:" return"}),l(o.span,{style:{color:"#E5C07B"},children:" bp"}),l(o.span,{style:{color:"#ABB2BF"},children:"."}),l(o.span,{style:{color:"#E06C75"},children:"default"}),l(o.span,{style:{color:"#ABB2BF"},children:";"})]}),"\n",l(o.span,{"data-line":"",children:l(o.span,{style:{color:"#ABB2BF"},children:"}"})}),"\n",l(o.span,{"data-line":"",children:" "}),"\n",n(o.span,{"data-line":"",children:[l(o.span,{style:{color:"#C678DD"},children:"function"}),l(o.span,{style:{color:"#61AFEF"},children:" useColumns"}),l(o.span,{style:{color:"#ABB2BF"},children:"("}),l(o.span,{style:{color:"#E06C75",fontStyle:"italic"},children:"bp"}),l(o.span,{style:{color:"#ABB2BF"},children:": "}),l(o.span,{style:{color:"#E5C07B"},children:"Breakpoints"}),l(o.span,{style:{color:"#ABB2BF"},children:"): "}),l(o.span,{style:{color:"#E5C07B"},children:"number"}),l(o.span,{style:{color:"#ABB2BF"},children:" {"})]}),"\n",n(o.span,{"data-line":"",children:[l(o.span,{style:{color:"#C678DD"},children:" const"}),l(o.span,{style:{color:"#ABB2BF"},children:" ["}),l(o.span,{style:{color:"#E5C07B"},children:"cols"}),l(o.span,{style:{color:"#ABB2BF"},children:", "}),l(o.span,{style:{color:"#E5C07B"},children:"setCols"}),l(o.span,{style:{color:"#ABB2BF"},children:"] "}),l(o.span,{style:{color:"#56B6C2"},children:"="}),l(o.span,{style:{color:"#61AFEF"},children:" useState"}),l(o.span,{style:{color:"#ABB2BF"},children:"("}),l(o.span,{style:{color:"#E5C07B"},children:"bp"}),l(o.span,{style:{color:"#ABB2BF"},children:"."}),l(o.span,{style:{color:"#E06C75"},children:"default"}),l(o.span,{style:{color:"#ABB2BF"},children:");"})]}),"\n",n(o.span,{"data-line":"",children:[l(o.span,{style:{color:"#61AFEF"},children:" useIsomorphicLayoutEffect"}),l(o.span,{style:{color:"#ABB2BF"},children:"(() "}),l(o.span,{style:{color:"#C678DD"},children:"=>"}),l(o.span,{style:{color:"#ABB2BF"},children:" {"})]}),"\n",n(o.span,{"data-line":"",children:[l(o.span,{style:{color:"#61AFEF"},children:" setCols"}),l(o.span,{style:{color:"#ABB2BF"},children:"("}),l(o.span,{style:{color:"#61AFEF"},children:"getColumns"}),l(o.span,{style:{color:"#ABB2BF"},children:"("}),l(o.span,{style:{color:"#E06C75"},children:"bp"}),l(o.span,{style:{color:"#ABB2BF"},children:"));"})]}),"\n",n(o.span,{"data-line":"",children:[l(o.span,{style:{color:"#C678DD"},children:" function"}),l(o.span,{style:{color:"#61AFEF"},children:" update"}),l(o.span,{style:{color:"#ABB2BF"},children:"() {"})]}),"\n",n(o.span,{"data-line":"",children:[l(o.span,{style:{color:"#61AFEF"},children:" setCols"}),l(o.span,{style:{color:"#ABB2BF"},children:"("}),l(o.span,{style:{color:"#61AFEF"},children:"getColumns"}),l(o.span,{style:{color:"#ABB2BF"},children:"("}),l(o.span,{style:{color:"#E06C75"},children:"bp"}),l(o.span,{style:{color:"#ABB2BF"},children:"));"})]}),"\n",l(o.span,{"data-line":"",children:l(o.span,{style:{color:"#ABB2BF"},children:" }"})}),"\n",n(o.span,{"data-line":"",children:[l(o.span,{style:{color:"#E5C07B"},children:" window"}),l(o.span,{style:{color:"#ABB2BF"},children:"."}),l(o.span,{style:{color:"#61AFEF"},children:"addEventListener"}),l(o.span,{style:{color:"#ABB2BF"},children:"("}),l(o.span,{style:{color:"#98C379"},children:'"resize"'}),l(o.span,{style:{color:"#ABB2BF"},children:", "}),l(o.span,{style:{color:"#E06C75"},children:"update"}),l(o.span,{style:{color:"#ABB2BF"},children:");"})]}),"\n",n(o.span,{"data-line":"",children:[l(o.span,{style:{color:"#C678DD"},children:" return"}),l(o.span,{style:{color:"#ABB2BF"},children:" () "}),l(o.span,{style:{color:"#C678DD"},children:"=>"}),l(o.span,{style:{color:"#E5C07B"},children:" window"}),l(o.span,{style:{color:"#ABB2BF"},children:"."}),l(o.span,{style:{color:"#61AFEF"},children:"removeEventListener"}),l(o.span,{style:{color:"#ABB2BF"},children:"("}),l(o.span,{style:{color:"#98C379"},children:'"resize"'}),l(o.span,{style:{color:"#ABB2BF"},children:", "}),l(o.span,{style:{color:"#E06C75"},children:"update"}),l(o.span,{style:{color:"#ABB2BF"},children:");"})]}),"\n",n(o.span,{"data-line":"",children:[l(o.span,{style:{color:"#ABB2BF"},children:" }, []); "}),l(o.span,{style:{color:"#7F848E",fontStyle:"italic"},children:"// eslint-disable-line react-hooks/exhaustive-deps"})]}),"\n",n(o.span,{"data-line":"",children:[l(o.span,{style:{color:"#C678DD"},children:" return"}),l(o.span,{style:{color:"#E06C75"},children:" cols"}),l(o.span,{style:{color:"#ABB2BF"},children:";"})]}),"\n",l(o.span,{"data-line":"",children:l(o.span,{style:{color:"#ABB2BF"},children:"}"})}),"\n",l(o.span,{"data-line":"",children:" "}),"\n",n(o.span,{"data-line":"",children:[l(o.span,{style:{color:"#C678DD"},children:"interface"}),l(o.span,{style:{color:"#E5C07B"},children:" MasonryGridProps"}),l(o.span,{style:{color:"#ABB2BF"},children:" {"})]}),"\n",n(o.span,{"data-line":"",children:[l(o.span,{style:{color:"#E06C75"},children:" children"}),l(o.span,{style:{color:"#ABB2BF"},children:": "}),l(o.span,{style:{color:"#E5C07B"},children:"ReactNode"}),l(o.span,{style:{color:"#ABB2BF"},children:";"})]}),"\n",n(o.span,{"data-line":"",children:[l(o.span,{style:{color:"#E06C75"},children:" gap"}),l(o.span,{style:{color:"#C678DD"},children:"?"}),l(o.span,{style:{color:"#ABB2BF"},children:": "}),l(o.span,{style:{color:"#E5C07B"},children:"string"}),l(o.span,{style:{color:"#ABB2BF"},children:";"})]}),"\n",n(o.span,{"data-line":"",children:[l(o.span,{style:{color:"#E06C75"},children:" breakpoints"}),l(o.span,{style:{color:"#ABB2BF"},children:": "}),l(o.span,{style:{color:"#E5C07B"},children:"Breakpoints"}),l(o.span,{style:{color:"#ABB2BF"},children:";"})]}),"\n",l(o.span,{"data-line":"",children:l(o.span,{style:{color:"#ABB2BF"},children:"}"})}),"\n",l(o.span,{"data-line":"",children:" "}),"\n",n(o.span,{"data-line":"",children:[l(o.span,{style:{color:"#C678DD"},children:"export"}),l(o.span,{style:{color:"#C678DD"},children:" function"}),l(o.span,{style:{color:"#61AFEF"},children:" MasonryGrid"}),l(o.span,{style:{color:"#ABB2BF"},children:"({ "}),l(o.span,{style:{color:"#E06C75",fontStyle:"italic"},children:"children"}),l(o.span,{style:{color:"#ABB2BF"},children:", "}),l(o.span,{style:{color:"#E06C75",fontStyle:"italic"},children:"gap"}),l(o.span,{style:{color:"#56B6C2"},children:" ="}),l(o.span,{style:{color:"#98C379"},children:' "gap-6"'}),l(o.span,{style:{color:"#ABB2BF"},children:", "}),l(o.span,{style:{color:"#E06C75",fontStyle:"italic"},children:"breakpoints"}),l(o.span,{style:{color:"#ABB2BF"},children:" }: "}),l(o.span,{style:{color:"#E5C07B"},children:"MasonryGridProps"}),l(o.span,{style:{color:"#ABB2BF"},children:") {"})]}),"\n",n(o.span,{"data-line":"",children:[l(o.span,{style:{color:"#C678DD"},children:" const"}),l(o.span,{style:{color:"#E5C07B"},children:" cols"}),l(o.span,{style:{color:"#56B6C2"},children:" ="}),l(o.span,{style:{color:"#61AFEF"},children:" useColumns"}),l(o.span,{style:{color:"#ABB2BF"},children:"("}),l(o.span,{style:{color:"#E06C75"},children:"breakpoints"}),l(o.span,{style:{color:"#ABB2BF"},children:");"})]}),"\n",l(o.span,{"data-line":"",children:" "}),"\n",l(o.span,{"data-line":"",children:l(o.span,{style:{color:"#7F848E",fontStyle:"italic"},children:" // Round-robin distribution: item i goes to column (i % cols)"})}),"\n",n(o.span,{"data-line":"",children:[l(o.span,{style:{color:"#C678DD"},children:" const"}),l(o.span,{style:{color:"#E5C07B"},children:" childArray"}),l(o.span,{style:{color:"#56B6C2"},children:" ="}),l(o.span,{style:{color:"#E5C07B"},children:" React"}),l(o.span,{style:{color:"#ABB2BF"},children:"."}),l(o.span,{style:{color:"#E5C07B"},children:"Children"}),l(o.span,{style:{color:"#ABB2BF"},children:"."}),l(o.span,{style:{color:"#61AFEF"},children:"toArray"}),l(o.span,{style:{color:"#ABB2BF"},children:"("}),l(o.span,{style:{color:"#E06C75"},children:"children"}),l(o.span,{style:{color:"#ABB2BF"},children:");"})]}),"\n",n(o.span,{"data-line":"",children:[l(o.span,{style:{color:"#C678DD"},children:" const"}),l(o.span,{style:{color:"#E5C07B"},children:" columns"}),l(o.span,{style:{color:"#ABB2BF"},children:": "}),l(o.span,{style:{color:"#E5C07B"},children:"ReactNode"}),l(o.span,{style:{color:"#ABB2BF"},children:"[][] "}),l(o.span,{style:{color:"#56B6C2"},children:"="}),l(o.span,{style:{color:"#E5C07B"},children:" Array"}),l(o.span,{style:{color:"#ABB2BF"},children:"."}),l(o.span,{style:{color:"#61AFEF"},children:"from"}),l(o.span,{style:{color:"#ABB2BF"},children:"({ "}),l(o.span,{style:{color:"#E06C75"},children:"length"}),l(o.span,{style:{color:"#ABB2BF"},children:": "}),l(o.span,{style:{color:"#E06C75"},children:"cols"}),l(o.span,{style:{color:"#ABB2BF"},children:" }, () "}),l(o.span,{style:{color:"#C678DD"},children:"=>"}),l(o.span,{style:{color:"#ABB2BF"},children:" []);"})]}),"\n",n(o.span,{"data-line":"",children:[l(o.span,{style:{color:"#E5C07B"},children:" childArray"}),l(o.span,{style:{color:"#ABB2BF"},children:"."}),l(o.span,{style:{color:"#61AFEF"},children:"forEach"}),l(o.span,{style:{color:"#ABB2BF"},children:"(("}),l(o.span,{style:{color:"#E06C75",fontStyle:"italic"},children:"child"}),l(o.span,{style:{color:"#ABB2BF"},children:", "}),l(o.span,{style:{color:"#E06C75",fontStyle:"italic"},children:"i"}),l(o.span,{style:{color:"#ABB2BF"},children:") "}),l(o.span,{style:{color:"#C678DD"},children:"=>"}),l(o.span,{style:{color:"#E06C75"},children:" columns"}),l(o.span,{style:{color:"#ABB2BF"},children:"["}),l(o.span,{style:{color:"#E06C75"},children:"i"}),l(o.span,{style:{color:"#56B6C2"},children:" %"}),l(o.span,{style:{color:"#E06C75"},children:" cols"}),l(o.span,{style:{color:"#ABB2BF"},children:"]."}),l(o.span,{style:{color:"#61AFEF"},children:"push"}),l(o.span,{style:{color:"#ABB2BF"},children:"("}),l(o.span,{style:{color:"#E06C75"},children:"child"}),l(o.span,{style:{color:"#ABB2BF"},children:"));"})]}),"\n",l(o.span,{"data-line":"",children:" "}),"\n",n(o.span,{"data-line":"",children:[l(o.span,{style:{color:"#C678DD"},children:" return"}),l(o.span,{style:{color:"#ABB2BF"},children:" ("})]}),"\n",n(o.span,{"data-line":"",children:[l(o.span,{style:{color:"#ABB2BF"},children:" <"}),l(o.span,{style:{color:"#E06C75"},children:"div"}),l(o.span,{style:{color:"#D19A66",fontStyle:"italic"},children:" className"}),l(o.span,{style:{color:"#56B6C2"},children:"="}),l(o.span,{style:{color:"#C678DD"},children:"{"}),l(o.span,{style:{color:"#98C379"},children:"`flex "}),l(o.span,{style:{color:"#C678DD"},children:"${"}),l(o.span,{style:{color:"#E06C75"},children:"gap"}),l(o.span,{style:{color:"#C678DD"},children:"}"}),l(o.span,{style:{color:"#98C379"},children:"`"}),l(o.span,{style:{color:"#C678DD"},children:"}"}),l(o.span,{style:{color:"#ABB2BF"},children:">"})]}),"\n",n(o.span,{"data-line":"",children:[l(o.span,{style:{color:"#C678DD"},children:" {"}),l(o.span,{style:{color:"#E5C07B"},children:"columns"}),l(o.span,{style:{color:"#ABB2BF"},children:"."}),l(o.span,{style:{color:"#61AFEF"},children:"map"}),l(o.span,{style:{color:"#ABB2BF"},children:"(("}),l(o.span,{style:{color:"#E06C75",fontStyle:"italic"},children:"col"}),l(o.span,{style:{color:"#ABB2BF"},children:", "}),l(o.span,{style:{color:"#E06C75",fontStyle:"italic"},children:"colIdx"}),l(o.span,{style:{color:"#ABB2BF"},children:") "}),l(o.span,{style:{color:"#C678DD"},children:"=>"}),l(o.span,{style:{color:"#ABB2BF"},children:" ("})]}),"\n",n(o.span,{"data-line":"",children:[l(o.span,{style:{color:"#ABB2BF"},children:" <"}),l(o.span,{style:{color:"#E06C75"},children:"div"}),l(o.span,{style:{color:"#D19A66",fontStyle:"italic"},children:" key"}),l(o.span,{style:{color:"#56B6C2"},children:"="}),l(o.span,{style:{color:"#C678DD"},children:"{"}),l(o.span,{style:{color:"#E06C75"},children:"colIdx"}),l(o.span,{style:{color:"#C678DD"},children:"}"}),l(o.span,{style:{color:"#D19A66",fontStyle:"italic"},children:" className"}),l(o.span,{style:{color:"#56B6C2"},children:"="}),l(o.span,{style:{color:"#C678DD"},children:"{"}),l(o.span,{style:{color:"#98C379"},children:"`flex-1 flex flex-col "}),l(o.span,{style:{color:"#C678DD"},children:"${"}),l(o.span,{style:{color:"#E06C75"},children:"gap"}),l(o.span,{style:{color:"#C678DD"},children:"}"}),l(o.span,{style:{color:"#98C379"},children:"`"}),l(o.span,{style:{color:"#C678DD"},children:"}"}),l(o.span,{style:{color:"#ABB2BF"},children:">"})]}),"\n",n(o.span,{"data-line":"",children:[l(o.span,{style:{color:"#C678DD"},children:" {"}),l(o.span,{style:{color:"#E06C75"},children:"col"}),l(o.span,{style:{color:"#C678DD"},children:"}"})]}),"\n",n(o.span,{"data-line":"",children:[l(o.span,{style:{color:"#ABB2BF"},children:" "})]}),"\n",n(o.span,{"data-line":"",children:[l(o.span,{style:{color:"#ABB2BF"},children:" ))"}),l(o.span,{style:{color:"#C678DD"},children:"}"})]}),"\n",n(o.span,{"data-line":"",children:[l(o.span,{style:{color:"#ABB2BF"},children:" "})]}),"\n",l(o.span,{"data-line":"",children:l(o.span,{style:{color:"#ABB2BF"},children:" );"})}),"\n",l(o.span,{"data-line":"",children:l(o.span,{style:{color:"#ABB2BF"},children:"}"})})]})})}),"\n",l(o.p,{children:"Usage on the blog page:"}),"\n",l(o.figure,{"data-rehype-pretty-code-figure":"",children:l(o.pre,{tabIndex:"0","data-language":"tsx","data-theme":"one-dark-pro",children:n(o.code,{"data-language":"tsx","data-theme":"one-dark-pro",style:{display:"grid"},children:[n(o.span,{"data-line":"",children:[l(o.span,{style:{color:"#ABB2BF"},children:"<"}),l(o.span,{style:{color:"#E5C07B"},children:"MasonryGrid"}),l(o.span,{style:{color:"#D19A66",fontStyle:"italic"},children:" gap"}),l(o.span,{style:{color:"#56B6C2"},children:"="}),l(o.span,{style:{color:"#98C379"},children:'"gap-6"'}),l(o.span,{style:{color:"#D19A66",fontStyle:"italic"},children:" breakpoints"}),l(o.span,{style:{color:"#56B6C2"},children:"="}),l(o.span,{style:{color:"#C678DD"},children:"{"}),l(o.span,{style:{color:"#ABB2BF"},children:"{ "}),l(o.span,{style:{color:"#E06C75"},children:"default"}),l(o.span,{style:{color:"#ABB2BF"},children:": "}),l(o.span,{style:{color:"#D19A66"},children:"1"}),l(o.span,{style:{color:"#ABB2BF"},children:", "}),l(o.span,{style:{color:"#E06C75"},children:"md"}),l(o.span,{style:{color:"#ABB2BF"},children:": "}),l(o.span,{style:{color:"#D19A66"},children:"2"}),l(o.span,{style:{color:"#ABB2BF"},children:", "}),l(o.span,{style:{color:"#E06C75"},children:"lg"}),l(o.span,{style:{color:"#ABB2BF"},children:": "}),l(o.span,{style:{color:"#D19A66"},children:"3"}),l(o.span,{style:{color:"#ABB2BF"},children:" }"}),l(o.span,{style:{color:"#C678DD"},children:"}"}),l(o.span,{style:{color:"#ABB2BF"},children:">"})]}),"\n",n(o.span,{"data-line":"",children:[l(o.span,{style:{color:"#C678DD"},children:" {"}),l(o.span,{style:{color:"#E5C07B"},children:"filtered"}),l(o.span,{style:{color:"#ABB2BF"},children:"."}),l(o.span,{style:{color:"#61AFEF"},children:"map"}),l(o.span,{style:{color:"#ABB2BF"},children:"(("}),l(o.span,{style:{color:"#E06C75",fontStyle:"italic"},children:"post"}),l(o.span,{style:{color:"#ABB2BF"},children:") "}),l(o.span,{style:{color:"#C678DD"},children:"=>"}),l(o.span,{style:{color:"#ABB2BF"},children:" ("})]}),"\n",n(o.span,{"data-line":"",children:[l(o.span,{style:{color:"#ABB2BF"},children:" <"}),l(o.span,{style:{color:"#E5C07B"},children:"ContentCard"}),l(o.span,{style:{color:"#D19A66",fontStyle:"italic"},children:" key"}),l(o.span,{style:{color:"#56B6C2"},children:"="}),l(o.span,{style:{color:"#C678DD"},children:"{"}),l(o.span,{style:{color:"#E5C07B"},children:"post"}),l(o.span,{style:{color:"#ABB2BF"},children:"."}),l(o.span,{style:{color:"#E06C75"},children:"slug"}),l(o.span,{style:{color:"#C678DD"},children:"}"}),l(o.span,{style:{color:"#D19A66",fontStyle:"italic"},children:" item"}),l(o.span,{style:{color:"#56B6C2"},children:"="}),l(o.span,{style:{color:"#C678DD"},children:"{"}),l(o.span,{style:{color:"#E06C75"},children:"post"}),l(o.span,{style:{color:"#C678DD"},children:"}"}),l(o.span,{style:{color:"#ABB2BF"},children:" />"})]}),"\n",n(o.span,{"data-line":"",children:[l(o.span,{style:{color:"#ABB2BF"},children:" ))"}),l(o.span,{style:{color:"#C678DD"},children:"}"})]}),"\n",n(o.span,{"data-line":"",children:[l(o.span,{style:{color:"#ABB2BF"},children:""})]})]})})}),"\n",l(o.p,{children:"A few implementation notes:"}),"\n",n(o.p,{children:[l(o.strong,{children:l(o.code,{children:"useIsomorphicLayoutEffect"})})," — Next.js renders on the server where ",l(o.code,{children:"window"})," does not exist. ",l(o.code,{children:"useLayoutEffect"})," throws a warning in SSR context. The isomorphic pattern falls back to ",l(o.code,{children:"useEffect"})," server-side, which is a no-op, and uses ",l(o.code,{children:"useLayoutEffect"})," client-side so the column count is applied before the first paint — preventing a flash of single-column layout on page load."]}),"\n",n(o.p,{children:[n(o.strong,{children:[l(o.code,{children:"bp.default"})," as SSR value"]})," — ",l(o.code,{children:"useState(bp.default)"})," means the server always renders the smallest column count. On hydration, ",l(o.code,{children:"useIsomorphicLayoutEffect"})," fires synchronously and updates to the correct column count for the viewport. This produces the correct layout with zero layout shift for most visitors, since ",l(o.code,{children:"default: 1"})," renders a valid single-column layout that gets upgraded immediately."]}),"\n",n(o.p,{children:[n(o.strong,{children:[l(o.code,{children:"flex-1"})," on column divs"]})," — columns share available width equally. This is simpler than computing ",l(o.code,{children:"width: calc(100% / cols)"})," and works correctly with arbitrary gap sizes."]}),"\n",n(o.p,{children:[l(o.strong,{children:"Gap as a Tailwind class string"})," — ",l(o.code,{children:'gap="gap-6"'})," lets the caller use any Tailwind spacing token. The same gap applies both between columns (on the flex row) and between items within a column (on the flex column). Passing separate horizontal and vertical gap props is straightforward if you need them."]}),"\n",l(o.h2,{children:"A Note on Native CSS Masonry"}),"\n",n(o.p,{children:["CSS is getting native masonry layout via the ",l(o.code,{children:"display: masonry"})," / ",l(o.code,{children:"grid-template-rows: masonry"})," spec (currently renamed to ",l(o.strong,{children:"CSS Grid Lanes"}),"). Safari 26.4 shipped stable support. Chrome and Firefox have it behind flags."]}),"\n",l("div",{className:"diagonal-line",children:l(o.figure,{"data-rehype-pretty-code-figure":"",children:l(o.pre,{tabIndex:"0","data-language":"css","data-theme":"one-dark-pro",children:n(o.code,{"data-language":"css","data-theme":"one-dark-pro",style:{display:"grid"},children:[l(o.span,{"data-line":"",children:l(o.span,{style:{color:"#7F848E",fontStyle:"italic"},children:"/* ❌ Not production-ready — 0.02% global browser support (early 2026) */"})}),"\n",l(o.span,{"data-line":"",children:" "}),"\n",l(o.span,{"data-line":"",children:l(o.span,{style:{color:"#7F848E",fontStyle:"italic"},children:"/* Older spec name — still referenced widely */"})}),"\n",n(o.span,{"data-line":"",children:[l(o.span,{style:{color:"#D19A66"},children:".grid"}),l(o.span,{style:{color:"#ABB2BF"},children:" {"})]}),"\n",l(o.span,{"data-line":"",children:l(o.span,{style:{color:"#ABB2BF"},children:" display: masonry;"})}),"\n",n(o.span,{"data-line":"",children:[l(o.span,{style:{color:"#ABB2BF"},children:" masonry-template-tracks: "}),l(o.span,{style:{color:"#56B6C2"},children:"repeat"}),l(o.span,{style:{color:"#ABB2BF"},children:"("}),l(o.span,{style:{color:"#D19A66"},children:"3"}),l(o.span,{style:{color:"#ABB2BF"},children:", "}),l(o.span,{style:{color:"#D19A66"},children:"1"}),l(o.span,{style:{color:"#E06C75"},children:"fr"}),l(o.span,{style:{color:"#ABB2BF"},children:");"})]}),"\n",n(o.span,{"data-line":"",children:[l(o.span,{style:{color:"#ABB2BF"},children:" gap: "}),l(o.span,{style:{color:"#D19A66"},children:"1.5"}),l(o.span,{style:{color:"#E06C75"},children:"rem"}),l(o.span,{style:{color:"#ABB2BF"},children:";"})]}),"\n",l(o.span,{"data-line":"",children:l(o.span,{style:{color:"#ABB2BF"},children:"}"})}),"\n",l(o.span,{"data-line":"",children:" "}),"\n",l(o.span,{"data-line":"",children:l(o.span,{style:{color:"#7F848E",fontStyle:"italic"},children:"/* Newer name (CSS Grid Lanes) — same situation */"})}),"\n",n(o.span,{"data-line":"",children:[l(o.span,{style:{color:"#D19A66"},children:".grid"}),l(o.span,{style:{color:"#ABB2BF"},children:" {"})]}),"\n",l(o.span,{"data-line":"",children:l(o.span,{style:{color:"#ABB2BF"},children:" display: grid-lanes;"})}),"\n",n(o.span,{"data-line":"",children:[l(o.span,{style:{color:"#ABB2BF"},children:" grid-template-columns: "}),l(o.span,{style:{color:"#56B6C2"},children:"repeat"}),l(o.span,{style:{color:"#ABB2BF"},children:"("}),l(o.span,{style:{color:"#D19A66"},children:"3"}),l(o.span,{style:{color:"#ABB2BF"},children:", "}),l(o.span,{style:{color:"#D19A66"},children:"1"}),l(o.span,{style:{color:"#E06C75"},children:"fr"}),l(o.span,{style:{color:"#ABB2BF"},children:");"})]}),"\n",n(o.span,{"data-line":"",children:[l(o.span,{style:{color:"#ABB2BF"},children:" gap: "}),l(o.span,{style:{color:"#D19A66"},children:"1.5"}),l(o.span,{style:{color:"#E06C75"},children:"rem"}),l(o.span,{style:{color:"#ABB2BF"},children:";"})]}),"\n",l(o.span,{"data-line":"",children:l(o.span,{style:{color:"#ABB2BF"},children:"}"})})]})})})}),"\n",n(o.p,{children:["You will see both names in articles and browser release notes — ",l(o.code,{children:"display: masonry"})," was the original proposal, ",l(o.code,{children:"display: grid-lanes"})," is the current direction after the CSS Working Group renamed the spec in 2024. They are the same feature at different stages. Neither is production-ready: only Safari 26.4 ships stable support, Chrome and Firefox are behind flags. Global coverage in stable browsers is approximately 0.02% as of early 2026. Until this lands across all engines, the JS approach in this post is what you ship."]}),"\n",l(o.hr,{}),"\n",l(o.p,{children:"Reading order in a masonry grid is one of those problems that looks solved until you add real content. The popular reorder algorithm assumes equal heights — a constraint you can't guarantee in any real application. Separate flex columns with round-robin JS distribution is the correct fix: reading order is always exact, the implementation is transparent, and it works in Next.js without any client-side workarounds beyond the isomorphic effect hook."}),"\n",n(o.p,{children:["I build portfolio sites, SaaS frontends, and e-commerce UIs where layout correctness matters. If you need a senior developer who handles the full stack — from grid algorithms to checkout flows — ",l(o.a,{href:"/contact",children:"get in touch"}),"."]}),"\n",l(o.hr,{}),"\n",l(o.p,{children:l(o.strong,{children:"Related reading:"})}),"\n",n(o.ul,{children:["\n",n(o.li,{children:[l(o.a,{href:"/blog/css-svg-animation-keyframe-sync-no-library",children:"How I Synced 6 CSS Keyframe Animations Without a Single Library"})," — more CSS-from-first-principles work"]}),"\n",n(o.li,{children:[l(o.a,{href:"/blog/nextjs-dynamic-og-images",children:"Dynamic OG Images in Next.js: Why opengraph-image.tsx Hangs Turbopack"})," — another case where the documented approach breaks in production"]}),"\n",n(o.li,{children:[l(o.a,{href:"https://medium.com/hackernoon/masonry-layout-technique-react-demo-of-100-css-control-of-the-view-e4190fa4296",rel:"noopener noreferrer",target:"_blank",children:"Jesse Korzan — Masonry Layout Technique (Medium)"})," — the original reorder technique, works perfectly with uniform card heights"]}),"\n",n(o.li,{children:[l(o.a,{href:"https://www.w3.org/TR/css-grid-3/",rel:"noopener noreferrer",target:"_blank",children:"CSS Grid Level 3"})," — Masonry Layout (W3C draft spec for native masonry)"]}),"\n",n(o.li,{children:[l(o.a,{href:"https://developer.mozilla.org/en-US/docs/Web/CSS/column-count",rel:"noopener noreferrer",target:"_blank",children:"MDN: column-count"})," — official reference for the CSS primitive"]}),"\n"]})]})}return{default:function(e={}){const{wrapper:n}=e.components||{};return n?l(n,{...e,children:l(_createMdxContent,{...e})}):_createMdxContent(e)}};

#UI