[{"data":1,"prerenderedAt":3073},["ShallowReactive",2],{"docs-navigation:en":3,"content-page:docs:qpy-Zcg8hEEiCRblP2r3o3UqJsGu2cs5tWmmnN8oD5o":188,"content-page-surround:docs:qpy-Zcg8hEEiCRblP2r3o3UqJsGu2cs5tWmmnN8oD5o":3062,"i-logos:vue":3065,"i-lucide:clipboard":3070},[4,49,110,172],{"title":5,"page":6,"canonicalKey":7,"locale":8,"id":9,"draft":6,"icon":10,"sidebar":11,"children":12},"Start",false,"1","en","content:docs:1.start:.navigation.yml","i-lucide-rocket","section",[13,19,24,29,34,39,44],{"title":14,"id":15,"canonicalKey":16,"locale":8,"draft":6,"navigation":17,"path":18},"Introduction","content:docs:1.start:1.introduction.md","1\u002F1",{"title":14},"\u002Fdocs\u002Fstart\u002Fintroduction",{"title":20,"id":21,"canonicalKey":22,"locale":8,"draft":6,"path":23},"Get started","content:docs:1.start:2.get-started.md","1\u002F2","\u002Fdocs\u002Fstart\u002Fget-started",{"title":25,"id":26,"canonicalKey":27,"locale":8,"draft":6,"path":28},"Examples","content:docs:1.start:3.examples.md","1\u002F3","\u002Fdocs\u002Fstart\u002Fexamples",{"title":30,"id":31,"canonicalKey":32,"locale":8,"draft":6,"path":33},"AI coding agents","content:docs:1.start:4.ai-agents.md","1\u002F4","\u002Fdocs\u002Fstart\u002Fai-agents",{"title":35,"id":36,"canonicalKey":37,"locale":8,"draft":6,"path":38},"Use Nuxt Photo with Vue","content:docs:1.start:5.plain-vue.md","1\u002F5","\u002Fdocs\u002Fstart\u002Fplain-vue",{"title":40,"id":41,"canonicalKey":42,"locale":8,"draft":6,"path":43},"Compare gallery approaches","content:docs:1.start:6.compare-approaches.md","1\u002F6","\u002Fdocs\u002Fstart\u002Fcompare-approaches",{"title":45,"id":46,"canonicalKey":47,"locale":8,"draft":6,"path":48},"Performance and bundle size","content:docs:1.start:7.performance-and-bundle-size.md","1\u002F7","\u002Fdocs\u002Fstart\u002Fperformance-and-bundle-size",{"title":50,"page":6,"canonicalKey":51,"locale":8,"id":52,"draft":6,"icon":53,"children":54},"Guides","2","content:docs:2.guides:.navigation.yml","i-lucide-route",[55,60,65,70,75,80,85,90,95,100,105],{"title":56,"id":57,"canonicalKey":58,"locale":8,"draft":6,"path":59},"Use your own photos","content:docs:2.guides:1.use-your-photos.md","2\u002F1","\u002Fdocs\u002Fguides\u002Fuse-your-photos",{"title":61,"id":62,"canonicalKey":63,"locale":8,"draft":6,"path":64},"Responsive layouts and SSR","content:docs:2.guides:2.responsive-layouts.md","2\u002F2","\u002Fdocs\u002Fguides\u002Fresponsive-layouts",{"title":66,"id":67,"canonicalKey":68,"locale":8,"draft":6,"path":69},"Share one lightbox","content:docs:2.guides:3.share-one-lightbox.md","2\u002F3","\u002Fdocs\u002Fguides\u002Fshare-one-lightbox",{"title":71,"id":72,"canonicalKey":73,"locale":8,"draft":6,"path":74},"Build a carousel","content:docs:2.guides:4.build-a-carousel.md","2\u002F4","\u002Fdocs\u002Fguides\u002Fbuild-a-carousel",{"title":76,"id":77,"canonicalKey":78,"locale":8,"draft":6,"path":79},"Deliver images","content:docs:2.guides:5.deliver-images.md","2\u002F5","\u002Fdocs\u002Fguides\u002Fdeliver-images",{"title":81,"id":82,"canonicalKey":83,"locale":8,"draft":6,"path":84},"Integrate a custom image service","content:docs:2.guides:6.integrate-a-custom-image-service.md","2\u002F6","\u002Fdocs\u002Fguides\u002Fintegrate-a-custom-image-service",{"title":86,"id":87,"canonicalKey":88,"locale":8,"draft":6,"path":89},"Style and theme","content:docs:2.guides:7.style-and-theme.md","2\u002F7","\u002Fdocs\u002Fguides\u002Fstyle-and-theme",{"title":91,"id":92,"canonicalKey":93,"locale":8,"draft":6,"path":94},"Customize the lightbox","content:docs:2.guides:8.customize-the-built-in-lightbox.md","2\u002F8","\u002Fdocs\u002Fguides\u002Fcustomize-the-built-in-lightbox",{"title":96,"id":97,"canonicalKey":98,"locale":8,"draft":6,"path":99},"Create a custom thumbnail layout","content:docs:2.guides:9.create-a-custom-thumbnail-layout.md","2\u002F9","\u002Fdocs\u002Fguides\u002Fcreate-a-custom-thumbnail-layout",{"title":101,"id":102,"canonicalKey":103,"locale":8,"draft":6,"path":104},"Build a lightbox from primitives","content:docs:2.guides:10.build-a-lightbox-from-primitives.md","2\u002F10","\u002Fdocs\u002Fguides\u002Fbuild-a-lightbox-from-primitives",{"title":106,"id":107,"canonicalKey":108,"locale":8,"draft":6,"path":109},"Control the lightbox from code","content:docs:2.guides:11.control-the-lightbox.md","2\u002F11","\u002Fdocs\u002Fguides\u002Fcontrol-the-lightbox",{"title":111,"id":112,"canonicalKey":113,"locale":8,"draft":6,"icon":114,"sidebar":11,"path":115,"children":116},"Reference","content:docs:3.reference:.navigation.yml","3","i-lucide-braces","\u002Fdocs\u002Freference",[117,122,127,132,137,142,147,152,157,162,167],{"title":118,"id":119,"canonicalKey":120,"locale":8,"draft":6,"path":121},"Photo","content:docs:3.reference:2.photo.md","3\u002F2","\u002Fdocs\u002Freference\u002Fphoto",{"title":123,"id":124,"canonicalKey":125,"locale":8,"draft":6,"path":126},"PhotoAlbum","content:docs:3.reference:3.photo-album.md","3\u002F3","\u002Fdocs\u002Freference\u002Fphoto-album",{"title":128,"id":129,"canonicalKey":130,"locale":8,"draft":6,"path":131},"PhotoGroup","content:docs:3.reference:4.photo-group.md","3\u002F4","\u002Fdocs\u002Freference\u002Fphoto-group",{"title":133,"id":134,"canonicalKey":135,"locale":8,"draft":6,"path":136},"PhotoCarousel","content:docs:3.reference:5.photo-carousel.md","3\u002F5","\u002Fdocs\u002Freference\u002Fphoto-carousel",{"title":138,"id":139,"canonicalKey":140,"locale":8,"draft":6,"path":141},"Lightbox","content:docs:3.reference:6.lightbox.md","3\u002F6","\u002Fdocs\u002Freference\u002Flightbox",{"title":143,"id":144,"canonicalKey":145,"locale":8,"draft":6,"path":146},"Primitives","content:docs:3.reference:7.primitives.md","3\u002F7","\u002Fdocs\u002Freference\u002Fprimitives",{"title":148,"id":149,"canonicalKey":150,"locale":8,"draft":6,"path":151},"Composables","content:docs:3.reference:8.composables.md","3\u002F8","\u002Fdocs\u002Freference\u002Fcomposables",{"title":153,"id":154,"canonicalKey":155,"locale":8,"draft":6,"path":156},"Configuration and labels","content:docs:3.reference:9.configuration-and-labels.md","3\u002F9","\u002Fdocs\u002Freference\u002Fconfiguration-and-labels",{"title":158,"id":159,"canonicalKey":160,"locale":8,"draft":6,"path":161},"Types","content:docs:3.reference:10.types.md","3\u002F10","\u002Fdocs\u002Freference\u002Ftypes",{"title":163,"id":164,"canonicalKey":165,"locale":8,"draft":6,"path":166},"CSS","content:docs:3.reference:11.css.md","3\u002F11","\u002Fdocs\u002Freference\u002Fcss",{"title":168,"id":169,"canonicalKey":170,"locale":8,"draft":6,"path":171},"Package exports","content:docs:3.reference:12.package-exports.md","3\u002F12","\u002Fdocs\u002Freference\u002Fpackage-exports",{"title":173,"page":6,"canonicalKey":174,"locale":8,"id":175,"draft":6,"icon":176,"children":177},"Help","4","content:docs:4.help:.navigation.yml","i-lucide-life-buoy",[178,183],{"title":179,"id":180,"canonicalKey":181,"locale":8,"draft":6,"path":182},"Troubleshooting","content:docs:4.help:1.troubleshooting.md","4\u002F1","\u002Fdocs\u002Fhelp\u002Ftroubleshooting",{"title":184,"id":185,"canonicalKey":186,"locale":8,"draft":6,"path":187},"Known constraints","content:docs:4.help:2.known-constraints.md","4\u002F2","\u002Fdocs\u002Fhelp\u002Fknown-constraints",{"title":61,"description":189,"redirectFrom":190,"body":194,"type":3049,"id":62,"canonicalKey":63,"draft":6,"partial":6,"locale":8,"collection":3050,"navigationFile":6,"file":3051,"route":3057,"resolution":3059},"Choose rows, columns, masonry, grid, bento, mosaic, or accordion, set row height, columns, and spacing per container width with responsive(), crop photos into tiles with a featured photo or a +N count, and prevent layout shift during SSR and hydration with defaultContainerWidth and breakpoints.",[191,192,193],"\u002Fdocs\u002Fguides\u002Ftune-responsive-layouts","\u002Fdocs\u002Fconcepts\u002Flayouts-and-responsive-values","\u002Fdocs\u002Fconcepts\u002Fssr-and-layout-stability",{"type":195,"children":196,"toc":3039},"root",[197,210,216,223,403,753,809,815,855,1547,1825,1830,1971,1977,1986,2286,2291,2322,2477,2482,2488,2512,2730,2741,2752,2972,2981,3001,3007],{"type":198,"tag":199,"props":200,"children":201},"element","p",{},[202,208],{"type":198,"tag":203,"props":204,"children":205},"code",{},[206],{"type":207,"value":123},"text",{"type":207,"value":209}," has seven layouts. Its numbers, such as the column count, can\nchange with the width of the album's container, and the server can render the\nsame layout that the browser will show.",{"type":198,"tag":211,"props":212,"children":215},"album-layout-lab",{"$":213},{"component":214,"block":214},1,[],{"type":198,"tag":217,"props":218,"children":220},"h2",{"id":219},"choose-a-layout",[221],{"type":207,"value":222},"Choose a layout",{"type":198,"tag":224,"props":225,"children":226},"table",{},[227,251],{"type":198,"tag":228,"props":229,"children":230},"thead",{},[231],{"type":198,"tag":232,"props":233,"children":234},"tr",{},[235,241,246],{"type":198,"tag":236,"props":237,"children":238},"th",{},[239],{"type":207,"value":240},"Layout",{"type":198,"tag":236,"props":242,"children":243},{},[244],{"type":207,"value":245},"What it does",{"type":198,"tag":236,"props":247,"children":248},{},[249],{"type":207,"value":250},"Use it when",{"type":198,"tag":252,"props":253,"children":254},"tbody",{},[255,277,298,319,340,361,382],{"type":198,"tag":232,"props":256,"children":257},{},[258,267,272],{"type":198,"tag":259,"props":260,"children":261},"td",{},[262],{"type":198,"tag":203,"props":263,"children":264},{},[265],{"type":207,"value":266},"rows",{"type":198,"tag":259,"props":268,"children":269},{},[270],{"type":207,"value":271},"Photos share a row height and each row fills the width. Default.",{"type":198,"tag":259,"props":273,"children":274},{},[275],{"type":207,"value":276},"Photos have mixed shapes.",{"type":198,"tag":232,"props":278,"children":279},{},[280,288,293],{"type":198,"tag":259,"props":281,"children":282},{},[283],{"type":198,"tag":203,"props":284,"children":285},{},[286],{"type":207,"value":287},"columns",{"type":198,"tag":259,"props":289,"children":290},{},[291],{"type":207,"value":292},"Photos fill a fixed number of columns in reading order. Column widths vary so all columns end at the same height.",{"type":198,"tag":259,"props":294,"children":295},{},[296],{"type":207,"value":297},"The column count and order matter.",{"type":198,"tag":232,"props":299,"children":300},{},[301,309,314],{"type":198,"tag":259,"props":302,"children":303},{},[304],{"type":198,"tag":203,"props":305,"children":306},{},[307],{"type":207,"value":308},"masonry",{"type":198,"tag":259,"props":310,"children":311},{},[312],{"type":207,"value":313},"Equal-width columns. Each photo goes into the shortest column.",{"type":198,"tag":259,"props":315,"children":316},{},[317],{"type":207,"value":318},"Density matters more than strict order.",{"type":198,"tag":232,"props":320,"children":321},{},[322,330,335],{"type":198,"tag":259,"props":323,"children":324},{},[325],{"type":198,"tag":203,"props":326,"children":327},{},[328],{"type":207,"value":329},"grid",{"type":198,"tag":259,"props":331,"children":332},{},[333],{"type":207,"value":334},"Same-size tiles in equal columns. Photos are cropped.",{"type":198,"tag":259,"props":336,"children":337},{},[338],{"type":207,"value":339},"Many photos must fit on one screen.",{"type":198,"tag":232,"props":341,"children":342},{},[343,351,356],{"type":198,"tag":259,"props":344,"children":345},{},[346],{"type":198,"tag":203,"props":347,"children":348},{},[349],{"type":207,"value":350},"bento",{"type":198,"tag":259,"props":352,"children":353},{},[354],{"type":207,"value":355},"Big and small tiles on a grid without gaps. Photos are cropped.",{"type":198,"tag":259,"props":357,"children":358},{},[359],{"type":207,"value":360},"A portfolio or project page.",{"type":198,"tag":232,"props":362,"children":363},{},[364,372,377],{"type":198,"tag":259,"props":365,"children":366},{},[367],{"type":198,"tag":203,"props":368,"children":369},{},[370],{"type":207,"value":371},"mosaic",{"type":198,"tag":259,"props":373,"children":374},{},[375],{"type":207,"value":376},"A few photos fill one frame; the last tile shows how many more there are.",{"type":198,"tag":259,"props":378,"children":379},{},[380],{"type":207,"value":381},"A card, a post, or a header.",{"type":198,"tag":232,"props":383,"children":384},{},[385,393,398],{"type":198,"tag":259,"props":386,"children":387},{},[388],{"type":198,"tag":203,"props":389,"children":390},{},[391],{"type":207,"value":392},"accordion",{"type":198,"tag":259,"props":394,"children":395},{},[396],{"type":207,"value":397},"Slices share one strip; the slice under the pointer or focus opens.",{"type":198,"tag":259,"props":399,"children":400},{},[401],{"type":207,"value":402},"A hero area with 3 to 8 photos.",{"type":198,"tag":404,"props":405,"children":408},"pre",{"language":406,"class":407},"vue","shiki shiki-themes material-theme-lighter material-theme-palenight dark:material-theme-palenight",[409],{"type":198,"tag":203,"props":410,"children":412},{"class":411},"language-vue",[413,541,543,648,649],{"type":198,"tag":414,"props":415,"children":418},"span",{"class":416,"style":417},"line","display: inline",[419,425,430,435,441,446,451,456,460,464,469,473,477,482,487,492,497,502,507,512,517,521,527,532,536],{"type":198,"tag":414,"props":420,"children":422},{"style":421},"color:#39ADB5;--shiki-dark:#89DDFF",[423],{"type":207,"value":424},"\u003C",{"type":198,"tag":414,"props":426,"children":428},{"style":427},"color:#E53935;--shiki-dark:#F07178",[429],{"type":207,"value":123},{"type":198,"tag":414,"props":431,"children":432},{"style":421},[433],{"type":207,"value":434}," :",{"type":198,"tag":414,"props":436,"children":438},{"style":437},"color:#9C3EDA;--shiki-dark:#C792EA",[439],{"type":207,"value":440},"photos",{"type":198,"tag":414,"props":442,"children":443},{"style":421},[444],{"type":207,"value":445},"=",{"type":198,"tag":414,"props":447,"children":448},{"style":421},[449],{"type":207,"value":450},"\"",{"type":198,"tag":414,"props":452,"children":454},{"style":453},"color:#90A4AE;--shiki-dark:#BABED8",[455],{"type":207,"value":440},{"type":198,"tag":414,"props":457,"children":458},{"style":421},[459],{"type":207,"value":450},{"type":198,"tag":414,"props":461,"children":462},{"style":421},[463],{"type":207,"value":434},{"type":198,"tag":414,"props":465,"children":466},{"style":437},[467],{"type":207,"value":468},"layout",{"type":198,"tag":414,"props":470,"children":471},{"style":421},[472],{"type":207,"value":445},{"type":198,"tag":414,"props":474,"children":475},{"style":421},[476],{"type":207,"value":450},{"type":198,"tag":414,"props":478,"children":479},{"style":421},[480],{"type":207,"value":481},"{",{"type":198,"tag":414,"props":483,"children":484},{"style":427},[485],{"type":207,"value":486}," type",{"type":198,"tag":414,"props":488,"children":489},{"style":421},[490],{"type":207,"value":491},":",{"type":198,"tag":414,"props":493,"children":494},{"style":421},[495],{"type":207,"value":496}," '",{"type":198,"tag":414,"props":498,"children":500},{"style":499},"color:#91B859;--shiki-dark:#C3E88D",[501],{"type":207,"value":266},{"type":198,"tag":414,"props":503,"children":504},{"style":421},[505],{"type":207,"value":506},"'",{"type":198,"tag":414,"props":508,"children":509},{"style":421},[510],{"type":207,"value":511},",",{"type":198,"tag":414,"props":513,"children":514},{"style":427},[515],{"type":207,"value":516}," targetRowHeight",{"type":198,"tag":414,"props":518,"children":519},{"style":421},[520],{"type":207,"value":491},{"type":198,"tag":414,"props":522,"children":524},{"style":523},"color:#F76D47;--shiki-dark:#F78C6C",[525],{"type":207,"value":526}," 240",{"type":198,"tag":414,"props":528,"children":529},{"style":421},[530],{"type":207,"value":531}," }",{"type":198,"tag":414,"props":533,"children":534},{"style":421},[535],{"type":207,"value":450},{"type":198,"tag":414,"props":537,"children":538},{"style":421},[539],{"type":207,"value":540}," \u002F>",{"type":207,"value":542},"\n",{"type":198,"tag":414,"props":544,"children":545},{"class":416,"style":417},[546,550,554,558,562,566,570,574,578,582,586,590,594,598,602,606,610,614,618,622,627,631,636,640,644],{"type":198,"tag":414,"props":547,"children":548},{"style":421},[549],{"type":207,"value":424},{"type":198,"tag":414,"props":551,"children":552},{"style":427},[553],{"type":207,"value":123},{"type":198,"tag":414,"props":555,"children":556},{"style":421},[557],{"type":207,"value":434},{"type":198,"tag":414,"props":559,"children":560},{"style":437},[561],{"type":207,"value":440},{"type":198,"tag":414,"props":563,"children":564},{"style":421},[565],{"type":207,"value":445},{"type":198,"tag":414,"props":567,"children":568},{"style":421},[569],{"type":207,"value":450},{"type":198,"tag":414,"props":571,"children":572},{"style":453},[573],{"type":207,"value":440},{"type":198,"tag":414,"props":575,"children":576},{"style":421},[577],{"type":207,"value":450},{"type":198,"tag":414,"props":579,"children":580},{"style":421},[581],{"type":207,"value":434},{"type":198,"tag":414,"props":583,"children":584},{"style":437},[585],{"type":207,"value":468},{"type":198,"tag":414,"props":587,"children":588},{"style":421},[589],{"type":207,"value":445},{"type":198,"tag":414,"props":591,"children":592},{"style":421},[593],{"type":207,"value":450},{"type":198,"tag":414,"props":595,"children":596},{"style":421},[597],{"type":207,"value":481},{"type":198,"tag":414,"props":599,"children":600},{"style":427},[601],{"type":207,"value":486},{"type":198,"tag":414,"props":603,"children":604},{"style":421},[605],{"type":207,"value":491},{"type":198,"tag":414,"props":607,"children":608},{"style":421},[609],{"type":207,"value":496},{"type":198,"tag":414,"props":611,"children":612},{"style":499},[613],{"type":207,"value":287},{"type":198,"tag":414,"props":615,"children":616},{"style":421},[617],{"type":207,"value":506},{"type":198,"tag":414,"props":619,"children":620},{"style":421},[621],{"type":207,"value":511},{"type":198,"tag":414,"props":623,"children":624},{"style":427},[625],{"type":207,"value":626}," columns",{"type":198,"tag":414,"props":628,"children":629},{"style":421},[630],{"type":207,"value":491},{"type":198,"tag":414,"props":632,"children":633},{"style":523},[634],{"type":207,"value":635}," 3",{"type":198,"tag":414,"props":637,"children":638},{"style":421},[639],{"type":207,"value":531},{"type":198,"tag":414,"props":641,"children":642},{"style":421},[643],{"type":207,"value":450},{"type":198,"tag":414,"props":645,"children":646},{"style":421},[647],{"type":207,"value":540},{"type":207,"value":542},{"type":198,"tag":414,"props":650,"children":651},{"class":416,"style":417},[652,656,660,664,668,672,676,680,684,688,692,696,700,704,708,712,716,720,724,728,732,736,741,745,749],{"type":198,"tag":414,"props":653,"children":654},{"style":421},[655],{"type":207,"value":424},{"type":198,"tag":414,"props":657,"children":658},{"style":427},[659],{"type":207,"value":123},{"type":198,"tag":414,"props":661,"children":662},{"style":421},[663],{"type":207,"value":434},{"type":198,"tag":414,"props":665,"children":666},{"style":437},[667],{"type":207,"value":440},{"type":198,"tag":414,"props":669,"children":670},{"style":421},[671],{"type":207,"value":445},{"type":198,"tag":414,"props":673,"children":674},{"style":421},[675],{"type":207,"value":450},{"type":198,"tag":414,"props":677,"children":678},{"style":453},[679],{"type":207,"value":440},{"type":198,"tag":414,"props":681,"children":682},{"style":421},[683],{"type":207,"value":450},{"type":198,"tag":414,"props":685,"children":686},{"style":421},[687],{"type":207,"value":434},{"type":198,"tag":414,"props":689,"children":690},{"style":437},[691],{"type":207,"value":468},{"type":198,"tag":414,"props":693,"children":694},{"style":421},[695],{"type":207,"value":445},{"type":198,"tag":414,"props":697,"children":698},{"style":421},[699],{"type":207,"value":450},{"type":198,"tag":414,"props":701,"children":702},{"style":421},[703],{"type":207,"value":481},{"type":198,"tag":414,"props":705,"children":706},{"style":427},[707],{"type":207,"value":486},{"type":198,"tag":414,"props":709,"children":710},{"style":421},[711],{"type":207,"value":491},{"type":198,"tag":414,"props":713,"children":714},{"style":421},[715],{"type":207,"value":496},{"type":198,"tag":414,"props":717,"children":718},{"style":499},[719],{"type":207,"value":308},{"type":198,"tag":414,"props":721,"children":722},{"style":421},[723],{"type":207,"value":506},{"type":198,"tag":414,"props":725,"children":726},{"style":421},[727],{"type":207,"value":511},{"type":198,"tag":414,"props":729,"children":730},{"style":427},[731],{"type":207,"value":626},{"type":198,"tag":414,"props":733,"children":734},{"style":421},[735],{"type":207,"value":491},{"type":198,"tag":414,"props":737,"children":738},{"style":523},[739],{"type":207,"value":740}," 4",{"type":198,"tag":414,"props":742,"children":743},{"style":421},[744],{"type":207,"value":531},{"type":198,"tag":414,"props":746,"children":747},{"style":421},[748],{"type":207,"value":450},{"type":198,"tag":414,"props":750,"children":751},{"style":421},[752],{"type":207,"value":540},{"type":198,"tag":199,"props":754,"children":755},{},[756,761,763,768,770,774,775,779,781,786,788,793,795,800,802,807],{"type":198,"tag":203,"props":757,"children":758},{},[759],{"type":207,"value":760},"targetRowHeight",{"type":207,"value":762}," defaults to ",{"type":198,"tag":203,"props":764,"children":765},{},[766],{"type":207,"value":767},"300",{"type":207,"value":769}," pixels: a larger value puts fewer photos in\na row. ",{"type":198,"tag":203,"props":771,"children":772},{},[773],{"type":207,"value":287},{"type":207,"value":762},{"type":198,"tag":203,"props":776,"children":777},{},[778],{"type":207,"value":113},{"type":207,"value":780},". ",{"type":198,"tag":203,"props":782,"children":783},{},[784],{"type":207,"value":785},"spacing",{"type":207,"value":787}," is the gap between photos (default\n",{"type":198,"tag":203,"props":789,"children":790},{},[791],{"type":207,"value":792},"8",{"type":207,"value":794},"), and ",{"type":198,"tag":203,"props":796,"children":797},{},[798],{"type":207,"value":799},"padding",{"type":207,"value":801}," is space inside each photo item (default ",{"type":198,"tag":203,"props":803,"children":804},{},[805],{"type":207,"value":806},"0",{"type":207,"value":808},").",{"type":198,"tag":217,"props":810,"children":812},{"id":811},"crop-photos-into-tiles",[813],{"type":207,"value":814},"Crop photos into tiles",{"type":198,"tag":199,"props":816,"children":817},{},[818,822,824,828,829,833,835,839,841,846,848,853],{"type":198,"tag":203,"props":819,"children":820},{},[821],{"type":207,"value":329},{"type":207,"value":823},", ",{"type":198,"tag":203,"props":825,"children":826},{},[827],{"type":207,"value":350},{"type":207,"value":823},{"type":198,"tag":203,"props":830,"children":831},{},[832],{"type":207,"value":371},{"type":207,"value":834},", and ",{"type":198,"tag":203,"props":836,"children":837},{},[838],{"type":207,"value":392},{"type":207,"value":840}," crop each photo to fill its tile, as\nCSS ",{"type":198,"tag":203,"props":842,"children":843},{},[844],{"type":207,"value":845},"object-fit: cover",{"type":207,"value":847}," does. CSS positions every tile, so the server HTML\nalready has the final layout at every container width. These layouts do not\nneed ",{"type":198,"tag":203,"props":849,"children":850},{},[851],{"type":207,"value":852},"defaultContainerWidth",{"type":207,"value":854},".",{"type":198,"tag":404,"props":856,"children":858},{"language":406,"filename":857,"class":407},"app\u002Fpages\u002Fgallery.vue",[859],{"type":198,"tag":203,"props":860,"children":861},{"class":411},[862,879,880,892,893,921,922,1046,1047,1055,1056,1067,1068,1095,1096,1119,1120,1148,1149,1203,1204,1272,1273,1285,1286,1293,1294,1426,1427,1530,1531],{"type":198,"tag":414,"props":863,"children":864},{"class":416,"style":417},[865,869,874],{"type":198,"tag":414,"props":866,"children":867},{"style":421},[868],{"type":207,"value":424},{"type":198,"tag":414,"props":870,"children":871},{"style":427},[872],{"type":207,"value":873},"template",{"type":198,"tag":414,"props":875,"children":876},{"style":421},[877],{"type":207,"value":878},">",{"type":207,"value":542},{"type":198,"tag":414,"props":881,"children":882},{"class":416,"style":417},[883,888],{"type":198,"tag":414,"props":884,"children":885},{"style":421},[886],{"type":207,"value":887},"  \u003C",{"type":198,"tag":414,"props":889,"children":890},{"style":427},[891],{"type":207,"value":123},{"type":207,"value":542},{"type":198,"tag":414,"props":894,"children":895},{"class":416,"style":417},[896,901,905,909,913,917],{"type":198,"tag":414,"props":897,"children":898},{"style":421},[899],{"type":207,"value":900},"    :",{"type":198,"tag":414,"props":902,"children":903},{"style":437},[904],{"type":207,"value":440},{"type":198,"tag":414,"props":906,"children":907},{"style":421},[908],{"type":207,"value":445},{"type":198,"tag":414,"props":910,"children":911},{"style":421},[912],{"type":207,"value":450},{"type":198,"tag":414,"props":914,"children":915},{"style":453},[916],{"type":207,"value":440},{"type":198,"tag":414,"props":918,"children":919},{"style":421},[920],{"type":207,"value":450},{"type":207,"value":542},{"type":198,"tag":414,"props":923,"children":924},{"class":416,"style":417},[925,929,933,937,941,946,951,956,960,964,968,972,976,980,986,991,995,999,1003,1007,1012,1016,1020,1025,1030,1034,1038,1042],{"type":198,"tag":414,"props":926,"children":927},{"style":421},[928],{"type":207,"value":900},{"type":198,"tag":414,"props":930,"children":931},{"style":437},[932],{"type":207,"value":468},{"type":198,"tag":414,"props":934,"children":935},{"style":421},[936],{"type":207,"value":445},{"type":198,"tag":414,"props":938,"children":939},{"style":421},[940],{"type":207,"value":450},{"type":198,"tag":414,"props":942,"children":943},{"style":421},[944],{"type":207,"value":945},"{ ",{"type":198,"tag":414,"props":947,"children":948},{"style":427},[949],{"type":207,"value":950},"type",{"type":198,"tag":414,"props":952,"children":953},{"style":421},[954],{"type":207,"value":955},": ",{"type":198,"tag":414,"props":957,"children":958},{"style":421},[959],{"type":207,"value":506},{"type":198,"tag":414,"props":961,"children":962},{"style":499},[963],{"type":207,"value":329},{"type":198,"tag":414,"props":965,"children":966},{"style":421},[967],{"type":207,"value":506},{"type":198,"tag":414,"props":969,"children":970},{"style":421},[971],{"type":207,"value":823},{"type":198,"tag":414,"props":973,"children":974},{"style":427},[975],{"type":207,"value":287},{"type":198,"tag":414,"props":977,"children":978},{"style":421},[979],{"type":207,"value":955},{"type":198,"tag":414,"props":981,"children":983},{"style":982},"color:#6182B8;--shiki-dark:#82AAFF",[984],{"type":207,"value":985},"responsive",{"type":198,"tag":414,"props":987,"children":988},{"style":421},[989],{"type":207,"value":990},"({ ",{"type":198,"tag":414,"props":992,"children":993},{"style":523},[994],{"type":207,"value":806},{"type":198,"tag":414,"props":996,"children":997},{"style":421},[998],{"type":207,"value":955},{"type":198,"tag":414,"props":1000,"children":1001},{"style":523},[1002],{"type":207,"value":51},{"type":198,"tag":414,"props":1004,"children":1005},{"style":421},[1006],{"type":207,"value":823},{"type":198,"tag":414,"props":1008,"children":1009},{"style":523},[1010],{"type":207,"value":1011},"640",{"type":198,"tag":414,"props":1013,"children":1014},{"style":421},[1015],{"type":207,"value":955},{"type":198,"tag":414,"props":1017,"children":1018},{"style":523},[1019],{"type":207,"value":174},{"type":198,"tag":414,"props":1021,"children":1022},{"style":421},[1023],{"type":207,"value":1024}," }), ",{"type":198,"tag":414,"props":1026,"children":1027},{"style":427},[1028],{"type":207,"value":1029},"aspectRatio",{"type":198,"tag":414,"props":1031,"children":1032},{"style":421},[1033],{"type":207,"value":955},{"type":198,"tag":414,"props":1035,"children":1036},{"style":523},[1037],{"type":207,"value":7},{"type":198,"tag":414,"props":1039,"children":1040},{"style":421},[1041],{"type":207,"value":531},{"type":198,"tag":414,"props":1043,"children":1044},{"style":421},[1045],{"type":207,"value":450},{"type":207,"value":542},{"type":198,"tag":414,"props":1048,"children":1049},{"class":416,"style":417},[1050],{"type":198,"tag":414,"props":1051,"children":1052},{"style":421},[1053],{"type":207,"value":1054},"  \u002F>",{"type":207,"value":542},{"type":198,"tag":414,"props":1057,"children":1058},{"class":416,"style":417},[1059,1063],{"type":198,"tag":414,"props":1060,"children":1061},{"style":421},[1062],{"type":207,"value":887},{"type":198,"tag":414,"props":1064,"children":1065},{"style":427},[1066],{"type":207,"value":123},{"type":207,"value":542},{"type":198,"tag":414,"props":1069,"children":1070},{"class":416,"style":417},[1071,1075,1079,1083,1087,1091],{"type":198,"tag":414,"props":1072,"children":1073},{"style":421},[1074],{"type":207,"value":900},{"type":198,"tag":414,"props":1076,"children":1077},{"style":437},[1078],{"type":207,"value":440},{"type":198,"tag":414,"props":1080,"children":1081},{"style":421},[1082],{"type":207,"value":445},{"type":198,"tag":414,"props":1084,"children":1085},{"style":421},[1086],{"type":207,"value":450},{"type":198,"tag":414,"props":1088,"children":1089},{"style":453},[1090],{"type":207,"value":440},{"type":198,"tag":414,"props":1092,"children":1093},{"style":421},[1094],{"type":207,"value":450},{"type":207,"value":542},{"type":198,"tag":414,"props":1097,"children":1098},{"class":416,"style":417},[1099,1103,1107,1111,1115],{"type":198,"tag":414,"props":1100,"children":1101},{"style":421},[1102],{"type":207,"value":900},{"type":198,"tag":414,"props":1104,"children":1105},{"style":437},[1106],{"type":207,"value":468},{"type":198,"tag":414,"props":1108,"children":1109},{"style":421},[1110],{"type":207,"value":445},{"type":198,"tag":414,"props":1112,"children":1113},{"style":421},[1114],{"type":207,"value":450},{"type":198,"tag":414,"props":1116,"children":1117},{"style":421},[1118],{"type":207,"value":481},{"type":207,"value":542},{"type":198,"tag":414,"props":1121,"children":1122},{"class":416,"style":417},[1123,1128,1132,1136,1140,1144],{"type":198,"tag":414,"props":1124,"children":1125},{"style":427},[1126],{"type":207,"value":1127},"      type",{"type":198,"tag":414,"props":1129,"children":1130},{"style":421},[1131],{"type":207,"value":955},{"type":198,"tag":414,"props":1133,"children":1134},{"style":421},[1135],{"type":207,"value":506},{"type":198,"tag":414,"props":1137,"children":1138},{"style":499},[1139],{"type":207,"value":350},{"type":198,"tag":414,"props":1141,"children":1142},{"style":421},[1143],{"type":207,"value":506},{"type":198,"tag":414,"props":1145,"children":1146},{"style":421},[1147],{"type":207,"value":511},{"type":207,"value":542},{"type":198,"tag":414,"props":1150,"children":1151},{"class":416,"style":417},[1152,1157,1161,1165,1169,1173,1177,1181,1185,1190,1194,1198],{"type":198,"tag":414,"props":1153,"children":1154},{"style":427},[1155],{"type":207,"value":1156},"      columns",{"type":198,"tag":414,"props":1158,"children":1159},{"style":421},[1160],{"type":207,"value":955},{"type":198,"tag":414,"props":1162,"children":1163},{"style":982},[1164],{"type":207,"value":985},{"type":198,"tag":414,"props":1166,"children":1167},{"style":421},[1168],{"type":207,"value":990},{"type":198,"tag":414,"props":1170,"children":1171},{"style":523},[1172],{"type":207,"value":806},{"type":198,"tag":414,"props":1174,"children":1175},{"style":421},[1176],{"type":207,"value":955},{"type":198,"tag":414,"props":1178,"children":1179},{"style":523},[1180],{"type":207,"value":51},{"type":198,"tag":414,"props":1182,"children":1183},{"style":421},[1184],{"type":207,"value":823},{"type":198,"tag":414,"props":1186,"children":1187},{"style":523},[1188],{"type":207,"value":1189},"768",{"type":198,"tag":414,"props":1191,"children":1192},{"style":421},[1193],{"type":207,"value":955},{"type":198,"tag":414,"props":1195,"children":1196},{"style":523},[1197],{"type":207,"value":174},{"type":198,"tag":414,"props":1199,"children":1200},{"style":421},[1201],{"type":207,"value":1202}," }),",{"type":207,"value":542},{"type":198,"tag":414,"props":1205,"children":1206},{"class":416,"style":417},[1207,1212,1217,1223,1228,1233,1238,1242,1247,1252,1257,1262,1268],{"type":198,"tag":414,"props":1208,"children":1209},{"style":982},[1210],{"type":207,"value":1211},"      featured",{"type":198,"tag":414,"props":1213,"children":1214},{"style":421},[1215],{"type":207,"value":1216},": (",{"type":198,"tag":414,"props":1218,"children":1220},{"style":1219},"color:#90A4AE;--shiki-light-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic",[1221],{"type":207,"value":1222},"photo",{"type":198,"tag":414,"props":1224,"children":1225},{"style":421},[1226],{"type":207,"value":1227},") ",{"type":198,"tag":414,"props":1229,"children":1230},{"style":437},[1231],{"type":207,"value":1232},"=>",{"type":198,"tag":414,"props":1234,"children":1235},{"style":453},[1236],{"type":207,"value":1237}," photo",{"type":198,"tag":414,"props":1239,"children":1240},{"style":421},[1241],{"type":207,"value":854},{"type":198,"tag":414,"props":1243,"children":1244},{"style":453},[1245],{"type":207,"value":1246},"meta",{"type":198,"tag":414,"props":1248,"children":1249},{"style":421},[1250],{"type":207,"value":1251},"?.",{"type":198,"tag":414,"props":1253,"children":1254},{"style":453},[1255],{"type":207,"value":1256},"cover",{"type":198,"tag":414,"props":1258,"children":1259},{"style":421},[1260],{"type":207,"value":1261}," === ",{"type":198,"tag":414,"props":1263,"children":1265},{"style":1264},"color:#FF5370;--shiki-dark:#FF9CAC",[1266],{"type":207,"value":1267},"true",{"type":198,"tag":414,"props":1269,"children":1270},{"style":421},[1271],{"type":207,"value":511},{"type":207,"value":542},{"type":198,"tag":414,"props":1274,"children":1275},{"class":416,"style":417},[1276,1281],{"type":198,"tag":414,"props":1277,"children":1278},{"style":421},[1279],{"type":207,"value":1280},"    }",{"type":198,"tag":414,"props":1282,"children":1283},{"style":421},[1284],{"type":207,"value":450},{"type":207,"value":542},{"type":198,"tag":414,"props":1287,"children":1288},{"class":416,"style":417},[1289],{"type":198,"tag":414,"props":1290,"children":1291},{"style":421},[1292],{"type":207,"value":1054},{"type":207,"value":542},{"type":198,"tag":414,"props":1295,"children":1296},{"class":416,"style":417},[1297,1301,1305,1309,1313,1317,1321,1325,1329,1333,1337,1341,1345,1349,1353,1357,1361,1365,1369,1373,1377,1381,1386,1391,1396,1400,1405,1409,1414,1418,1422],{"type":198,"tag":414,"props":1298,"children":1299},{"style":421},[1300],{"type":207,"value":887},{"type":198,"tag":414,"props":1302,"children":1303},{"style":427},[1304],{"type":207,"value":123},{"type":198,"tag":414,"props":1306,"children":1307},{"style":421},[1308],{"type":207,"value":434},{"type":198,"tag":414,"props":1310,"children":1311},{"style":437},[1312],{"type":207,"value":440},{"type":198,"tag":414,"props":1314,"children":1315},{"style":421},[1316],{"type":207,"value":445},{"type":198,"tag":414,"props":1318,"children":1319},{"style":421},[1320],{"type":207,"value":450},{"type":198,"tag":414,"props":1322,"children":1323},{"style":453},[1324],{"type":207,"value":440},{"type":198,"tag":414,"props":1326,"children":1327},{"style":421},[1328],{"type":207,"value":450},{"type":198,"tag":414,"props":1330,"children":1331},{"style":421},[1332],{"type":207,"value":434},{"type":198,"tag":414,"props":1334,"children":1335},{"style":437},[1336],{"type":207,"value":468},{"type":198,"tag":414,"props":1338,"children":1339},{"style":421},[1340],{"type":207,"value":445},{"type":198,"tag":414,"props":1342,"children":1343},{"style":421},[1344],{"type":207,"value":450},{"type":198,"tag":414,"props":1346,"children":1347},{"style":421},[1348],{"type":207,"value":945},{"type":198,"tag":414,"props":1350,"children":1351},{"style":427},[1352],{"type":207,"value":950},{"type":198,"tag":414,"props":1354,"children":1355},{"style":421},[1356],{"type":207,"value":955},{"type":198,"tag":414,"props":1358,"children":1359},{"style":421},[1360],{"type":207,"value":506},{"type":198,"tag":414,"props":1362,"children":1363},{"style":499},[1364],{"type":207,"value":371},{"type":198,"tag":414,"props":1366,"children":1367},{"style":421},[1368],{"type":207,"value":506},{"type":198,"tag":414,"props":1370,"children":1371},{"style":421},[1372],{"type":207,"value":823},{"type":198,"tag":414,"props":1374,"children":1375},{"style":427},[1376],{"type":207,"value":1029},{"type":198,"tag":414,"props":1378,"children":1379},{"style":421},[1380],{"type":207,"value":955},{"type":198,"tag":414,"props":1382,"children":1383},{"style":523},[1384],{"type":207,"value":1385},"16",{"type":198,"tag":414,"props":1387,"children":1388},{"style":421},[1389],{"type":207,"value":1390}," \u002F ",{"type":198,"tag":414,"props":1392,"children":1393},{"style":523},[1394],{"type":207,"value":1395},"9",{"type":198,"tag":414,"props":1397,"children":1398},{"style":421},[1399],{"type":207,"value":823},{"type":198,"tag":414,"props":1401,"children":1402},{"style":427},[1403],{"type":207,"value":1404},"max",{"type":198,"tag":414,"props":1406,"children":1407},{"style":421},[1408],{"type":207,"value":955},{"type":198,"tag":414,"props":1410,"children":1411},{"style":523},[1412],{"type":207,"value":1413},"5",{"type":198,"tag":414,"props":1415,"children":1416},{"style":421},[1417],{"type":207,"value":531},{"type":198,"tag":414,"props":1419,"children":1420},{"style":421},[1421],{"type":207,"value":450},{"type":198,"tag":414,"props":1423,"children":1424},{"style":421},[1425],{"type":207,"value":540},{"type":207,"value":542},{"type":198,"tag":414,"props":1428,"children":1429},{"class":416,"style":417},[1430,1434,1438,1442,1446,1450,1454,1458,1462,1466,1470,1474,1478,1482,1486,1490,1494,1498,1502,1506,1510,1514,1518,1522,1526],{"type":198,"tag":414,"props":1431,"children":1432},{"style":421},[1433],{"type":207,"value":887},{"type":198,"tag":414,"props":1435,"children":1436},{"style":427},[1437],{"type":207,"value":123},{"type":198,"tag":414,"props":1439,"children":1440},{"style":421},[1441],{"type":207,"value":434},{"type":198,"tag":414,"props":1443,"children":1444},{"style":437},[1445],{"type":207,"value":440},{"type":198,"tag":414,"props":1447,"children":1448},{"style":421},[1449],{"type":207,"value":445},{"type":198,"tag":414,"props":1451,"children":1452},{"style":421},[1453],{"type":207,"value":450},{"type":198,"tag":414,"props":1455,"children":1456},{"style":453},[1457],{"type":207,"value":440},{"type":198,"tag":414,"props":1459,"children":1460},{"style":421},[1461],{"type":207,"value":450},{"type":198,"tag":414,"props":1463,"children":1464},{"style":421},[1465],{"type":207,"value":434},{"type":198,"tag":414,"props":1467,"children":1468},{"style":437},[1469],{"type":207,"value":468},{"type":198,"tag":414,"props":1471,"children":1472},{"style":421},[1473],{"type":207,"value":445},{"type":198,"tag":414,"props":1475,"children":1476},{"style":421},[1477],{"type":207,"value":450},{"type":198,"tag":414,"props":1479,"children":1480},{"style":421},[1481],{"type":207,"value":945},{"type":198,"tag":414,"props":1483,"children":1484},{"style":427},[1485],{"type":207,"value":950},{"type":198,"tag":414,"props":1487,"children":1488},{"style":421},[1489],{"type":207,"value":955},{"type":198,"tag":414,"props":1491,"children":1492},{"style":421},[1493],{"type":207,"value":506},{"type":198,"tag":414,"props":1495,"children":1496},{"style":499},[1497],{"type":207,"value":392},{"type":198,"tag":414,"props":1499,"children":1500},{"style":421},[1501],{"type":207,"value":506},{"type":198,"tag":414,"props":1503,"children":1504},{"style":421},[1505],{"type":207,"value":823},{"type":198,"tag":414,"props":1507,"children":1508},{"style":427},[1509],{"type":207,"value":1029},{"type":198,"tag":414,"props":1511,"children":1512},{"style":421},[1513],{"type":207,"value":955},{"type":198,"tag":414,"props":1515,"children":1516},{"style":523},[1517],{"type":207,"value":51},{"type":198,"tag":414,"props":1519,"children":1520},{"style":421},[1521],{"type":207,"value":531},{"type":198,"tag":414,"props":1523,"children":1524},{"style":421},[1525],{"type":207,"value":450},{"type":198,"tag":414,"props":1527,"children":1528},{"style":421},[1529],{"type":207,"value":540},{"type":207,"value":542},{"type":198,"tag":414,"props":1532,"children":1533},{"class":416,"style":417},[1534,1539,1543],{"type":198,"tag":414,"props":1535,"children":1536},{"style":421},[1537],{"type":207,"value":1538},"\u003C\u002F",{"type":198,"tag":414,"props":1540,"children":1541},{"style":427},[1542],{"type":207,"value":873},{"type":198,"tag":414,"props":1544,"children":1545},{"style":421},[1546],{"type":207,"value":878},{"type":198,"tag":224,"props":1548,"children":1549},{},[1550,1575],{"type":198,"tag":228,"props":1551,"children":1552},{},[1553],{"type":198,"tag":232,"props":1554,"children":1555},{},[1556,1560,1565,1570],{"type":198,"tag":236,"props":1557,"children":1558},{},[1559],{"type":207,"value":240},{"type":198,"tag":236,"props":1561,"children":1562},{},[1563],{"type":207,"value":1564},"Option",{"type":198,"tag":236,"props":1566,"children":1567},{},[1568],{"type":207,"value":1569},"Default",{"type":198,"tag":236,"props":1571,"children":1572},{},[1573],{"type":207,"value":1574},"Meaning",{"type":198,"tag":252,"props":1576,"children":1577},{},[1578,1613,1642,1675,1705,1738,1767,1796],{"type":198,"tag":232,"props":1579,"children":1580},{},[1581,1588,1595,1602],{"type":198,"tag":259,"props":1582,"children":1583},{},[1584],{"type":198,"tag":203,"props":1585,"children":1586},{},[1587],{"type":207,"value":329},{"type":198,"tag":259,"props":1589,"children":1590},{},[1591],{"type":198,"tag":203,"props":1592,"children":1593},{},[1594],{"type":207,"value":287},{"type":198,"tag":259,"props":1596,"children":1597},{},[1598],{"type":198,"tag":203,"props":1599,"children":1600},{},[1601],{"type":207,"value":113},{"type":198,"tag":259,"props":1603,"children":1604},{},[1605,1607,1612],{"type":207,"value":1606},"Columns. Accepts ",{"type":198,"tag":203,"props":1608,"children":1609},{},[1610],{"type":207,"value":1611},"responsive()",{"type":207,"value":854},{"type":198,"tag":232,"props":1614,"children":1615},{},[1616,1623,1630,1637],{"type":198,"tag":259,"props":1617,"children":1618},{},[1619],{"type":198,"tag":203,"props":1620,"children":1621},{},[1622],{"type":207,"value":329},{"type":198,"tag":259,"props":1624,"children":1625},{},[1626],{"type":198,"tag":203,"props":1627,"children":1628},{},[1629],{"type":207,"value":1029},{"type":198,"tag":259,"props":1631,"children":1632},{},[1633],{"type":198,"tag":203,"props":1634,"children":1635},{},[1636],{"type":207,"value":7},{"type":198,"tag":259,"props":1638,"children":1639},{},[1640],{"type":207,"value":1641},"Width divided by height of every tile.",{"type":198,"tag":232,"props":1643,"children":1644},{},[1645,1652,1659,1666],{"type":198,"tag":259,"props":1646,"children":1647},{},[1648],{"type":198,"tag":203,"props":1649,"children":1650},{},[1651],{"type":207,"value":350},{"type":198,"tag":259,"props":1653,"children":1654},{},[1655],{"type":198,"tag":203,"props":1656,"children":1657},{},[1658],{"type":207,"value":287},{"type":198,"tag":259,"props":1660,"children":1661},{},[1662],{"type":198,"tag":203,"props":1663,"children":1664},{},[1665],{"type":207,"value":174},{"type":198,"tag":259,"props":1667,"children":1668},{},[1669,1670,1674],{"type":207,"value":1606},{"type":198,"tag":203,"props":1671,"children":1672},{},[1673],{"type":207,"value":1611},{"type":207,"value":854},{"type":198,"tag":232,"props":1676,"children":1677},{},[1678,1685,1692,1700],{"type":198,"tag":259,"props":1679,"children":1680},{},[1681],{"type":198,"tag":203,"props":1682,"children":1683},{},[1684],{"type":207,"value":350},{"type":198,"tag":259,"props":1686,"children":1687},{},[1688],{"type":198,"tag":203,"props":1689,"children":1690},{},[1691],{"type":207,"value":1029},{"type":198,"tag":259,"props":1693,"children":1694},{},[1695],{"type":198,"tag":203,"props":1696,"children":1697},{},[1698],{"type":207,"value":1699},"4 \u002F 3",{"type":198,"tag":259,"props":1701,"children":1702},{},[1703],{"type":207,"value":1704},"Width divided by height of one grid cell.",{"type":198,"tag":232,"props":1706,"children":1707},{},[1708,1715,1723,1728],{"type":198,"tag":259,"props":1709,"children":1710},{},[1711],{"type":198,"tag":203,"props":1712,"children":1713},{},[1714],{"type":207,"value":350},{"type":198,"tag":259,"props":1716,"children":1717},{},[1718],{"type":198,"tag":203,"props":1719,"children":1720},{},[1721],{"type":207,"value":1722},"featured",{"type":198,"tag":259,"props":1724,"children":1725},{},[1726],{"type":207,"value":1727},"the first photo",{"type":198,"tag":259,"props":1729,"children":1730},{},[1731,1736],{"type":198,"tag":203,"props":1732,"children":1733},{},[1734],{"type":207,"value":1735},"(photo, index) => boolean",{"type":207,"value":1737},": photos that get a big tile.",{"type":198,"tag":232,"props":1739,"children":1740},{},[1741,1748,1755,1762],{"type":198,"tag":259,"props":1742,"children":1743},{},[1744],{"type":198,"tag":203,"props":1745,"children":1746},{},[1747],{"type":207,"value":371},{"type":198,"tag":259,"props":1749,"children":1750},{},[1751],{"type":198,"tag":203,"props":1752,"children":1753},{},[1754],{"type":207,"value":1029},{"type":198,"tag":259,"props":1756,"children":1757},{},[1758],{"type":198,"tag":203,"props":1759,"children":1760},{},[1761],{"type":207,"value":1699},{"type":198,"tag":259,"props":1763,"children":1764},{},[1765],{"type":207,"value":1766},"Width divided by height of the whole frame.",{"type":198,"tag":232,"props":1768,"children":1769},{},[1770,1777,1784,1791],{"type":198,"tag":259,"props":1771,"children":1772},{},[1773],{"type":198,"tag":203,"props":1774,"children":1775},{},[1776],{"type":207,"value":371},{"type":198,"tag":259,"props":1778,"children":1779},{},[1780],{"type":198,"tag":203,"props":1781,"children":1782},{},[1783],{"type":207,"value":1404},{"type":198,"tag":259,"props":1785,"children":1786},{},[1787],{"type":198,"tag":203,"props":1788,"children":1789},{},[1790],{"type":207,"value":1413},{"type":198,"tag":259,"props":1792,"children":1793},{},[1794],{"type":207,"value":1795},"Photos shown in the frame.",{"type":198,"tag":232,"props":1797,"children":1798},{},[1799,1806,1813,1820],{"type":198,"tag":259,"props":1800,"children":1801},{},[1802],{"type":198,"tag":203,"props":1803,"children":1804},{},[1805],{"type":207,"value":392},{"type":198,"tag":259,"props":1807,"children":1808},{},[1809],{"type":198,"tag":203,"props":1810,"children":1811},{},[1812],{"type":207,"value":1029},{"type":198,"tag":259,"props":1814,"children":1815},{},[1816],{"type":198,"tag":203,"props":1817,"children":1818},{},[1819],{"type":207,"value":51},{"type":198,"tag":259,"props":1821,"children":1822},{},[1823],{"type":207,"value":1824},"Width divided by height of the whole strip.",{"type":198,"tag":199,"props":1826,"children":1827},{},[1828],{"type":207,"value":1829},"These rules can break the result:",{"type":198,"tag":1831,"props":1832,"children":1833},"ul",{},[1834,1878,1894,1917,1927],{"type":198,"tag":1835,"props":1836,"children":1837},"li",{},[1838,1844,1846,1851,1853,1858,1860,1864,1866,1870,1872,1876],{"type":198,"tag":1839,"props":1840,"children":1841},"strong",{},[1842],{"type":207,"value":1843},"Bento and mosaic may move a photo.",{"type":207,"value":1845}," Bento moves a photo at most four places\nto crop less and to leave no empty cells. Mosaic arranges its photos inside\nthe frame. The page, the Tab key, and the lightbox all follow the order on\nscreen. ",{"type":198,"tag":203,"props":1847,"children":1848},{},[1849],{"type":207,"value":1850},"open(index)",{"type":207,"value":1852}," and the ",{"type":198,"tag":203,"props":1854,"children":1855},{},[1856],{"type":207,"value":1857},"index",{"type":207,"value":1859}," in ",{"type":198,"tag":203,"props":1861,"children":1862},{},[1863],{"type":207,"value":1722},{"type":207,"value":1865}," still use the position in\n",{"type":198,"tag":203,"props":1867,"children":1868},{},[1869],{"type":207,"value":440},{"type":207,"value":1871},". A parent ",{"type":198,"tag":203,"props":1873,"children":1874},{},[1875],{"type":207,"value":128},{"type":207,"value":1877}," keeps its own navigation order.",{"type":198,"tag":1835,"props":1879,"children":1880},{},[1881,1886,1888,1892],{"type":198,"tag":1839,"props":1882,"children":1883},{},[1884],{"type":207,"value":1885},"Bento chooses its order at the largest column count.",{"type":207,"value":1887}," With\n",{"type":198,"tag":203,"props":1889,"children":1890},{},[1891],{"type":207,"value":1611},{"type":207,"value":1893}," columns, smaller counts keep that order and change only the\ntile shapes, so the order never changes with the width.",{"type":198,"tag":1835,"props":1895,"children":1896},{},[1897,1908,1910,1915],{"type":198,"tag":1839,"props":1898,"children":1899},{},[1900,1902,1906],{"type":207,"value":1901},"Mosaic shows the first ",{"type":198,"tag":203,"props":1903,"children":1904},{},[1905],{"type":207,"value":1404},{"type":207,"value":1907}," photos.",{"type":207,"value":1909}," The last tile shows ",{"type":198,"tag":203,"props":1911,"children":1912},{},[1913],{"type":207,"value":1914},"+N",{"type":207,"value":1916},". The\nlightbox still contains every photo and announces its position, such as\n\"Slide 6 of 8\".",{"type":198,"tag":1835,"props":1918,"children":1919},{},[1920,1925],{"type":198,"tag":1839,"props":1921,"children":1922},{},[1923],{"type":207,"value":1924},"The accordion needs a pointer or a keyboard to open slices.",{"type":207,"value":1926}," The first\nslice is open until another slice has the pointer or keyboard focus. On a\ntouch screen, a tap opens the lightbox.",{"type":198,"tag":1835,"props":1928,"children":1929},{},[1930,1941,1943,1947,1948,1952,1953,1957,1959,1964,1966,1970],{"type":198,"tag":1839,"props":1931,"children":1932},{},[1933,1935,1939],{"type":207,"value":1934},"Responsive values must be ",{"type":198,"tag":203,"props":1936,"children":1937},{},[1938],{"type":207,"value":1611},{"type":207,"value":1940}," or have breakpoints.",{"type":207,"value":1942}," CSS\ncontainer queries apply ",{"type":198,"tag":203,"props":1944,"children":1945},{},[1946],{"type":207,"value":287},{"type":207,"value":823},{"type":198,"tag":203,"props":1949,"children":1950},{},[1951],{"type":207,"value":785},{"type":207,"value":834},{"type":198,"tag":203,"props":1954,"children":1955},{},[1956],{"type":207,"value":799},{"type":207,"value":1958},". A plain function\nneeds the ",{"type":198,"tag":203,"props":1960,"children":1961},{},[1962],{"type":207,"value":1963},"breakpoints",{"type":207,"value":1965}," prop to know where to sample it; without it, the\nalbum uses the function's value at width ",{"type":198,"tag":203,"props":1967,"children":1968},{},[1969],{"type":207,"value":806},{"type":207,"value":854},{"type":198,"tag":217,"props":1972,"children":1974},{"id":1973},"change-values-with-the-container-width",[1975],{"type":207,"value":1976},"Change values with the container width",{"type":198,"tag":199,"props":1978,"children":1979},{},[1980,1984],{"type":198,"tag":203,"props":1981,"children":1982},{},[1983],{"type":207,"value":1611},{"type":207,"value":1985}," takes a value per minimum container width in pixels. Nuxt\nauto-imports it.",{"type":198,"tag":404,"props":1987,"children":1988},{"language":406,"filename":857,"class":407},[1989],{"type":198,"tag":203,"props":1990,"children":1991},{"class":411},[1992,2007,2008,2019,2020,2047,2048,2071,2072,2099,2100,2168,2169,2180,2181,2262,2263,2270,2271],{"type":198,"tag":414,"props":1993,"children":1994},{"class":416,"style":417},[1995,1999,2003],{"type":198,"tag":414,"props":1996,"children":1997},{"style":421},[1998],{"type":207,"value":424},{"type":198,"tag":414,"props":2000,"children":2001},{"style":427},[2002],{"type":207,"value":873},{"type":198,"tag":414,"props":2004,"children":2005},{"style":421},[2006],{"type":207,"value":878},{"type":207,"value":542},{"type":198,"tag":414,"props":2009,"children":2010},{"class":416,"style":417},[2011,2015],{"type":198,"tag":414,"props":2012,"children":2013},{"style":421},[2014],{"type":207,"value":887},{"type":198,"tag":414,"props":2016,"children":2017},{"style":427},[2018],{"type":207,"value":123},{"type":207,"value":542},{"type":198,"tag":414,"props":2021,"children":2022},{"class":416,"style":417},[2023,2027,2031,2035,2039,2043],{"type":198,"tag":414,"props":2024,"children":2025},{"style":421},[2026],{"type":207,"value":900},{"type":198,"tag":414,"props":2028,"children":2029},{"style":437},[2030],{"type":207,"value":440},{"type":198,"tag":414,"props":2032,"children":2033},{"style":421},[2034],{"type":207,"value":445},{"type":198,"tag":414,"props":2036,"children":2037},{"style":421},[2038],{"type":207,"value":450},{"type":198,"tag":414,"props":2040,"children":2041},{"style":453},[2042],{"type":207,"value":440},{"type":198,"tag":414,"props":2044,"children":2045},{"style":421},[2046],{"type":207,"value":450},{"type":207,"value":542},{"type":198,"tag":414,"props":2049,"children":2050},{"class":416,"style":417},[2051,2055,2059,2063,2067],{"type":198,"tag":414,"props":2052,"children":2053},{"style":421},[2054],{"type":207,"value":900},{"type":198,"tag":414,"props":2056,"children":2057},{"style":437},[2058],{"type":207,"value":468},{"type":198,"tag":414,"props":2060,"children":2061},{"style":421},[2062],{"type":207,"value":445},{"type":198,"tag":414,"props":2064,"children":2065},{"style":421},[2066],{"type":207,"value":450},{"type":198,"tag":414,"props":2068,"children":2069},{"style":421},[2070],{"type":207,"value":481},{"type":207,"value":542},{"type":198,"tag":414,"props":2073,"children":2074},{"class":416,"style":417},[2075,2079,2083,2087,2091,2095],{"type":198,"tag":414,"props":2076,"children":2077},{"style":427},[2078],{"type":207,"value":1127},{"type":198,"tag":414,"props":2080,"children":2081},{"style":421},[2082],{"type":207,"value":955},{"type":198,"tag":414,"props":2084,"children":2085},{"style":421},[2086],{"type":207,"value":506},{"type":198,"tag":414,"props":2088,"children":2089},{"style":499},[2090],{"type":207,"value":287},{"type":198,"tag":414,"props":2092,"children":2093},{"style":421},[2094],{"type":207,"value":506},{"type":198,"tag":414,"props":2096,"children":2097},{"style":421},[2098],{"type":207,"value":511},{"type":207,"value":542},{"type":198,"tag":414,"props":2101,"children":2102},{"class":416,"style":417},[2103,2107,2111,2115,2119,2123,2127,2131,2135,2139,2143,2147,2151,2156,2160,2164],{"type":198,"tag":414,"props":2104,"children":2105},{"style":427},[2106],{"type":207,"value":1156},{"type":198,"tag":414,"props":2108,"children":2109},{"style":421},[2110],{"type":207,"value":955},{"type":198,"tag":414,"props":2112,"children":2113},{"style":982},[2114],{"type":207,"value":985},{"type":198,"tag":414,"props":2116,"children":2117},{"style":421},[2118],{"type":207,"value":990},{"type":198,"tag":414,"props":2120,"children":2121},{"style":523},[2122],{"type":207,"value":806},{"type":198,"tag":414,"props":2124,"children":2125},{"style":421},[2126],{"type":207,"value":955},{"type":198,"tag":414,"props":2128,"children":2129},{"style":523},[2130],{"type":207,"value":51},{"type":198,"tag":414,"props":2132,"children":2133},{"style":421},[2134],{"type":207,"value":823},{"type":198,"tag":414,"props":2136,"children":2137},{"style":523},[2138],{"type":207,"value":1011},{"type":198,"tag":414,"props":2140,"children":2141},{"style":421},[2142],{"type":207,"value":955},{"type":198,"tag":414,"props":2144,"children":2145},{"style":523},[2146],{"type":207,"value":113},{"type":198,"tag":414,"props":2148,"children":2149},{"style":421},[2150],{"type":207,"value":823},{"type":198,"tag":414,"props":2152,"children":2153},{"style":523},[2154],{"type":207,"value":2155},"1024",{"type":198,"tag":414,"props":2157,"children":2158},{"style":421},[2159],{"type":207,"value":955},{"type":198,"tag":414,"props":2161,"children":2162},{"style":523},[2163],{"type":207,"value":174},{"type":198,"tag":414,"props":2165,"children":2166},{"style":421},[2167],{"type":207,"value":1202},{"type":207,"value":542},{"type":198,"tag":414,"props":2170,"children":2171},{"class":416,"style":417},[2172,2176],{"type":198,"tag":414,"props":2173,"children":2174},{"style":421},[2175],{"type":207,"value":1280},{"type":198,"tag":414,"props":2177,"children":2178},{"style":421},[2179],{"type":207,"value":450},{"type":207,"value":542},{"type":198,"tag":414,"props":2182,"children":2183},{"class":416,"style":417},[2184,2188,2192,2196,2200,2204,2208,2212,2216,2220,2224,2228,2232,2236,2240,2244,2248,2253,2258],{"type":198,"tag":414,"props":2185,"children":2186},{"style":421},[2187],{"type":207,"value":900},{"type":198,"tag":414,"props":2189,"children":2190},{"style":437},[2191],{"type":207,"value":785},{"type":198,"tag":414,"props":2193,"children":2194},{"style":421},[2195],{"type":207,"value":445},{"type":198,"tag":414,"props":2197,"children":2198},{"style":421},[2199],{"type":207,"value":450},{"type":198,"tag":414,"props":2201,"children":2202},{"style":982},[2203],{"type":207,"value":985},{"type":198,"tag":414,"props":2205,"children":2206},{"style":421},[2207],{"type":207,"value":990},{"type":198,"tag":414,"props":2209,"children":2210},{"style":523},[2211],{"type":207,"value":806},{"type":198,"tag":414,"props":2213,"children":2214},{"style":421},[2215],{"type":207,"value":955},{"type":198,"tag":414,"props":2217,"children":2218},{"style":523},[2219],{"type":207,"value":174},{"type":198,"tag":414,"props":2221,"children":2222},{"style":421},[2223],{"type":207,"value":823},{"type":198,"tag":414,"props":2225,"children":2226},{"style":523},[2227],{"type":207,"value":1011},{"type":198,"tag":414,"props":2229,"children":2230},{"style":421},[2231],{"type":207,"value":955},{"type":198,"tag":414,"props":2233,"children":2234},{"style":523},[2235],{"type":207,"value":792},{"type":198,"tag":414,"props":2237,"children":2238},{"style":421},[2239],{"type":207,"value":823},{"type":198,"tag":414,"props":2241,"children":2242},{"style":523},[2243],{"type":207,"value":2155},{"type":198,"tag":414,"props":2245,"children":2246},{"style":421},[2247],{"type":207,"value":955},{"type":198,"tag":414,"props":2249,"children":2250},{"style":523},[2251],{"type":207,"value":2252},"12",{"type":198,"tag":414,"props":2254,"children":2255},{"style":421},[2256],{"type":207,"value":2257}," })",{"type":198,"tag":414,"props":2259,"children":2260},{"style":421},[2261],{"type":207,"value":450},{"type":207,"value":542},{"type":198,"tag":414,"props":2264,"children":2265},{"class":416,"style":417},[2266],{"type":198,"tag":414,"props":2267,"children":2268},{"style":421},[2269],{"type":207,"value":1054},{"type":207,"value":542},{"type":198,"tag":414,"props":2272,"children":2273},{"class":416,"style":417},[2274,2278,2282],{"type":198,"tag":414,"props":2275,"children":2276},{"style":421},[2277],{"type":207,"value":1538},{"type":198,"tag":414,"props":2279,"children":2280},{"style":427},[2281],{"type":207,"value":873},{"type":198,"tag":414,"props":2283,"children":2284},{"style":421},[2285],{"type":207,"value":878},{"type":198,"tag":199,"props":2287,"children":2288},{},[2289],{"type":207,"value":2290},"The largest matching width wins: a 700-pixel album has three columns. The\nwidth is the album's container, not the browser window, so the same album works\nin a full page, a card, or a sidebar.",{"type":198,"tag":199,"props":2292,"children":2293},{},[2294,2298,2300,2304,2305,2309,2310,2314,2316,2320],{"type":198,"tag":203,"props":2295,"children":2296},{},[2297],{"type":207,"value":1611},{"type":207,"value":2299}," works for ",{"type":198,"tag":203,"props":2301,"children":2302},{},[2303],{"type":207,"value":785},{"type":207,"value":823},{"type":198,"tag":203,"props":2306,"children":2307},{},[2308],{"type":207,"value":799},{"type":207,"value":823},{"type":198,"tag":203,"props":2311,"children":2312},{},[2313],{"type":207,"value":760},{"type":207,"value":2315},", and\n",{"type":198,"tag":203,"props":2317,"children":2318},{},[2319],{"type":207,"value":287},{"type":207,"value":2321},". It cannot switch the layout type. For a smooth formula, pass a\nfunction of the container width instead:",{"type":198,"tag":404,"props":2323,"children":2324},{"language":406,"class":407},[2325],{"type":198,"tag":203,"props":2326,"children":2327},{"class":411},[2328],{"type":198,"tag":414,"props":2329,"children":2330},{"class":416,"style":417},[2331,2335,2339,2343,2347,2351,2355,2359,2363,2367,2371,2375,2379,2384,2389,2394,2399,2404,2408,2413,2417,2421,2425,2429,2433,2437,2441,2445,2449,2454,2459,2464,2469,2473],{"type":198,"tag":414,"props":2332,"children":2333},{"style":421},[2334],{"type":207,"value":424},{"type":198,"tag":414,"props":2336,"children":2337},{"style":427},[2338],{"type":207,"value":123},{"type":198,"tag":414,"props":2340,"children":2341},{"style":421},[2342],{"type":207,"value":434},{"type":198,"tag":414,"props":2344,"children":2345},{"style":437},[2346],{"type":207,"value":440},{"type":198,"tag":414,"props":2348,"children":2349},{"style":421},[2350],{"type":207,"value":445},{"type":198,"tag":414,"props":2352,"children":2353},{"style":421},[2354],{"type":207,"value":450},{"type":198,"tag":414,"props":2356,"children":2357},{"style":453},[2358],{"type":207,"value":440},{"type":198,"tag":414,"props":2360,"children":2361},{"style":421},[2362],{"type":207,"value":450},{"type":198,"tag":414,"props":2364,"children":2365},{"style":421},[2366],{"type":207,"value":434},{"type":198,"tag":414,"props":2368,"children":2369},{"style":437},[2370],{"type":207,"value":785},{"type":198,"tag":414,"props":2372,"children":2373},{"style":421},[2374],{"type":207,"value":445},{"type":198,"tag":414,"props":2376,"children":2377},{"style":421},[2378],{"type":207,"value":450},{"type":198,"tag":414,"props":2380,"children":2381},{"style":421},[2382],{"type":207,"value":2383},"(",{"type":198,"tag":414,"props":2385,"children":2386},{"style":1219},[2387],{"type":207,"value":2388},"width",{"type":198,"tag":414,"props":2390,"children":2391},{"style":421},[2392],{"type":207,"value":2393},")",{"type":198,"tag":414,"props":2395,"children":2396},{"style":437},[2397],{"type":207,"value":2398}," =>",{"type":198,"tag":414,"props":2400,"children":2401},{"style":453},[2402],{"type":207,"value":2403}," Math",{"type":198,"tag":414,"props":2405,"children":2406},{"style":421},[2407],{"type":207,"value":854},{"type":198,"tag":414,"props":2409,"children":2410},{"style":982},[2411],{"type":207,"value":2412},"min",{"type":198,"tag":414,"props":2414,"children":2415},{"style":453},[2416],{"type":207,"value":2383},{"type":198,"tag":414,"props":2418,"children":2419},{"style":523},[2420],{"type":207,"value":1385},{"type":198,"tag":414,"props":2422,"children":2423},{"style":421},[2424],{"type":207,"value":511},{"type":198,"tag":414,"props":2426,"children":2427},{"style":453},[2428],{"type":207,"value":2403},{"type":198,"tag":414,"props":2430,"children":2431},{"style":421},[2432],{"type":207,"value":854},{"type":198,"tag":414,"props":2434,"children":2435},{"style":982},[2436],{"type":207,"value":1404},{"type":198,"tag":414,"props":2438,"children":2439},{"style":453},[2440],{"type":207,"value":2383},{"type":198,"tag":414,"props":2442,"children":2443},{"style":523},[2444],{"type":207,"value":174},{"type":198,"tag":414,"props":2446,"children":2447},{"style":421},[2448],{"type":207,"value":511},{"type":198,"tag":414,"props":2450,"children":2451},{"style":453},[2452],{"type":207,"value":2453}," width ",{"type":198,"tag":414,"props":2455,"children":2456},{"style":421},[2457],{"type":207,"value":2458},"\u002F",{"type":198,"tag":414,"props":2460,"children":2461},{"style":523},[2462],{"type":207,"value":2463}," 80",{"type":198,"tag":414,"props":2465,"children":2466},{"style":453},[2467],{"type":207,"value":2468},"))",{"type":198,"tag":414,"props":2470,"children":2471},{"style":421},[2472],{"type":207,"value":450},{"type":198,"tag":414,"props":2474,"children":2475},{"style":453},[2476],{"type":207,"value":540},{"type":198,"tag":199,"props":2478,"children":2479},{},[2480],{"type":207,"value":2481},"Start with 4 pixels of spacing on narrow containers and 8 to 12 on wide ones.\nUse fewer columns when most photos are portraits or captions need room.",{"type":198,"tag":217,"props":2483,"children":2485},{"id":2484},"prevent-a-layout-jump-after-server-rendering",[2486],{"type":207,"value":2487},"Prevent a layout jump after server rendering",{"type":198,"tag":199,"props":2489,"children":2490},{},[2491,2495,2496,2500,2501,2505,2506,2510],{"type":198,"tag":203,"props":2492,"children":2493},{},[2494],{"type":207,"value":329},{"type":207,"value":823},{"type":198,"tag":203,"props":2497,"children":2498},{},[2499],{"type":207,"value":350},{"type":207,"value":823},{"type":198,"tag":203,"props":2502,"children":2503},{},[2504],{"type":207,"value":371},{"type":207,"value":834},{"type":198,"tag":203,"props":2507,"children":2508},{},[2509],{"type":207,"value":392},{"type":207,"value":2511}," never jump: CSS places their tiles\nbefore any script runs. The other layouts compute positions from the width.\nThe server does not know how wide the album will be. Give it the width the\nalbum usually has, and the first HTML already has the right rows or columns:",{"type":198,"tag":404,"props":2513,"children":2514},{"language":406,"class":407},[2515],{"type":198,"tag":203,"props":2516,"children":2517},{"class":411},[2518,2529,2530,2558,2559,2587,2588,2721,2722],{"type":198,"tag":414,"props":2519,"children":2520},{"class":416,"style":417},[2521,2525],{"type":198,"tag":414,"props":2522,"children":2523},{"style":421},[2524],{"type":207,"value":424},{"type":198,"tag":414,"props":2526,"children":2527},{"style":427},[2528],{"type":207,"value":123},{"type":207,"value":542},{"type":198,"tag":414,"props":2531,"children":2532},{"class":416,"style":417},[2533,2538,2542,2546,2550,2554],{"type":198,"tag":414,"props":2534,"children":2535},{"style":421},[2536],{"type":207,"value":2537},"  :",{"type":198,"tag":414,"props":2539,"children":2540},{"style":437},[2541],{"type":207,"value":440},{"type":198,"tag":414,"props":2543,"children":2544},{"style":421},[2545],{"type":207,"value":445},{"type":198,"tag":414,"props":2547,"children":2548},{"style":421},[2549],{"type":207,"value":450},{"type":198,"tag":414,"props":2551,"children":2552},{"style":453},[2553],{"type":207,"value":440},{"type":198,"tag":414,"props":2555,"children":2556},{"style":421},[2557],{"type":207,"value":450},{"type":207,"value":542},{"type":198,"tag":414,"props":2560,"children":2561},{"class":416,"style":417},[2562,2566,2571,2575,2579,2583],{"type":198,"tag":414,"props":2563,"children":2564},{"style":421},[2565],{"type":207,"value":2537},{"type":198,"tag":414,"props":2567,"children":2568},{"style":437},[2569],{"type":207,"value":2570},"default-container-width",{"type":198,"tag":414,"props":2572,"children":2573},{"style":421},[2574],{"type":207,"value":445},{"type":198,"tag":414,"props":2576,"children":2577},{"style":421},[2578],{"type":207,"value":450},{"type":198,"tag":414,"props":2580,"children":2581},{"style":523},[2582],{"type":207,"value":2155},{"type":198,"tag":414,"props":2584,"children":2585},{"style":421},[2586],{"type":207,"value":450},{"type":207,"value":542},{"type":198,"tag":414,"props":2589,"children":2590},{"class":416,"style":417},[2591,2595,2599,2603,2607,2611,2615,2619,2623,2627,2631,2635,2639,2643,2648,2652,2656,2661,2665,2670,2674,2679,2683,2687,2691,2696,2700,2704,2708,2712,2717],{"type":198,"tag":414,"props":2592,"children":2593},{"style":421},[2594],{"type":207,"value":2537},{"type":198,"tag":414,"props":2596,"children":2597},{"style":437},[2598],{"type":207,"value":468},{"type":198,"tag":414,"props":2600,"children":2601},{"style":421},[2602],{"type":207,"value":445},{"type":198,"tag":414,"props":2604,"children":2605},{"style":421},[2606],{"type":207,"value":450},{"type":198,"tag":414,"props":2608,"children":2609},{"style":421},[2610],{"type":207,"value":481},{"type":198,"tag":414,"props":2612,"children":2613},{"style":427},[2614],{"type":207,"value":486},{"type":198,"tag":414,"props":2616,"children":2617},{"style":421},[2618],{"type":207,"value":491},{"type":198,"tag":414,"props":2620,"children":2621},{"style":421},[2622],{"type":207,"value":496},{"type":198,"tag":414,"props":2624,"children":2625},{"style":499},[2626],{"type":207,"value":287},{"type":198,"tag":414,"props":2628,"children":2629},{"style":421},[2630],{"type":207,"value":506},{"type":198,"tag":414,"props":2632,"children":2633},{"style":421},[2634],{"type":207,"value":511},{"type":198,"tag":414,"props":2636,"children":2637},{"style":427},[2638],{"type":207,"value":626},{"type":198,"tag":414,"props":2640,"children":2641},{"style":421},[2642],{"type":207,"value":491},{"type":198,"tag":414,"props":2644,"children":2645},{"style":982},[2646],{"type":207,"value":2647}," responsive",{"type":198,"tag":414,"props":2649,"children":2650},{"style":453},[2651],{"type":207,"value":2383},{"type":198,"tag":414,"props":2653,"children":2654},{"style":421},[2655],{"type":207,"value":481},{"type":198,"tag":414,"props":2657,"children":2658},{"style":523},[2659],{"type":207,"value":2660}," 0",{"type":198,"tag":414,"props":2662,"children":2663},{"style":421},[2664],{"type":207,"value":491},{"type":198,"tag":414,"props":2666,"children":2667},{"style":523},[2668],{"type":207,"value":2669}," 2",{"type":198,"tag":414,"props":2671,"children":2672},{"style":421},[2673],{"type":207,"value":511},{"type":198,"tag":414,"props":2675,"children":2676},{"style":523},[2677],{"type":207,"value":2678}," 640",{"type":198,"tag":414,"props":2680,"children":2681},{"style":421},[2682],{"type":207,"value":491},{"type":198,"tag":414,"props":2684,"children":2685},{"style":523},[2686],{"type":207,"value":635},{"type":198,"tag":414,"props":2688,"children":2689},{"style":421},[2690],{"type":207,"value":511},{"type":198,"tag":414,"props":2692,"children":2693},{"style":523},[2694],{"type":207,"value":2695}," 1024",{"type":198,"tag":414,"props":2697,"children":2698},{"style":421},[2699],{"type":207,"value":491},{"type":198,"tag":414,"props":2701,"children":2702},{"style":523},[2703],{"type":207,"value":740},{"type":198,"tag":414,"props":2705,"children":2706},{"style":421},[2707],{"type":207,"value":531},{"type":198,"tag":414,"props":2709,"children":2710},{"style":453},[2711],{"type":207,"value":1227},{"type":198,"tag":414,"props":2713,"children":2714},{"style":421},[2715],{"type":207,"value":2716},"}",{"type":198,"tag":414,"props":2718,"children":2719},{"style":421},[2720],{"type":207,"value":450},{"type":207,"value":542},{"type":198,"tag":414,"props":2723,"children":2724},{"class":416,"style":417},[2725],{"type":198,"tag":414,"props":2726,"children":2727},{"style":453},[2728],{"type":207,"value":2729},"\u002F>",{"type":198,"tag":199,"props":2731,"children":2732},{},[2733,2735,2739],{"type":207,"value":2734},"After the page loads, the album measures its container and uses the real\nwidth. Choose a value that is one of your ",{"type":198,"tag":203,"props":2736,"children":2737},{},[2738],{"type":207,"value":1611},{"type":207,"value":2740}," keys and close to the\ncommon width, such as the width of your content column on desktop. Columns and\nmasonry near the top of the page benefit most.",{"type":198,"tag":199,"props":2742,"children":2743},{},[2744,2746,2750],{"type":207,"value":2745},"When you use a function instead of ",{"type":198,"tag":203,"props":2747,"children":2748},{},[2749],{"type":207,"value":1611},{"type":207,"value":2751},", also list the widths the\nmeasurement should snap to:",{"type":198,"tag":404,"props":2753,"children":2754},{"language":406,"class":407},[2755],{"type":198,"tag":203,"props":2756,"children":2757},{"class":411},[2758,2769,2770,2797,2798,2872,2873,2900,2901,2964,2965],{"type":198,"tag":414,"props":2759,"children":2760},{"class":416,"style":417},[2761,2765],{"type":198,"tag":414,"props":2762,"children":2763},{"style":421},[2764],{"type":207,"value":424},{"type":198,"tag":414,"props":2766,"children":2767},{"style":427},[2768],{"type":207,"value":123},{"type":207,"value":542},{"type":198,"tag":414,"props":2771,"children":2772},{"class":416,"style":417},[2773,2777,2781,2785,2789,2793],{"type":198,"tag":414,"props":2774,"children":2775},{"style":421},[2776],{"type":207,"value":2537},{"type":198,"tag":414,"props":2778,"children":2779},{"style":437},[2780],{"type":207,"value":440},{"type":198,"tag":414,"props":2782,"children":2783},{"style":421},[2784],{"type":207,"value":445},{"type":198,"tag":414,"props":2786,"children":2787},{"style":421},[2788],{"type":207,"value":450},{"type":198,"tag":414,"props":2790,"children":2791},{"style":453},[2792],{"type":207,"value":440},{"type":198,"tag":414,"props":2794,"children":2795},{"style":421},[2796],{"type":207,"value":450},{"type":207,"value":542},{"type":198,"tag":414,"props":2799,"children":2800},{"class":416,"style":417},[2801,2805,2809,2813,2817,2821,2825,2829,2833,2838,2842,2846,2851,2855,2859,2864,2868],{"type":198,"tag":414,"props":2802,"children":2803},{"style":421},[2804],{"type":207,"value":2537},{"type":198,"tag":414,"props":2806,"children":2807},{"style":437},[2808],{"type":207,"value":785},{"type":198,"tag":414,"props":2810,"children":2811},{"style":421},[2812],{"type":207,"value":445},{"type":198,"tag":414,"props":2814,"children":2815},{"style":421},[2816],{"type":207,"value":450},{"type":198,"tag":414,"props":2818,"children":2819},{"style":421},[2820],{"type":207,"value":2383},{"type":198,"tag":414,"props":2822,"children":2823},{"style":1219},[2824],{"type":207,"value":2388},{"type":198,"tag":414,"props":2826,"children":2827},{"style":421},[2828],{"type":207,"value":2393},{"type":198,"tag":414,"props":2830,"children":2831},{"style":437},[2832],{"type":207,"value":2398},{"type":198,"tag":414,"props":2834,"children":2835},{"style":453},[2836],{"type":207,"value":2837}," (width ",{"type":198,"tag":414,"props":2839,"children":2840},{"style":421},[2841],{"type":207,"value":424},{"type":198,"tag":414,"props":2843,"children":2844},{"style":523},[2845],{"type":207,"value":2678},{"type":198,"tag":414,"props":2847,"children":2848},{"style":421},[2849],{"type":207,"value":2850}," ?",{"type":198,"tag":414,"props":2852,"children":2853},{"style":523},[2854],{"type":207,"value":740},{"type":198,"tag":414,"props":2856,"children":2857},{"style":421},[2858],{"type":207,"value":434},{"type":198,"tag":414,"props":2860,"children":2861},{"style":523},[2862],{"type":207,"value":2863}," 12",{"type":198,"tag":414,"props":2865,"children":2866},{"style":453},[2867],{"type":207,"value":2393},{"type":198,"tag":414,"props":2869,"children":2870},{"style":421},[2871],{"type":207,"value":450},{"type":207,"value":542},{"type":198,"tag":414,"props":2874,"children":2875},{"class":416,"style":417},[2876,2880,2884,2888,2892,2896],{"type":198,"tag":414,"props":2877,"children":2878},{"style":421},[2879],{"type":207,"value":2537},{"type":198,"tag":414,"props":2881,"children":2882},{"style":437},[2883],{"type":207,"value":2570},{"type":198,"tag":414,"props":2885,"children":2886},{"style":421},[2887],{"type":207,"value":445},{"type":198,"tag":414,"props":2889,"children":2890},{"style":421},[2891],{"type":207,"value":450},{"type":198,"tag":414,"props":2893,"children":2894},{"style":523},[2895],{"type":207,"value":2155},{"type":198,"tag":414,"props":2897,"children":2898},{"style":421},[2899],{"type":207,"value":450},{"type":207,"value":542},{"type":198,"tag":414,"props":2902,"children":2903},{"class":416,"style":417},[2904,2908,2912,2916,2920,2925,2930,2934,2938,2942,2946,2950,2955,2960],{"type":198,"tag":414,"props":2905,"children":2906},{"style":421},[2907],{"type":207,"value":2537},{"type":198,"tag":414,"props":2909,"children":2910},{"style":437},[2911],{"type":207,"value":1963},{"type":198,"tag":414,"props":2913,"children":2914},{"style":421},[2915],{"type":207,"value":445},{"type":198,"tag":414,"props":2917,"children":2918},{"style":421},[2919],{"type":207,"value":450},{"type":198,"tag":414,"props":2921,"children":2922},{"style":453},[2923],{"type":207,"value":2924},"[",{"type":198,"tag":414,"props":2926,"children":2927},{"style":523},[2928],{"type":207,"value":2929},"375",{"type":198,"tag":414,"props":2931,"children":2932},{"style":421},[2933],{"type":207,"value":511},{"type":198,"tag":414,"props":2935,"children":2936},{"style":523},[2937],{"type":207,"value":2678},{"type":198,"tag":414,"props":2939,"children":2940},{"style":421},[2941],{"type":207,"value":511},{"type":198,"tag":414,"props":2943,"children":2944},{"style":523},[2945],{"type":207,"value":2695},{"type":198,"tag":414,"props":2947,"children":2948},{"style":421},[2949],{"type":207,"value":511},{"type":198,"tag":414,"props":2951,"children":2952},{"style":523},[2953],{"type":207,"value":2954}," 1280",{"type":198,"tag":414,"props":2956,"children":2957},{"style":453},[2958],{"type":207,"value":2959},"]",{"type":198,"tag":414,"props":2961,"children":2962},{"style":421},[2963],{"type":207,"value":450},{"type":207,"value":542},{"type":198,"tag":414,"props":2966,"children":2967},{"class":416,"style":417},[2968],{"type":198,"tag":414,"props":2969,"children":2970},{"style":453},[2971],{"type":207,"value":2729},{"type":198,"tag":199,"props":2973,"children":2974},{},[2975,2979],{"type":198,"tag":203,"props":2976,"children":2977},{},[2978],{"type":207,"value":1611},{"type":207,"value":2980}," adds its own keys to the breakpoints for you.",{"type":198,"tag":2982,"props":2983,"children":2985},"warning",{"$":2984},{"component":214,"block":214},[2986,2988,2992,2994,2999],{"type":207,"value":2987},"The layout needs the real ",{"type":198,"tag":203,"props":2989,"children":2990},{},[2991],{"type":207,"value":2388},{"type":207,"value":2993}," and ",{"type":198,"tag":203,"props":2995,"children":2996},{},[2997],{"type":207,"value":2998},"height",{"type":207,"value":3000}," of every photo. Wrong values\nstill render, but photos then change their shape when they load.",{"type":198,"tag":217,"props":3002,"children":3004},{"id":3003},"check-the-result",[3005],{"type":207,"value":3006},"Check the result",{"type":198,"tag":199,"props":3008,"children":3009},{},[3010,3012,3016,3018,3022,3023,3027,3028,3032,3033,3037],{"type":207,"value":3011},"Open the page at a narrow, a medium, and a wide window, with the album inside\nits real parent. The column count and spacing change at your breakpoints. Reload\nwith a slow network: the album keeps its shape while images load, and does not\njump after hydration at the width you chose for ",{"type":198,"tag":203,"props":3013,"children":3014},{},[3015],{"type":207,"value":852},{"type":207,"value":3017},". For\n",{"type":198,"tag":203,"props":3019,"children":3020},{},[3021],{"type":207,"value":329},{"type":207,"value":823},{"type":198,"tag":203,"props":3024,"children":3025},{},[3026],{"type":207,"value":350},{"type":207,"value":823},{"type":198,"tag":203,"props":3029,"children":3030},{},[3031],{"type":207,"value":371},{"type":207,"value":834},{"type":198,"tag":203,"props":3034,"children":3035},{},[3036],{"type":207,"value":392},{"type":207,"value":3038},", turn off JavaScript in the browser\nand reload: the tiles have the same size and place as with JavaScript.",{"title":3040,"searchDepth":3041,"depth":3041,"links":3042},"",4,[3043,3045,3046,3047,3048],{"id":219,"depth":3044,"text":222},2,{"id":811,"depth":3044,"text":814},{"id":1973,"depth":3044,"text":1976},{"id":2484,"depth":3044,"text":2487},{"id":3003,"depth":3044,"text":3006},"markdown","docs",{"source":3052,"path":3053,"stem":3054,"dir":3055,"extension":3056},"content","docs\u002F2.guides\u002F2.responsive-layouts.md","docs\u002F2.guides\u002F2.responsive-layouts","guides","md",{"requestedPath":64,"resolvedPath":64,"alternates":3058},[],{"requested":3060,"resolved":3061,"usedFallback":6},{},{"locale":8},{"previous":3063,"next":3064},{"title":56,"id":57,"canonicalKey":58,"locale":8,"draft":6,"path":59},{"title":66,"id":67,"canonicalKey":68,"locale":8,"draft":6,"path":69},{"left":3066,"top":3066,"width":3067,"height":3068,"rotate":3066,"vFlip":6,"hFlip":6,"body":3069},0,256,221,"\u003Cpath fill=\"#41b883\" d=\"M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0z\"\u002F>\u003Cpath fill=\"#41b883\" d=\"m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0z\"\u002F>\u003Cpath fill=\"#35495e\" d=\"M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0z\"\u002F>",{"left":3066,"top":3066,"width":3071,"height":3071,"rotate":3066,"vFlip":6,"hFlip":6,"body":3072},24,"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Crect width=\"8\" height=\"4\" x=\"8\" y=\"2\" rx=\"1\" ry=\"1\"\u002F>\u003Cpath d=\"M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2\"\u002F>\u003C\u002Fg>",1791310385566]