[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"\u002Fblog\u002Fmasonry-lite-layout-tailwind-css":3,"$f4DT_Gro8kp59hinWw-A6qz8cxXZ38kMszWJyx1dliiM":391,"i-local-icon:calendar-days":395,"i-local-icon:tag":400,"i-local-icon:eye":402},{"id":4,"title":5,"body":6,"categories_slug":379,"comment_count":382,"date_published":383,"description":384,"extension":385,"meta":386,"navigation":247,"path":387,"seo":388,"stem":389,"__hash__":390},"content\u002Fblog\u002F22.masonry-lite-layout-tailwind-css.md","Creating a \"Masonry-lite\" Layout with Tailwind CSS Columns",{"type":7,"value":8,"toc":370},"minimark",[9,13,18,23,27,39,45,63,67,70,266,292,301,305,310,319,327,331,334,344,351,355,363,366],[10,11,5],"h1",{"id":12},"creating-a-masonry-lite-layout-with-tailwind-css-columns",[14,15],"meta-card",{":categories":16,":date":17},"categories_slug","date_published",[19,20,22],"h2",{"id":21},"overview","Overview",[24,25,26],"p",{},"While the \"true\" Masonry layout is currently being drafted for the CSS Grid Level 3 specification, you can achieve a \"Masonry-lite\" effect using CSS Columns, and if you are using Tailwind CSS, you can do it with just two different classes.",[24,28,29,30,38],{},"From the ",[31,32,37],"a",{"href":33,"rel":34,":target":36},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FCSS\u002FGuides\u002FGrid_layout\u002FMasonry_layout#:~:text=Level%203%20of%20the%20CSS,the%20other%20a%20masonry%20layout.",[35],"nofollow","\\_blank","MDN Docs - Experimental Technology",":",[40,41,42],"blockquote",{},[24,43,44],{},"Level 3 of the CSS grid layout specification includes a masonry value for grid-template-columns and grid-template-rows.",[24,46,47,51,52,57,58,62],{},[48,49,50],"strong",{},"Update Note:"," You can read more about the ",[31,53,56],{"href":54,"rel":55},"https:\u002F\u002Fbordermedia.org\u002Fblog\u002Fcss-masonry-syntax-wars",[35],"CSS masonry syntax wars here"," and how ",[59,60,61],"code",{},"display: grid-lanes"," seems to have finally won out. Although browser support is still very minimal currently and only in its experimental stage.",[19,64,66],{"id":65},"the-html-structure-tailwind-classes","The HTML structure & Tailwind classes",[24,68,69],{},"The CSS multi-column layout module was originally designed for flowing text, but it is surprisingly effective for image galleries.",[71,72,77],"pre",{"className":73,"code":74,"language":75,"meta":76,"style":76},"language-html shiki shiki-themes github-dark","\u003Cdiv class=\"columns-2 gap-4 md:columns-3\">\n  \u003Cdiv class=\"break-inside-avoid pb-4\">\n    \u003Cimg\n      src=\"https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1470071459604-3b5ec3a7fe05?auto=format&fit=crop&q=80&w=800&h=600\" \u002F>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"break-inside-avoid pb-4\">\n    \u003Cimg\n      src=\"https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1487958449943-2429e8be8625?auto=format&fit=crop&q=80&w=400&h=400\" \u002F>\n  \u003C\u002Fdiv>\n  \u003Cdiv class=\"break-inside-avoid pb-4\">\n    \u003Cimg\n      src=\"https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1494438639946-1ebd1d20bf85?auto=format&fit=crop&q=80&w=1200&h=800\" \u002F>\n  \u003C\u002Fdiv>\n\n  \u003C!-- More images... -->\n\u003C\u002Fdiv>\n","html","",[59,78,79,106,123,132,146,156,171,178,190,199,214,221,233,242,249,256],{"__ignoreMap":76},[80,81,84,88,92,96,99,103],"span",{"class":82,"line":83},"line",1,[80,85,87],{"class":86},"s95oV","\u003C",[80,89,91],{"class":90},"s4JwU","div",[80,93,95],{"class":94},"svObZ"," class",[80,97,98],{"class":86},"=",[80,100,102],{"class":101},"sU2Wk","\"columns-2 gap-4 md:columns-3\"",[80,104,105],{"class":86},">\n",[80,107,109,112,114,116,118,121],{"class":82,"line":108},2,[80,110,111],{"class":86},"  \u003C",[80,113,91],{"class":90},[80,115,95],{"class":94},[80,117,98],{"class":86},[80,119,120],{"class":101},"\"break-inside-avoid pb-4\"",[80,122,105],{"class":86},[80,124,126,129],{"class":82,"line":125},3,[80,127,128],{"class":86},"    \u003C",[80,130,131],{"class":90},"img\n",[80,133,135,138,140,143],{"class":82,"line":134},4,[80,136,137],{"class":94},"      src",[80,139,98],{"class":86},[80,141,142],{"class":101},"\"https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1470071459604-3b5ec3a7fe05?auto=format&fit=crop&q=80&w=800&h=600\"",[80,144,145],{"class":86}," \u002F>\n",[80,147,149,152,154],{"class":82,"line":148},5,[80,150,151],{"class":86},"  \u003C\u002F",[80,153,91],{"class":90},[80,155,105],{"class":86},[80,157,159,161,163,165,167,169],{"class":82,"line":158},6,[80,160,111],{"class":86},[80,162,91],{"class":90},[80,164,95],{"class":94},[80,166,98],{"class":86},[80,168,120],{"class":101},[80,170,105],{"class":86},[80,172,174,176],{"class":82,"line":173},7,[80,175,128],{"class":86},[80,177,131],{"class":90},[80,179,181,183,185,188],{"class":82,"line":180},8,[80,182,137],{"class":94},[80,184,98],{"class":86},[80,186,187],{"class":101},"\"https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1487958449943-2429e8be8625?auto=format&fit=crop&q=80&w=400&h=400\"",[80,189,145],{"class":86},[80,191,193,195,197],{"class":82,"line":192},9,[80,194,151],{"class":86},[80,196,91],{"class":90},[80,198,105],{"class":86},[80,200,202,204,206,208,210,212],{"class":82,"line":201},10,[80,203,111],{"class":86},[80,205,91],{"class":90},[80,207,95],{"class":94},[80,209,98],{"class":86},[80,211,120],{"class":101},[80,213,105],{"class":86},[80,215,217,219],{"class":82,"line":216},11,[80,218,128],{"class":86},[80,220,131],{"class":90},[80,222,224,226,228,231],{"class":82,"line":223},12,[80,225,137],{"class":94},[80,227,98],{"class":86},[80,229,230],{"class":101},"\"https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1494438639946-1ebd1d20bf85?auto=format&fit=crop&q=80&w=1200&h=800\"",[80,232,145],{"class":86},[80,234,236,238,240],{"class":82,"line":235},13,[80,237,151],{"class":86},[80,239,91],{"class":90},[80,241,105],{"class":86},[80,243,245],{"class":82,"line":244},14,[80,246,248],{"emptyLinePlaceholder":247},true,"\n",[80,250,252],{"class":82,"line":251},15,[80,253,255],{"class":254},"sAwPA","  \u003C!-- More images... -->\n",[80,257,259,262,264],{"class":82,"line":258},16,[80,260,261],{"class":86},"\u003C\u002F",[80,263,91],{"class":90},[80,265,105],{"class":86},[24,267,268,269,272,273,277,278,272,281,284,285,272,288,291],{},"By applying ",[59,270,271],{},"columns-2"," (",[274,275,276],"em",{},"2 columns on small screen sizes","), ",[59,279,280],{},"md:columns-3",[274,282,283],{},"3 columns for 768px wide and greater","), and ",[59,286,287],{},"break-inside-avoid",[274,289,290],{},"to prevent the browser from trying to split the image across columns",") to your html, you have instantly created a functional, fluid gallery that adjusts based on screen size.",[24,293,294],{},[295,296],"img",{"alt":297,"className":298,"src":300},"Tailwind Masonry Layout Image 1",[299],"blog-image","\u002Fimages\u002Fblog\u002Fmasonry-layout\u002Fmasonry-layout-1.webp",[19,302,304],{"id":303},"how-it-works","How It Works",[306,307,309],"h3",{"id":308},"_1-defining-the-columns","1. Defining the columns",[24,311,312,313,315,316,318],{},"The classes ",[59,314,271],{}," and ",[59,317,280],{}," tell the browser how many vertical columns to split the container into. It will distribute your content vertically until it hits the container's height or flows into the next column.",[24,320,321,322],{},"Refer to the Tailwind docs here ",[31,323,326],{"href":324,"rel":325,":target":36},"https:\u002F\u002Ftailwindcss.com\u002Fdocs\u002Fcolumns",[35],"Tailwind CSS Docs - columns",[306,328,330],{"id":329},"_2-preventing-the-split","2. Preventing the \"Split\"",[24,332,333],{},"By default, the browser might decide to \"break\" an element to finish a column. For example, the top half of an image might be at the bottom of Column 1, while the bottom half appears at the top of Column 2.",[24,335,336,337,339,340,343],{},"To fix this, use the ",[59,338,287],{}," class (which maps to ",[59,341,342],{},"break-inside: avoid-column"," in standard CSS). When applied to the child elements (the wrappers of your images or cards), it ensures that the element stays whole and moves entirely to the next column if it doesn't fit.",[24,345,321,346],{},[31,347,350],{"href":348,"rel":349,":target":36},"https:\u002F\u002Ftailwindcss.com\u002Fdocs\u002Fbreak-inside",[35],"Tailwind CSS Docs - Break Inside",[19,352,354],{"id":353},"the-lite-trade-off-flow-direction","The \"Lite\" Trade-off: Flow Direction",[24,356,357,358,362],{},"In a standard Masonry library (",[31,359,361],{"href":33,"rel":360,":target":36},[35],"or the upcoming CSS Grid spec","), items are ordered horizontally. Item 1 is top-left, Item 2 is to its right, and so on.",[24,364,365],{},"With CSS Columns, the order is vertical. Item 1 is at the top of the first column, Item 2 is directly below it, and Item 3 might be at the top of the second column. If the chronological order of your items is vital (such as a blog or news feed), this might not be the best solution. However, for a visual portfolio or an image gallery where the look matters more than the sequence, CSS Columns are a good, zero-JS solution.",[367,368,369],"style",{},"html pre.shiki code .s95oV, html code.shiki .s95oV{--shiki-default:#E1E4E8}html pre.shiki code .s4JwU, html code.shiki .s4JwU{--shiki-default:#85E89D}html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}html pre.shiki code .sU2Wk, html code.shiki .sU2Wk{--shiki-default:#9ECBFF}html pre.shiki code .sAwPA, html code.shiki .sAwPA{--shiki-default:#6A737D}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"title":76,"searchDepth":108,"depth":108,"links":371},[372,373,374,378],{"id":21,"depth":108,"text":22},{"id":65,"depth":108,"text":66},{"id":303,"depth":108,"text":304,"children":375},[376,377],{"id":308,"depth":125,"text":309},{"id":329,"depth":125,"text":330},{"id":353,"depth":108,"text":354},[380,381],"tailwind","css",null,"2026-01-02","While the 'true' Masonry layout is currently being drafted for the CSS Grid Level 3 specification, you can achieve a 'Masonry-lite' effect using CSS Columns, and if you are using Tailwind CSS, you can do it with just two different classes.","md",{},"\u002Fblog\u002Fmasonry-lite-layout-tailwind-css",{"title":5,"description":384},"blog\u002F22.masonry-lite-layout-tailwind-css","yd62KtGdK2-zBGG5210aALVB58M_OSXr9o1sK-_8kJw",[392],{"id":393,"name":387,"count":394},39,1098,{"left":396,"top":396,"width":397,"height":397,"rotate":396,"vFlip":398,"hFlip":398,"body":399},0,24,false,"\u003Cpath\n    fill=\"none\"\n    stroke=\"currentColor\"\n    stroke-linecap=\"round\"\n    stroke-linejoin=\"round\"\n    stroke-width=\"1.5\"\n    d=\"M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5m-9-6h.008v.008H12zM12 15h.008v.008H12zm0 2.25h.008v.008H12zM9.75 15h.008v.008H9.75zm0 2.25h.008v.008H9.75zM7.5 15h.008v.008H7.5zm0 2.25h.008v.008H7.5zm6.75-4.5h.008v.008h-.008zm0 2.25h.008v.008h-.008zm0 2.25h.008v.008h-.008zm2.25-4.5h.008v.008H16.5zm0 2.25h.008v.008H16.5z\" \u002F>",{"left":396,"top":396,"width":397,"height":397,"rotate":396,"vFlip":398,"hFlip":398,"body":401},"\u003Cg\n    fill=\"none\"\n    stroke=\"currentColor\"\n    stroke-linecap=\"round\"\n    stroke-linejoin=\"round\"\n    stroke-width=\"1.5\">\n    \u003Cpath\n      d=\"M9.568 3H5.25A2.25 2.25 0 0 0 3 5.25v4.318c0 .597.237 1.17.659 1.591l9.581 9.581c.699.699 1.78.872 2.607.33a18.1 18.1 0 0 0 5.224-5.223c.54-.827.368-1.908-.33-2.607l-9.583-9.58A2.25 2.25 0 0 0 9.568 3\" \u002F>\n    \u003Cpath d=\"M6 6h.008v.008H6z\" \u002F>\n  \u003C\u002Fg>",{"left":396,"top":396,"width":397,"height":397,"rotate":396,"vFlip":398,"hFlip":398,"body":403},"\u003Cg\n    fill=\"none\"\n    stroke=\"currentColor\"\n    stroke-linecap=\"round\"\n    stroke-linejoin=\"round\"\n    stroke-width=\"1.5\">\n    \u003Cpath\n      d=\"M2.036 12.322a1 1 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178c.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178\" \u002F>\n    \u003Cpath d=\"M15 12a3 3 0 1 1-6 0a3 3 0 0 1 6 0\" \u002F>\n  \u003C\u002Fg>"]