[{"data":1,"prerenderedAt":3937},["ShallowReactive",2],{"docs-nav":3,"\u002Fdocs\u002Fcomponents\u002Fcolumn":316},[4,9,15,19,24,28,33,37,41,45,49,53,57,60,63,67,70,74,77,81,85,89,93,97,101,105,109,113,117,121,125,129,133,137,141,145,149,153,156,159,162,165,168,171,175,178,181,184,186,189,192,195,198,201,204,207,210,213,216,219,222,225,228,231,234,237,240,244,247,250,253,257,261,264,267,270,273,276,279,282,285,287,290,293,296,299,302,305,308,311,313],{"path":5,"title":6,"section":7,"order":7,"sidebar":8},"\u002Fbrand","Brand",null,false,{"path":10,"title":11,"section":12,"order":13,"sidebar":14},"\u002Fdocs\u002Fapi\u002Fcomposables","Composables","API",2,true,{"path":16,"title":17,"section":12,"order":18,"sidebar":14},"\u002Fdocs\u002Fapi\u002Futilities","Utilities",1,{"path":20,"title":21,"section":22,"order":23,"sidebar":14},"\u002Fdocs\u002Fcli","CLI","Getting Started",9,{"path":25,"title":26,"section":22,"order":27,"sidebar":14},"\u002Fdocs\u002Fcompatibility","Compatibility",4,{"path":29,"title":30,"section":31,"order":32,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fbody","Body","Components",3,{"path":34,"title":35,"section":31,"order":36,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fbutton","Button",13,{"path":38,"title":39,"section":31,"order":40,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fcodeblock","CodeBlock",18,{"path":42,"title":43,"section":31,"order":44,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fcodeinline","CodeInline",19,{"path":46,"title":47,"section":31,"order":48,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fcolumn","Column",8,{"path":50,"title":51,"section":31,"order":52,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fcontainer","Container",5,{"path":54,"title":55,"section":31,"order":56,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Ffont","Font",11,{"path":58,"title":59,"section":31,"order":13,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fhead","Head",{"path":61,"title":62,"section":31,"order":23,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fheading","Heading",{"path":64,"title":65,"section":31,"order":66,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fhr","Hr",16,{"path":68,"title":69,"section":31,"order":18,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fhtml","Html",{"path":71,"title":72,"section":31,"order":73,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fimg","Img",14,{"path":75,"title":76,"section":31,"order":27,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Flayout","Layout",{"path":78,"title":79,"section":31,"order":80,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Flink","Link",12,{"path":82,"title":83,"section":31,"order":84,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fmarkdown","Markdown",20,{"path":86,"title":87,"section":31,"order":88,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fnotoutlook","NotOutlook",22,{"path":90,"title":91,"section":31,"order":92,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fnowidows","NoWidows",26,{"path":94,"title":95,"section":31,"order":96,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Foutlook","Outlook",21,{"path":98,"title":99,"section":31,"order":100,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Foutlookbg","OutlookBg",23,{"path":102,"title":103,"section":31,"order":104,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Foverview","Overview",0,{"path":106,"title":107,"section":31,"order":108,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fplaintext","Plaintext",31,{"path":110,"title":111,"section":31,"order":112,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fpreheader","Preheader",17,{"path":114,"title":115,"section":31,"order":116,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fqrcode","QrCode",30,{"path":118,"title":119,"section":31,"order":120,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fraw","Raw",28,{"path":122,"title":123,"section":31,"order":124,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Frow","Row",7,{"path":126,"title":127,"section":31,"order":128,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fsection","Section",6,{"path":130,"title":131,"section":31,"order":132,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fspacer","Spacer",15,{"path":134,"title":135,"section":31,"order":136,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Ftailwind","Tailwind",29,{"path":138,"title":139,"section":31,"order":140,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Ftext","Text",10,{"path":142,"title":143,"section":31,"order":144,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fvml","Vml",24,{"path":146,"title":147,"section":31,"order":148,"sidebar":14},"\u002Fdocs\u002Fcomponents\u002Fwithurl","WithUrl",27,{"path":150,"title":151,"section":152,"order":128,"sidebar":14},"\u002Fdocs\u002Fdeploy\u002Faws-ses","AWS SES","Deploy",{"path":154,"title":155,"section":152,"order":124,"sidebar":14},"\u002Fdocs\u002Fdeploy\u002Fcloudflare","Cloudflare",{"path":157,"title":158,"section":152,"order":32,"sidebar":14},"\u002Fdocs\u002Fdeploy\u002Fmailgun","Mailgun",{"path":160,"title":161,"section":152,"order":18,"sidebar":14},"\u002Fdocs\u002Fdeploy\u002Fnodemailer","Nodemailer",{"path":163,"title":164,"section":152,"order":27,"sidebar":14},"\u002Fdocs\u002Fdeploy\u002Fpostmark","Postmark",{"path":166,"title":167,"section":152,"order":52,"sidebar":14},"\u002Fdocs\u002Fdeploy\u002Fresend","Resend",{"path":169,"title":170,"section":152,"order":13,"sidebar":14},"\u002Fdocs\u002Fdeploy\u002Fsendgrid","SendGrid",{"path":172,"title":173,"section":174,"order":32,"sidebar":14},"\u002Fdocs\u002Fdevelopment\u002Fconfiguration","Configuration","Development",{"path":176,"title":177,"section":174,"order":52,"sidebar":14},"\u002Fdocs\u002Fdevelopment\u002Fevents","Events",{"path":179,"title":180,"section":174,"order":128,"sidebar":14},"\u002Fdocs\u002Fdevelopment\u002Fi18n","i18n",{"path":182,"title":183,"section":174,"order":13,"sidebar":14},"\u002Fdocs\u002Fdevelopment\u002Flocal","Dev Server",{"path":185,"title":107,"section":174,"order":27,"sidebar":14},"\u002Fdocs\u002Fdevelopment\u002Fplaintext",{"path":187,"title":188,"section":174,"order":18,"sidebar":14},"\u002Fdocs\u002Fdevelopment\u002Ftemplates","Templates",{"path":190,"title":191,"section":22,"order":32,"sidebar":14},"\u002Fdocs\u002Feditor-setup","Editor Setup",{"path":193,"title":194,"section":22,"order":48,"sidebar":14},"\u002Fdocs\u002Fglossary","Glossary",{"path":196,"title":197,"section":22,"order":128,"sidebar":8},"\u002Fdocs\u002Finstallation\u002Fframeworks","Framework Guides",{"path":199,"title":200,"section":197,"order":52,"sidebar":14},"\u002Fdocs\u002Finstallation\u002Fframeworks\u002Fadonisjs","AdonisJS",{"path":202,"title":203,"section":197,"order":32,"sidebar":14},"\u002Fdocs\u002Finstallation\u002Fframeworks\u002Fastro","Astro",{"path":205,"title":206,"section":197,"order":18,"sidebar":14},"\u002Fdocs\u002Finstallation\u002Fframeworks\u002Flaravel","Laravel",{"path":208,"title":209,"section":197,"order":48,"sidebar":14},"\u002Fdocs\u002Finstallation\u002Fframeworks\u002Fnextjs","Next.js",{"path":211,"title":212,"section":197,"order":13,"sidebar":14},"\u002Fdocs\u002Finstallation\u002Fframeworks\u002Fnuxt","Nuxt",{"path":214,"title":215,"section":197,"order":124,"sidebar":14},"\u002Fdocs\u002Finstallation\u002Fframeworks\u002Fqwik","Qwik",{"path":217,"title":218,"section":197,"order":128,"sidebar":14},"\u002Fdocs\u002Finstallation\u002Fframeworks\u002Fsolid","Solid",{"path":220,"title":221,"section":197,"order":27,"sidebar":14},"\u002Fdocs\u002Finstallation\u002Fframeworks\u002Fsveltekit","SvelteKit",{"path":223,"title":224,"section":197,"order":23,"sidebar":14},"\u002Fdocs\u002Finstallation\u002Fframeworks\u002Ftanstack","TanStack Start",{"path":226,"title":227,"section":22,"order":13,"sidebar":14},"\u002Fdocs\u002Finstallation","Installation",{"path":229,"title":230,"section":22,"order":32,"sidebar":8},"\u002Fdocs\u002Finstallation\u002Fmanual","Manual Installation",{"path":232,"title":233,"section":22,"order":27,"sidebar":8},"\u002Fdocs\u002Finstallation\u002Fmonorepo","Monorepo Installation",{"path":235,"title":236,"section":22,"order":52,"sidebar":8},"\u002Fdocs\u002Finstallation\u002Fvite","Vite Plugin",{"path":238,"title":239,"section":22,"order":18,"sidebar":14},"\u002Fdocs\u002Fintroduction","What is Maizzle?",{"path":241,"title":242,"section":243,"order":13,"sidebar":14},"\u002Fdocs\u002Fmigrate\u002Fmjml","MJML","Migrate to Maizzle",{"path":245,"title":246,"section":243,"order":18,"sidebar":14},"\u002Fdocs\u002Fmigrate\u002Freact-email","React Email",{"path":248,"title":249,"section":22,"order":124,"sidebar":14},"\u002Fdocs\u002Fresources","Resources",{"path":251,"title":252,"section":22,"order":128,"sidebar":14},"\u002Fdocs\u002Fskill","Agent Skill",{"path":254,"title":255,"section":256,"order":18,"sidebar":14},"\u002Fdocs\u002Ftailwindcss","Tailwind CSS","Core Concepts",{"path":258,"title":259,"section":260,"order":13,"sidebar":14},"\u002Fdocs\u002Ftransformers\u002Fadd-attributes","Add Attributes","Transformers",{"path":262,"title":263,"section":260,"order":48,"sidebar":14},"\u002Fdocs\u002Ftransformers\u002Fattribute-to-style","Attribute to Style",{"path":265,"title":266,"section":260,"order":36,"sidebar":14},"\u002Fdocs\u002Ftransformers\u002Fbase-url","Base URL",{"path":268,"title":269,"section":260,"order":66,"sidebar":14},"\u002Fdocs\u002Ftransformers\u002Fentities","Entities",{"path":271,"title":272,"section":260,"order":80,"sidebar":14},"\u002Fdocs\u002Ftransformers\u002Ffilters","Filters",{"path":274,"title":275,"section":260,"order":112,"sidebar":14},"\u002Fdocs\u002Ftransformers\u002Fformat","Format",{"path":277,"title":278,"section":260,"order":32,"sidebar":14},"\u002Fdocs\u002Ftransformers\u002Finline-css","Inline CSS",{"path":280,"title":281,"section":260,"order":56,"sidebar":14},"\u002Fdocs\u002Ftransformers\u002Finline-link","Inline Link",{"path":283,"title":284,"section":260,"order":40,"sidebar":14},"\u002Fdocs\u002Ftransformers\u002Fminify","Minify",{"path":286,"title":103,"section":260,"order":18,"sidebar":14},"\u002Fdocs\u002Ftransformers\u002Foverview",{"path":288,"title":289,"section":260,"order":27,"sidebar":14},"\u002Fdocs\u002Ftransformers\u002Fpurge-css","Purge CSS",{"path":291,"title":292,"section":260,"order":140,"sidebar":14},"\u002Fdocs\u002Ftransformers\u002Fremove-attributes","Remove Attributes",{"path":294,"title":295,"section":260,"order":132,"sidebar":14},"\u002Fdocs\u002Ftransformers\u002Freplace-strings","Replace Strings",{"path":297,"title":298,"section":260,"order":52,"sidebar":14},"\u002Fdocs\u002Ftransformers\u002Fsafe-selectors","Safe Selectors",{"path":300,"title":301,"section":260,"order":128,"sidebar":14},"\u002Fdocs\u002Ftransformers\u002Fshorthand-css","Shorthand CSS",{"path":303,"title":304,"section":260,"order":124,"sidebar":14},"\u002Fdocs\u002Ftransformers\u002Fsix-hex","Six-digit HEX",{"path":306,"title":307,"section":260,"order":73,"sidebar":14},"\u002Fdocs\u002Ftransformers\u002Furl-parameters","URL Parameters",{"path":309,"title":310,"section":22,"order":52,"sidebar":14},"\u002Fdocs\u002Fupgrade-guide","Upgrade Guide",{"path":312,"title":236,"section":256,"order":13,"sidebar":14},"\u002Fdocs\u002Fvite-plugin",{"path":314,"title":315,"section":7,"order":7,"sidebar":8},"\u002Fprivacy","Privacy Policy",{"id":317,"title":47,"body":318,"description":3931,"extension":3932,"meta":3933,"navigation":14,"order":48,"path":46,"section":31,"seo":3934,"sidebar":14,"stem":3935,"toc":14,"__hash__":3936},"docs\u002Fdocs\u002Fcomponents\u002Fcolumn.md",{"type":319,"value":320,"toc":3910},"minimark",[321,325,334,339,969,979,1008,1021,1025,1028,1039,1046,1050,1063,1318,1345,1349,1352,1365,1368,1483,1487,1497,1509,1575,1579,1589,1592,1846,1854,1858,1861,1865,1868,1965,1975,1979,1982,2127,2131,2138,2280,2294,2298,2304,2460,2464,2475,2610,2618,2622,2625,2635,2804,2808,2813,2959,2973,2977,2983,3097,3106,3109,3256,3261,3272,3389,3392,3395,3399,3410,3552,3555,3698,3702,3705,3906],[322,323,47],"h1",{"id":324},"column",[326,327,328,329,333],"p",{},"An individual column within a Row. Renders a ",[330,331,332],"code",{},"\u003Cdiv>"," that auto-sizes from its parent and together with its siblings, with table-based fallback for Outlook classic.",[335,336,338],"h2",{"id":337},"usage","Usage",[340,341,342,520],"code-tabs",{},[343,344,346],"code-tab",{"label":345},"emails\u002Fexample.vue",[347,348,353],"pre",{"className":349,"code":350,"filename":345,"language":351,"meta":352,"style":352},"language-vue shiki shiki-themes laserwave","\u003Ctemplate>\n  \u003CLayout>\n    \u003CContainer class=\"max-w-xl\">\n      \u003CRow>\n        \u003CColumn>\n          \u003CText>Left column\u003C\u002FText>\n        \u003C\u002FColumn>\n        \u003CColumn>\n          \u003CText>Right column\u003C\u002FText>\n        \u003C\u002FColumn>\n      \u003C\u002FRow>\n    \u003C\u002FContainer>\n  \u003C\u002FLayout>\n\u003C\u002Ftemplate>\n","vue","",[330,354,355,370,379,404,413,422,443,452,460,477,485,494,503,512],{"__ignoreMap":352},[356,357,359,363,367],"span",{"class":358,"line":18},"line",[356,360,362],{"class":361},"sGGKt","\u003C",[356,364,366],{"class":365},"sb4Pa","template",[356,368,369],{"class":361},">\n",[356,371,372,375,377],{"class":358,"line":13},[356,373,374],{"class":361},"  \u003C",[356,376,76],{"class":365},[356,378,369],{"class":361},[356,380,381,384,386,390,393,396,400,402],{"class":358,"line":32},[356,382,383],{"class":361},"    \u003C",[356,385,51],{"class":365},[356,387,389],{"class":388},"sZNF3"," class",[356,391,392],{"class":361},"=",[356,394,395],{"class":361},"\"",[356,397,399],{"class":398},"sXiT_","max-w-xl",[356,401,395],{"class":361},[356,403,369],{"class":361},[356,405,406,409,411],{"class":358,"line":27},[356,407,408],{"class":361},"      \u003C",[356,410,123],{"class":365},[356,412,369],{"class":361},[356,414,415,418,420],{"class":358,"line":52},[356,416,417],{"class":361},"        \u003C",[356,419,47],{"class":365},[356,421,369],{"class":361},[356,423,424,427,429,432,436,439,441],{"class":358,"line":128},[356,425,426],{"class":361},"          \u003C",[356,428,139],{"class":365},[356,430,431],{"class":361},">",[356,433,435],{"class":434},"sLaUg","Left column",[356,437,438],{"class":361},"\u003C\u002F",[356,440,139],{"class":365},[356,442,369],{"class":361},[356,444,445,448,450],{"class":358,"line":124},[356,446,447],{"class":361},"        \u003C\u002F",[356,449,47],{"class":365},[356,451,369],{"class":361},[356,453,454,456,458],{"class":358,"line":48},[356,455,417],{"class":361},[356,457,47],{"class":365},[356,459,369],{"class":361},[356,461,462,464,466,468,471,473,475],{"class":358,"line":23},[356,463,426],{"class":361},[356,465,139],{"class":365},[356,467,431],{"class":361},[356,469,470],{"class":434},"Right column",[356,472,438],{"class":361},[356,474,139],{"class":365},[356,476,369],{"class":361},[356,478,479,481,483],{"class":358,"line":140},[356,480,447],{"class":361},[356,482,47],{"class":365},[356,484,369],{"class":361},[356,486,487,490,492],{"class":358,"line":56},[356,488,489],{"class":361},"      \u003C\u002F",[356,491,123],{"class":365},[356,493,369],{"class":361},[356,495,496,499,501],{"class":358,"line":80},[356,497,498],{"class":361},"    \u003C\u002F",[356,500,51],{"class":365},[356,502,369],{"class":361},[356,504,505,508,510],{"class":358,"line":36},[356,506,507],{"class":361},"  \u003C\u002F",[356,509,76],{"class":365},[356,511,369],{"class":361},[356,513,514,516,518],{"class":358,"line":73},[356,515,438],{"class":361},[356,517,366],{"class":365},[356,519,369],{"class":361},[343,521,523],{"label":522},"dist\u002Fexample.html",[347,524,530],{"className":525,"code":526,"highlights":527,"language":529,"meta":352,"style":352},"language-html shiki shiki-themes laserwave","\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\" dir=\"ltr\" xmlns:v=\"urn:schemas-microsoft-com:vml\" xmlns:o=\"urn:schemas-microsoft-com:office:office\">\n  \u003Chead>\n    \u003C!-- ... -->\n  \u003C\u002Fhead>\n  \u003Cbody xml:lang=\"en\" style=\"margin: 0; width: 100%; height: 100%; padding: 0; word-break: break-word;\">\n    \u003Cdiv role=\"article\" aria-roledescription=\"email\" lang=\"en\" dir=\"ltr\" style=\"font-size: medium; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Noto Sans', Ubuntu, Cantarell, 'Helvetica Neue', sans-serif; font-size: max(16px, 1rem);\">\n    \u003C!--[if mso]>\u003Ctable role=\"none\" cellpadding=\"0\" cellspacing=\"0\" style=\"width: 576px\" align=\"center\">\u003Ctr>\u003Ctd>\u003C![endif]-->\n    \u003Cdiv style=\"margin: 0 auto; max-width: 576px;\">\n      \u003C!--[if mso]>\u003Ctable role=\"none\" cellpadding=\"0\" cellspacing=\"0\" style=\"width: 100%\">\u003Ctr>\u003C![endif]-->\n      \u003Cdiv style=\"font-size: 0;\">\n        \u003C!--[if mso]>\u003Ctd style=\"width: 288px; vertical-align: top\">\u003C![endif]-->\n        \u003Cdiv style=\"width: 288px; max-width: 100%; display: inline-block; vertical-align: top; font-size: medium\">\n          \u003Cp style=\"margin: 16px 0; font-size: 16px; line-height: 24px;\">\n            Left column\n          \u003C\u002Fp>\n        \u003C\u002Fdiv>\n        \u003C!--[if mso]>\u003C\u002Ftd>\u003C![endif]-->\n        \u003C!--[if mso]>\u003Ctd style=\"width: 288px; vertical-align: top\">\u003C![endif]-->\n        \u003Cdiv style=\"width: 288px; max-width: 100%; display: inline-block; vertical-align: top; font-size: medium\">\n          \u003Cp style=\"margin: 16px 0; font-size: 16px; line-height: 24px;\">\n            Right column\n          \u003C\u002Fp>\n        \u003C\u002Fdiv>\n        \u003C!--[if mso]>\u003C\u002Ftd>\u003C![endif]-->\n      \u003C\u002Fdiv>\n      \u003C!--[if mso]>\u003C\u002Ftr>\u003C\u002Ftable>\u003C![endif]-->\n    \u003C\u002Fdiv>\n    \u003C!--[if mso]>\u003C\u002Ftd>\u003C\u002Ftr>\u003C\u002Ftable>\u003C![endif]-->\n  \u003C\u002Fdiv>\n  \u003C\u002Fbody>\n\u003C\u002Fhtml>\n",[80,36,73,132,66,112,40,44,84,96,88,100,144,528],25,"html",[330,531,532,545,601,610,616,624,656,720,725,744,749,768,775,795,815,821,831,840,846,851,870,889,895,904,913,918,926,931,939,944,952,960],{"__ignoreMap":352},[356,533,534,537,540,543],{"class":358,"line":18},[356,535,536],{"class":361},"\u003C!",[356,538,539],{"class":365},"DOCTYPE",[356,541,542],{"class":388}," html",[356,544,369],{"class":361},[356,546,547,549,551,554,556,558,561,563,566,568,570,573,575,578,580,582,585,587,590,592,594,597,599],{"class":358,"line":13},[356,548,362],{"class":361},[356,550,529],{"class":365},[356,552,553],{"class":388}," lang",[356,555,392],{"class":361},[356,557,395],{"class":361},[356,559,560],{"class":398},"en",[356,562,395],{"class":361},[356,564,565],{"class":388}," dir",[356,567,392],{"class":361},[356,569,395],{"class":361},[356,571,572],{"class":398},"ltr",[356,574,395],{"class":361},[356,576,577],{"class":388}," xmlns:v",[356,579,392],{"class":361},[356,581,395],{"class":361},[356,583,584],{"class":398},"urn:schemas-microsoft-com:vml",[356,586,395],{"class":361},[356,588,589],{"class":388}," xmlns:o",[356,591,392],{"class":361},[356,593,395],{"class":361},[356,595,596],{"class":398},"urn:schemas-microsoft-com:office:office",[356,598,395],{"class":361},[356,600,369],{"class":361},[356,602,603,605,608],{"class":358,"line":32},[356,604,374],{"class":361},[356,606,607],{"class":365},"head",[356,609,369],{"class":361},[356,611,612],{"class":358,"line":27},[356,613,615],{"class":614},"sVsQ9","    \u003C!-- ... -->\n",[356,617,618,620,622],{"class":358,"line":52},[356,619,507],{"class":361},[356,621,607],{"class":365},[356,623,369],{"class":361},[356,625,626,628,631,634,636,638,640,642,645,647,649,652,654],{"class":358,"line":128},[356,627,374],{"class":361},[356,629,630],{"class":365},"body",[356,632,633],{"class":388}," xml:lang",[356,635,392],{"class":361},[356,637,395],{"class":361},[356,639,560],{"class":398},[356,641,395],{"class":361},[356,643,644],{"class":388}," style",[356,646,392],{"class":361},[356,648,395],{"class":361},[356,650,651],{"class":398},"margin: 0; width: 100%; height: 100%; padding: 0; word-break: break-word;",[356,653,395],{"class":361},[356,655,369],{"class":361},[356,657,658,660,663,666,668,670,673,675,678,680,682,685,687,689,691,693,695,697,699,701,703,705,707,709,711,713,716,718],{"class":358,"line":124},[356,659,383],{"class":361},[356,661,662],{"class":365},"div",[356,664,665],{"class":388}," role",[356,667,392],{"class":361},[356,669,395],{"class":361},[356,671,672],{"class":398},"article",[356,674,395],{"class":361},[356,676,677],{"class":388}," aria-roledescription",[356,679,392],{"class":361},[356,681,395],{"class":361},[356,683,684],{"class":398},"email",[356,686,395],{"class":361},[356,688,553],{"class":388},[356,690,392],{"class":361},[356,692,395],{"class":361},[356,694,560],{"class":398},[356,696,395],{"class":361},[356,698,565],{"class":388},[356,700,392],{"class":361},[356,702,395],{"class":361},[356,704,572],{"class":398},[356,706,395],{"class":361},[356,708,644],{"class":388},[356,710,392],{"class":361},[356,712,395],{"class":361},[356,714,715],{"class":398},"font-size: medium; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Noto Sans', Ubuntu, Cantarell, 'Helvetica Neue', sans-serif; font-size: max(16px, 1rem);",[356,717,395],{"class":361},[356,719,369],{"class":361},[356,721,722],{"class":358,"line":48},[356,723,724],{"class":614},"    \u003C!--[if mso]>\u003Ctable role=\"none\" cellpadding=\"0\" cellspacing=\"0\" style=\"width: 576px\" align=\"center\">\u003Ctr>\u003Ctd>\u003C![endif]-->\n",[356,726,727,729,731,733,735,737,740,742],{"class":358,"line":23},[356,728,383],{"class":361},[356,730,662],{"class":365},[356,732,644],{"class":388},[356,734,392],{"class":361},[356,736,395],{"class":361},[356,738,739],{"class":398},"margin: 0 auto; max-width: 576px;",[356,741,395],{"class":361},[356,743,369],{"class":361},[356,745,746],{"class":358,"line":140},[356,747,748],{"class":614},"      \u003C!--[if mso]>\u003Ctable role=\"none\" cellpadding=\"0\" cellspacing=\"0\" style=\"width: 100%\">\u003Ctr>\u003C![endif]-->\n",[356,750,751,753,755,757,759,761,764,766],{"class":358,"line":56},[356,752,408],{"class":361},[356,754,662],{"class":365},[356,756,644],{"class":388},[356,758,392],{"class":361},[356,760,395],{"class":361},[356,762,763],{"class":398},"font-size: 0;",[356,765,395],{"class":361},[356,767,369],{"class":361},[356,769,772],{"class":770,"line":80},[358,771],"highlight",[356,773,774],{"class":614},"        \u003C!--[if mso]>\u003Ctd style=\"width: 288px; vertical-align: top\">\u003C![endif]-->\n",[356,776,778,780,782,784,786,788,791,793],{"class":777,"line":36},[358,771],[356,779,417],{"class":361},[356,781,662],{"class":365},[356,783,644],{"class":388},[356,785,392],{"class":361},[356,787,395],{"class":361},[356,789,790],{"class":398},"width: 288px; max-width: 100%; display: inline-block; vertical-align: top; font-size: medium",[356,792,395],{"class":361},[356,794,369],{"class":361},[356,796,798,800,802,804,806,808,811,813],{"class":797,"line":73},[358,771],[356,799,426],{"class":361},[356,801,326],{"class":365},[356,803,644],{"class":388},[356,805,392],{"class":361},[356,807,395],{"class":361},[356,809,810],{"class":398},"margin: 16px 0; font-size: 16px; line-height: 24px;",[356,812,395],{"class":361},[356,814,369],{"class":361},[356,816,818],{"class":817,"line":132},[358,771],[356,819,820],{"class":434},"            Left column\n",[356,822,824,827,829],{"class":823,"line":66},[358,771],[356,825,826],{"class":361},"          \u003C\u002F",[356,828,326],{"class":365},[356,830,369],{"class":361},[356,832,834,836,838],{"class":833,"line":112},[358,771],[356,835,447],{"class":361},[356,837,662],{"class":365},[356,839,369],{"class":361},[356,841,843],{"class":842,"line":40},[358,771],[356,844,845],{"class":614},"        \u003C!--[if mso]>\u003C\u002Ftd>\u003C![endif]-->\n",[356,847,849],{"class":848,"line":44},[358,771],[356,850,774],{"class":614},[356,852,854,856,858,860,862,864,866,868],{"class":853,"line":84},[358,771],[356,855,417],{"class":361},[356,857,662],{"class":365},[356,859,644],{"class":388},[356,861,392],{"class":361},[356,863,395],{"class":361},[356,865,790],{"class":398},[356,867,395],{"class":361},[356,869,369],{"class":361},[356,871,873,875,877,879,881,883,885,887],{"class":872,"line":96},[358,771],[356,874,426],{"class":361},[356,876,326],{"class":365},[356,878,644],{"class":388},[356,880,392],{"class":361},[356,882,395],{"class":361},[356,884,810],{"class":398},[356,886,395],{"class":361},[356,888,369],{"class":361},[356,890,892],{"class":891,"line":88},[358,771],[356,893,894],{"class":434},"            Right column\n",[356,896,898,900,902],{"class":897,"line":100},[358,771],[356,899,826],{"class":361},[356,901,326],{"class":365},[356,903,369],{"class":361},[356,905,907,909,911],{"class":906,"line":144},[358,771],[356,908,447],{"class":361},[356,910,662],{"class":365},[356,912,369],{"class":361},[356,914,916],{"class":915,"line":528},[358,771],[356,917,845],{"class":614},[356,919,920,922,924],{"class":358,"line":92},[356,921,489],{"class":361},[356,923,662],{"class":365},[356,925,369],{"class":361},[356,927,928],{"class":358,"line":148},[356,929,930],{"class":614},"      \u003C!--[if mso]>\u003C\u002Ftr>\u003C\u002Ftable>\u003C![endif]-->\n",[356,932,933,935,937],{"class":358,"line":120},[356,934,498],{"class":361},[356,936,662],{"class":365},[356,938,369],{"class":361},[356,940,941],{"class":358,"line":136},[356,942,943],{"class":614},"    \u003C!--[if mso]>\u003C\u002Ftd>\u003C\u002Ftr>\u003C\u002Ftable>\u003C![endif]-->\n",[356,945,946,948,950],{"class":358,"line":116},[356,947,507],{"class":361},[356,949,662],{"class":365},[356,951,369],{"class":361},[356,953,954,956,958],{"class":358,"line":108},[356,955,507],{"class":361},[356,957,630],{"class":365},[356,959,369],{"class":361},[356,961,963,965,967],{"class":358,"line":962},32,[356,964,438],{"class":361},[356,966,529],{"class":365},[356,968,369],{"class":361},[326,970,971,972,974,975,978],{},"Each Column renders a ",[330,973,332],{}," with auto-calculated ",[330,976,977],{},"width"," and:",[980,981,982,989,995],"ul",{},[983,984,985,988],"li",{},[330,986,987],{},"display: inline-block"," to sit side by side with siblings and stack when space runs out",[983,990,991,994],{},[330,992,993],{},"vertical-align: top"," for aligning content to the top in tall columns",[983,996,997,1000,1001,1004,1005],{},[330,998,999],{},"font-size: medium"," to reset ",[330,1002,1003],{},"font-size: 0"," inherited from its parent ",[330,1006,1007],{},"\u003CRow>",[326,1009,1010,1011,1013,1014,1017,1018,1020],{},"For Outlook (classic), the ",[330,1012,332],{}," is also wrapped in a ",[330,1015,1016],{},"\u003Ctd>"," with the same ",[330,1019,977],{},", so columns render side by side instead of stacking.",[335,1022,1024],{"id":1023},"auto-sizing","Auto-sizing",[326,1026,1027],{},"Each Column figures out its own width from the parent. Drop two Columns into a 576px Container and they're 288px each. Drop three and they're 192px each.",[326,1029,1030,1031,1034,1035,1038],{},"If one Column has a fixed width (like ",[330,1032,1033],{},"w-5"," or ",[330,1036,1037],{},"width=\"200\"","), its siblings split what's left. And of course, padding and borders on the Column are subtracted automatically so the total widths still add up correctly.",[326,1040,1041,1042,1045],{},"By default, Columns sit side by side on desktop and stack one at a time when the parent gets too narrow to fit them. No ",[330,1043,1044],{},"@media"," queries needed.",[335,1047,1049],{"id":1048},"modern-mode","Modern mode",[326,1051,1052,1053,1056,1057,1059,1060,1062],{},"Columns inside a layout component that has ",[330,1054,1055],{},":outlook-fallback=\"false\""," render as simple ",[330,1058,332],{},"s without the MSO fallback. This is ideal for modern email clients that support ",[330,1061,987],{}," and don't require the extra table structure.",[340,1064,1065,1190],{},[343,1066,1067],{"label":345},[347,1068,1070],{"className":349,"code":1069,"filename":345,"language":351,"meta":352,"style":352},"\u003Ctemplate>\n  \u003CLayout :outlook-fallback=\"false\">\n    \u003CContainer class=\"max-w-xl\">\n      \u003CRow>\n        \u003CColumn>Left column\u003C\u002FColumn>\n        \u003CColumn>Right column\u003C\u002FColumn>\n      \u003C\u002FRow>\n    \u003C\u002FContainer>\n  \u003C\u002FLayout>\n\u003C\u002Ftemplate>\n",[330,1071,1072,1080,1100,1118,1126,1142,1158,1166,1174,1182],{"__ignoreMap":352},[356,1073,1074,1076,1078],{"class":358,"line":18},[356,1075,362],{"class":361},[356,1077,366],{"class":365},[356,1079,369],{"class":361},[356,1081,1082,1084,1086,1089,1091,1093,1096,1098],{"class":358,"line":13},[356,1083,374],{"class":361},[356,1085,76],{"class":365},[356,1087,1088],{"class":388}," :outlook-fallback",[356,1090,392],{"class":361},[356,1092,395],{"class":361},[356,1094,1095],{"class":398},"false",[356,1097,395],{"class":361},[356,1099,369],{"class":361},[356,1101,1102,1104,1106,1108,1110,1112,1114,1116],{"class":358,"line":32},[356,1103,383],{"class":361},[356,1105,51],{"class":365},[356,1107,389],{"class":388},[356,1109,392],{"class":361},[356,1111,395],{"class":361},[356,1113,399],{"class":398},[356,1115,395],{"class":361},[356,1117,369],{"class":361},[356,1119,1120,1122,1124],{"class":358,"line":27},[356,1121,408],{"class":361},[356,1123,123],{"class":365},[356,1125,369],{"class":361},[356,1127,1128,1130,1132,1134,1136,1138,1140],{"class":358,"line":52},[356,1129,417],{"class":361},[356,1131,47],{"class":365},[356,1133,431],{"class":361},[356,1135,435],{"class":434},[356,1137,438],{"class":361},[356,1139,47],{"class":365},[356,1141,369],{"class":361},[356,1143,1144,1146,1148,1150,1152,1154,1156],{"class":358,"line":128},[356,1145,417],{"class":361},[356,1147,47],{"class":365},[356,1149,431],{"class":361},[356,1151,470],{"class":434},[356,1153,438],{"class":361},[356,1155,47],{"class":365},[356,1157,369],{"class":361},[356,1159,1160,1162,1164],{"class":358,"line":124},[356,1161,489],{"class":361},[356,1163,123],{"class":365},[356,1165,369],{"class":361},[356,1167,1168,1170,1172],{"class":358,"line":48},[356,1169,498],{"class":361},[356,1171,51],{"class":365},[356,1173,369],{"class":361},[356,1175,1176,1178,1180],{"class":358,"line":23},[356,1177,507],{"class":361},[356,1179,76],{"class":365},[356,1181,369],{"class":361},[356,1183,1184,1186,1188],{"class":358,"line":140},[356,1185,438],{"class":361},[356,1187,366],{"class":365},[356,1189,369],{"class":361},[343,1191,1192],{"label":522},[347,1193,1196],{"className":525,"code":1194,"highlights":1195,"language":529,"meta":352,"style":352},"\u003Cdiv style=\"margin: 0 auto; max-width: 576px;\">\n  \u003Cdiv style=\"font-size: 0;\">\n    \u003Cdiv style=\"width: 288px; max-width: 100%; display: inline-block; vertical-align: top; font-size: medium\">\n      Left column\n    \u003C\u002Fdiv>\n    \u003Cdiv style=\"width: 288px; max-width: 100%; display: inline-block; vertical-align: top; font-size: medium\">\n      Right column\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n",[32,27,52,128,124,48],[330,1197,1198,1216,1234,1253,1259,1268,1287,1293,1302,1310],{"__ignoreMap":352},[356,1199,1200,1202,1204,1206,1208,1210,1212,1214],{"class":358,"line":18},[356,1201,362],{"class":361},[356,1203,662],{"class":365},[356,1205,644],{"class":388},[356,1207,392],{"class":361},[356,1209,395],{"class":361},[356,1211,739],{"class":398},[356,1213,395],{"class":361},[356,1215,369],{"class":361},[356,1217,1218,1220,1222,1224,1226,1228,1230,1232],{"class":358,"line":13},[356,1219,374],{"class":361},[356,1221,662],{"class":365},[356,1223,644],{"class":388},[356,1225,392],{"class":361},[356,1227,395],{"class":361},[356,1229,763],{"class":398},[356,1231,395],{"class":361},[356,1233,369],{"class":361},[356,1235,1237,1239,1241,1243,1245,1247,1249,1251],{"class":1236,"line":32},[358,771],[356,1238,383],{"class":361},[356,1240,662],{"class":365},[356,1242,644],{"class":388},[356,1244,392],{"class":361},[356,1246,395],{"class":361},[356,1248,790],{"class":398},[356,1250,395],{"class":361},[356,1252,369],{"class":361},[356,1254,1256],{"class":1255,"line":27},[358,771],[356,1257,1258],{"class":434},"      Left column\n",[356,1260,1262,1264,1266],{"class":1261,"line":52},[358,771],[356,1263,498],{"class":361},[356,1265,662],{"class":365},[356,1267,369],{"class":361},[356,1269,1271,1273,1275,1277,1279,1281,1283,1285],{"class":1270,"line":128},[358,771],[356,1272,383],{"class":361},[356,1274,662],{"class":365},[356,1276,644],{"class":388},[356,1278,392],{"class":361},[356,1280,395],{"class":361},[356,1282,790],{"class":398},[356,1284,395],{"class":361},[356,1286,369],{"class":361},[356,1288,1290],{"class":1289,"line":124},[358,771],[356,1291,1292],{"class":434},"      Right column\n",[356,1294,1296,1298,1300],{"class":1295,"line":48},[358,771],[356,1297,498],{"class":361},[356,1299,662],{"class":365},[356,1301,369],{"class":361},[356,1303,1304,1306,1308],{"class":358,"line":23},[356,1305,507],{"class":361},[356,1307,662],{"class":365},[356,1309,369],{"class":361},[356,1311,1312,1314,1316],{"class":358,"line":140},[356,1313,438],{"class":361},[356,1315,662],{"class":365},[356,1317,369],{"class":361},[1319,1320,1322],"callout",{"type":1321},"info",[326,1323,1324,1325,1328,1329,1332,1333,1332,1336,1332,1339,1332,1341,1344],{},"All layout components support the ",[330,1326,1327],{},"outlook-fallback"," prop: ",[330,1330,1331],{},"\u003CLayout>",", ",[330,1334,1335],{},"\u003CContainer>",[330,1337,1338],{},"\u003CSection>",[330,1340,1007],{},[330,1342,1343],{},"\u003CColumn>",".",[335,1346,1348],{"id":1347},"props","Props",[1350,1351,977],"h3",{"id":977},[326,1353,1354,1355,1358,1361,1362],{},"Type: ",[330,1356,1357],{},"string | number",[1359,1360],"br",{},"\nDefault: ",[330,1363,1364],{},"null",[326,1366,1367],{},"Override the auto-calculated column width. Can be used instead of Tailwind width classes.",[347,1369,1371],{"className":349,"code":1370,"language":351,"meta":352,"style":352},"\u003Ctemplate>\n  \u003CRow>\n    \u003CColumn :width=\"200\">\n      \u003CText>Fixed 200px\u003C\u002FText>\n    \u003C\u002FColumn>\n    \u003CColumn>\n      \u003CText>Auto-sized — splits the remainder with siblings\u003C\u002FText>\n    \u003C\u002FColumn>\n  \u003C\u002FRow>\n\u003C\u002Ftemplate>\n",[330,1372,1373,1381,1389,1409,1426,1434,1442,1459,1467,1475],{"__ignoreMap":352},[356,1374,1375,1377,1379],{"class":358,"line":18},[356,1376,362],{"class":361},[356,1378,366],{"class":365},[356,1380,369],{"class":361},[356,1382,1383,1385,1387],{"class":358,"line":13},[356,1384,374],{"class":361},[356,1386,123],{"class":365},[356,1388,369],{"class":361},[356,1390,1391,1393,1395,1398,1400,1402,1405,1407],{"class":358,"line":32},[356,1392,383],{"class":361},[356,1394,47],{"class":365},[356,1396,1397],{"class":388}," :width",[356,1399,392],{"class":361},[356,1401,395],{"class":361},[356,1403,1404],{"class":398},"200",[356,1406,395],{"class":361},[356,1408,369],{"class":361},[356,1410,1411,1413,1415,1417,1420,1422,1424],{"class":358,"line":27},[356,1412,408],{"class":361},[356,1414,139],{"class":365},[356,1416,431],{"class":361},[356,1418,1419],{"class":434},"Fixed 200px",[356,1421,438],{"class":361},[356,1423,139],{"class":365},[356,1425,369],{"class":361},[356,1427,1428,1430,1432],{"class":358,"line":52},[356,1429,498],{"class":361},[356,1431,47],{"class":365},[356,1433,369],{"class":361},[356,1435,1436,1438,1440],{"class":358,"line":128},[356,1437,383],{"class":361},[356,1439,47],{"class":365},[356,1441,369],{"class":361},[356,1443,1444,1446,1448,1450,1453,1455,1457],{"class":358,"line":124},[356,1445,408],{"class":361},[356,1447,139],{"class":365},[356,1449,431],{"class":361},[356,1451,1452],{"class":434},"Auto-sized — splits the remainder with siblings",[356,1454,438],{"class":361},[356,1456,139],{"class":365},[356,1458,369],{"class":361},[356,1460,1461,1463,1465],{"class":358,"line":48},[356,1462,498],{"class":361},[356,1464,47],{"class":365},[356,1466,369],{"class":361},[356,1468,1469,1471,1473],{"class":358,"line":23},[356,1470,507],{"class":361},[356,1472,123],{"class":365},[356,1474,369],{"class":361},[356,1476,1477,1479,1481],{"class":358,"line":140},[356,1478,438],{"class":361},[356,1480,366],{"class":365},[356,1482,369],{"class":361},[1350,1484,1486],{"id":1485},"msostyle","msoStyle",[326,1488,1354,1489,1492,1361,1494],{},[330,1490,1491],{},"string",[1359,1493],{},[330,1495,1496],{},"undefined",[326,1498,1499,1500,1502,1503,1505,1506,1508],{},"Applies inline CSS only to the MSO ",[330,1501,1016],{}," element. Use this when you need Outlook-specific styling for the ",[330,1504,1016],{},", that shouldn't affect the main ",[330,1507,332],{}," used by other clients.",[347,1510,1512],{"className":349,"code":1511,"language":351,"meta":352,"style":352},"\u003Ctemplate>\n  \u003CColumn mso-style=\"padding: 8px\">\n    \u003CText>Extra padding in Outlook only.\u003C\u002FText>\n  \u003C\u002FColumn>\n\u003C\u002Ftemplate>\n",[330,1513,1514,1522,1542,1559,1567],{"__ignoreMap":352},[356,1515,1516,1518,1520],{"class":358,"line":18},[356,1517,362],{"class":361},[356,1519,366],{"class":365},[356,1521,369],{"class":361},[356,1523,1524,1526,1528,1531,1533,1535,1538,1540],{"class":358,"line":13},[356,1525,374],{"class":361},[356,1527,47],{"class":365},[356,1529,1530],{"class":388}," mso-style",[356,1532,392],{"class":361},[356,1534,395],{"class":361},[356,1536,1537],{"class":398},"padding: 8px",[356,1539,395],{"class":361},[356,1541,369],{"class":361},[356,1543,1544,1546,1548,1550,1553,1555,1557],{"class":358,"line":32},[356,1545,383],{"class":361},[356,1547,139],{"class":365},[356,1549,431],{"class":361},[356,1551,1552],{"class":434},"Extra padding in Outlook only.",[356,1554,438],{"class":361},[356,1556,139],{"class":365},[356,1558,369],{"class":361},[356,1560,1561,1563,1565],{"class":358,"line":27},[356,1562,507],{"class":361},[356,1564,47],{"class":365},[356,1566,369],{"class":361},[356,1568,1569,1571,1573],{"class":358,"line":52},[356,1570,438],{"class":361},[356,1572,366],{"class":365},[356,1574,369],{"class":361},[1350,1576,1578],{"id":1577},"outlookfallback","outlookFallback",[326,1580,1354,1581,1584,1361,1586],{},[330,1582,1583],{},"boolean",[1359,1585],{},[330,1587,1588],{},"true",[326,1590,1591],{},"Toggle Outlook (classic) fallback markup for this Column and its descendants.",[340,1593,1594,1703],{},[343,1595,1596],{"label":345},[347,1597,1599],{"className":349,"code":1598,"filename":345,"language":351,"meta":352,"style":352},"\u003Ctemplate>\n  \u003CContainer class=\"max-w-xl\">\n    \u003CRow>\n      \u003CColumn :outlook-fallback=\"false\">First\u003C\u002FColumn>\n      \u003CColumn>Second\u003C\u002FColumn>\n    \u003C\u002FRow>\n  \u003C\u002FContainer>\n\u003C\u002Ftemplate>\n",[330,1600,1601,1609,1627,1635,1662,1679,1687,1695],{"__ignoreMap":352},[356,1602,1603,1605,1607],{"class":358,"line":18},[356,1604,362],{"class":361},[356,1606,366],{"class":365},[356,1608,369],{"class":361},[356,1610,1611,1613,1615,1617,1619,1621,1623,1625],{"class":358,"line":13},[356,1612,374],{"class":361},[356,1614,51],{"class":365},[356,1616,389],{"class":388},[356,1618,392],{"class":361},[356,1620,395],{"class":361},[356,1622,399],{"class":398},[356,1624,395],{"class":361},[356,1626,369],{"class":361},[356,1628,1629,1631,1633],{"class":358,"line":32},[356,1630,383],{"class":361},[356,1632,123],{"class":365},[356,1634,369],{"class":361},[356,1636,1637,1639,1641,1643,1645,1647,1649,1651,1653,1656,1658,1660],{"class":358,"line":27},[356,1638,408],{"class":361},[356,1640,47],{"class":365},[356,1642,1088],{"class":388},[356,1644,392],{"class":361},[356,1646,395],{"class":361},[356,1648,1095],{"class":398},[356,1650,395],{"class":361},[356,1652,431],{"class":361},[356,1654,1655],{"class":434},"First",[356,1657,438],{"class":361},[356,1659,47],{"class":365},[356,1661,369],{"class":361},[356,1663,1664,1666,1668,1670,1673,1675,1677],{"class":358,"line":52},[356,1665,408],{"class":361},[356,1667,47],{"class":365},[356,1669,431],{"class":361},[356,1671,1672],{"class":434},"Second",[356,1674,438],{"class":361},[356,1676,47],{"class":365},[356,1678,369],{"class":361},[356,1680,1681,1683,1685],{"class":358,"line":128},[356,1682,498],{"class":361},[356,1684,123],{"class":365},[356,1686,369],{"class":361},[356,1688,1689,1691,1693],{"class":358,"line":124},[356,1690,507],{"class":361},[356,1692,51],{"class":365},[356,1694,369],{"class":361},[356,1696,1697,1699,1701],{"class":358,"line":48},[356,1698,438],{"class":361},[356,1700,366],{"class":365},[356,1702,369],{"class":361},[343,1704,1705],{"label":522},[347,1706,1709],{"className":525,"code":1707,"highlights":1708,"language":529,"meta":352,"style":352},"\u003C!--[if mso]>\u003Ctable role=\"none\" cellpadding=\"0\" cellspacing=\"0\" style=\"width: 576px\" align=\"center\">\u003Ctr>\u003Ctd>\u003C![endif]-->\n\u003Cdiv style=\"margin: 0 auto; max-width: 576px;\">\n  \u003C!--[if mso]>\u003Ctable role=\"none\" cellpadding=\"0\" cellspacing=\"0\" style=\"width: 100%\">\u003Ctr>\u003C![endif]-->\n  \u003Cdiv style=\"font-size: 0;\">\n    \u003Cdiv style=\"width: 288px; max-width: 100%; display: inline-block; vertical-align: top; font-size: medium\">First\u003C\u002Fdiv>\n    \u003C!--[if mso]>\u003Ctd style=\"width: 288px; vertical-align: top\">\u003C![endif]-->\n    \u003Cdiv style=\"width: 288px; max-width: 100%; display: inline-block; vertical-align: top; font-size: medium\">Second\u003C\u002Fdiv>\n    \u003C!--[if mso]>\u003C\u002Ftd>\u003C![endif]-->\n  \u003C\u002Fdiv>\n  \u003C!--[if mso]>\u003C\u002Ftr>\u003C\u002Ftable>\u003C![endif]-->\n\u003C\u002Fdiv>\n\u003C!--[if mso]>\u003C\u002Ftd>\u003C\u002Ftr>\u003C\u002Ftable>\u003C![endif]-->\n",[52],[330,1710,1711,1716,1734,1739,1757,1784,1789,1815,1820,1828,1833,1841],{"__ignoreMap":352},[356,1712,1713],{"class":358,"line":18},[356,1714,1715],{"class":614},"\u003C!--[if mso]>\u003Ctable role=\"none\" cellpadding=\"0\" cellspacing=\"0\" style=\"width: 576px\" align=\"center\">\u003Ctr>\u003Ctd>\u003C![endif]-->\n",[356,1717,1718,1720,1722,1724,1726,1728,1730,1732],{"class":358,"line":13},[356,1719,362],{"class":361},[356,1721,662],{"class":365},[356,1723,644],{"class":388},[356,1725,392],{"class":361},[356,1727,395],{"class":361},[356,1729,739],{"class":398},[356,1731,395],{"class":361},[356,1733,369],{"class":361},[356,1735,1736],{"class":358,"line":32},[356,1737,1738],{"class":614},"  \u003C!--[if mso]>\u003Ctable role=\"none\" cellpadding=\"0\" cellspacing=\"0\" style=\"width: 100%\">\u003Ctr>\u003C![endif]-->\n",[356,1740,1741,1743,1745,1747,1749,1751,1753,1755],{"class":358,"line":27},[356,1742,374],{"class":361},[356,1744,662],{"class":365},[356,1746,644],{"class":388},[356,1748,392],{"class":361},[356,1750,395],{"class":361},[356,1752,763],{"class":398},[356,1754,395],{"class":361},[356,1756,369],{"class":361},[356,1758,1760,1762,1764,1766,1768,1770,1772,1774,1776,1778,1780,1782],{"class":1759,"line":52},[358,771],[356,1761,383],{"class":361},[356,1763,662],{"class":365},[356,1765,644],{"class":388},[356,1767,392],{"class":361},[356,1769,395],{"class":361},[356,1771,790],{"class":398},[356,1773,395],{"class":361},[356,1775,431],{"class":361},[356,1777,1655],{"class":434},[356,1779,438],{"class":361},[356,1781,662],{"class":365},[356,1783,369],{"class":361},[356,1785,1786],{"class":358,"line":128},[356,1787,1788],{"class":614},"    \u003C!--[if mso]>\u003Ctd style=\"width: 288px; vertical-align: top\">\u003C![endif]-->\n",[356,1790,1791,1793,1795,1797,1799,1801,1803,1805,1807,1809,1811,1813],{"class":358,"line":124},[356,1792,383],{"class":361},[356,1794,662],{"class":365},[356,1796,644],{"class":388},[356,1798,392],{"class":361},[356,1800,395],{"class":361},[356,1802,790],{"class":398},[356,1804,395],{"class":361},[356,1806,431],{"class":361},[356,1808,1672],{"class":434},[356,1810,438],{"class":361},[356,1812,662],{"class":365},[356,1814,369],{"class":361},[356,1816,1817],{"class":358,"line":48},[356,1818,1819],{"class":614},"    \u003C!--[if mso]>\u003C\u002Ftd>\u003C![endif]-->\n",[356,1821,1822,1824,1826],{"class":358,"line":23},[356,1823,507],{"class":361},[356,1825,662],{"class":365},[356,1827,369],{"class":361},[356,1829,1830],{"class":358,"line":140},[356,1831,1832],{"class":614},"  \u003C!--[if mso]>\u003C\u002Ftr>\u003C\u002Ftable>\u003C![endif]-->\n",[356,1834,1835,1837,1839],{"class":358,"line":56},[356,1836,438],{"class":361},[356,1838,662],{"class":365},[356,1840,369],{"class":361},[356,1842,1843],{"class":358,"line":80},[356,1844,1845],{"class":614},"\u003C!--[if mso]>\u003C\u002Ftd>\u003C\u002Ftr>\u003C\u002Ftable>\u003C![endif]-->\n",[1319,1847,1849],{"type":1848},"warning",[326,1850,1851,1852,1344],{},"This can break Outlook (classic) if used on just one out of multiple Columns within a Row (as seen above). The fallback markup relies on all sibling Columns being wrapped in ",[330,1853,1016],{},[335,1855,1857],{"id":1856},"patterns","Patterns",[326,1859,1860],{},"Common email design patterns with rows and columns.",[1350,1862,1864],{"id":1863},"equal-columns-stack-naturally-on-mobile","Equal columns, stack naturally on mobile",[326,1866,1867],{},"Default behavior, no width classes needed.",[347,1869,1871],{"className":349,"code":1870,"filename":345,"language":351,"meta":352,"style":352},"\u003Ctemplate>\n  \u003CContainer class=\"max-w-xl\">\n    \u003CRow>\n      \u003CColumn>Left\u003C\u002FColumn>\n      \u003CColumn>Right\u003C\u002FColumn>\n    \u003C\u002FRow>\n  \u003C\u002FContainer>\n\u003C\u002Ftemplate>\n",[330,1872,1873,1881,1899,1907,1924,1941,1949,1957],{"__ignoreMap":352},[356,1874,1875,1877,1879],{"class":358,"line":18},[356,1876,362],{"class":361},[356,1878,366],{"class":365},[356,1880,369],{"class":361},[356,1882,1883,1885,1887,1889,1891,1893,1895,1897],{"class":358,"line":13},[356,1884,374],{"class":361},[356,1886,51],{"class":365},[356,1888,389],{"class":388},[356,1890,392],{"class":361},[356,1892,395],{"class":361},[356,1894,399],{"class":398},[356,1896,395],{"class":361},[356,1898,369],{"class":361},[356,1900,1901,1903,1905],{"class":358,"line":32},[356,1902,383],{"class":361},[356,1904,123],{"class":365},[356,1906,369],{"class":361},[356,1908,1909,1911,1913,1915,1918,1920,1922],{"class":358,"line":27},[356,1910,408],{"class":361},[356,1912,47],{"class":365},[356,1914,431],{"class":361},[356,1916,1917],{"class":434},"Left",[356,1919,438],{"class":361},[356,1921,47],{"class":365},[356,1923,369],{"class":361},[356,1925,1926,1928,1930,1932,1935,1937,1939],{"class":358,"line":52},[356,1927,408],{"class":361},[356,1929,47],{"class":365},[356,1931,431],{"class":361},[356,1933,1934],{"class":434},"Right",[356,1936,438],{"class":361},[356,1938,47],{"class":365},[356,1940,369],{"class":361},[356,1942,1943,1945,1947],{"class":358,"line":128},[356,1944,498],{"class":361},[356,1946,123],{"class":365},[356,1948,369],{"class":361},[356,1950,1951,1953,1955],{"class":358,"line":124},[356,1952,507],{"class":361},[356,1954,51],{"class":365},[356,1956,369],{"class":361},[356,1958,1959,1961,1963],{"class":358,"line":48},[356,1960,438],{"class":361},[356,1962,366],{"class":365},[356,1964,369],{"class":361},[326,1966,1967,1968,1971,1972,1344],{},"Each column gets ",[330,1969,1970],{},"min-width: 288px",". Side-by-side on desktop, stacks below ",[330,1973,1974],{},"~576px",[1350,1976,1978],{"id":1977},"percentage-widths-never-stack","Percentage widths never stack",[326,1980,1981],{},"Use Tailwind fractional width utilities if you don't want columns stacking automatically.",[347,1983,1985],{"className":349,"code":1984,"filename":345,"language":351,"meta":352,"style":352},"\u003Ctemplate>\n  \u003CContainer class=\"max-w-xl\">\n    \u003CRow>\n      \u003CColumn class=\"w-1\u002F3\">1\u003C\u002FColumn>\n      \u003CColumn class=\"w-1\u002F3\">2\u003C\u002FColumn>\n      \u003CColumn class=\"w-1\u002F3\">3\u003C\u002FColumn>\n    \u003C\u002FRow>\n  \u003C\u002FContainer>\n\u003C\u002Ftemplate>\n",[330,1986,1987,1995,2013,2021,2049,2076,2103,2111,2119],{"__ignoreMap":352},[356,1988,1989,1991,1993],{"class":358,"line":18},[356,1990,362],{"class":361},[356,1992,366],{"class":365},[356,1994,369],{"class":361},[356,1996,1997,1999,2001,2003,2005,2007,2009,2011],{"class":358,"line":13},[356,1998,374],{"class":361},[356,2000,51],{"class":365},[356,2002,389],{"class":388},[356,2004,392],{"class":361},[356,2006,395],{"class":361},[356,2008,399],{"class":398},[356,2010,395],{"class":361},[356,2012,369],{"class":361},[356,2014,2015,2017,2019],{"class":358,"line":32},[356,2016,383],{"class":361},[356,2018,123],{"class":365},[356,2020,369],{"class":361},[356,2022,2023,2025,2027,2029,2031,2033,2036,2038,2040,2043,2045,2047],{"class":358,"line":27},[356,2024,408],{"class":361},[356,2026,47],{"class":365},[356,2028,389],{"class":388},[356,2030,392],{"class":361},[356,2032,395],{"class":361},[356,2034,2035],{"class":398},"w-1\u002F3",[356,2037,395],{"class":361},[356,2039,431],{"class":361},[356,2041,2042],{"class":434},"1",[356,2044,438],{"class":361},[356,2046,47],{"class":365},[356,2048,369],{"class":361},[356,2050,2051,2053,2055,2057,2059,2061,2063,2065,2067,2070,2072,2074],{"class":358,"line":52},[356,2052,408],{"class":361},[356,2054,47],{"class":365},[356,2056,389],{"class":388},[356,2058,392],{"class":361},[356,2060,395],{"class":361},[356,2062,2035],{"class":398},[356,2064,395],{"class":361},[356,2066,431],{"class":361},[356,2068,2069],{"class":434},"2",[356,2071,438],{"class":361},[356,2073,47],{"class":365},[356,2075,369],{"class":361},[356,2077,2078,2080,2082,2084,2086,2088,2090,2092,2094,2097,2099,2101],{"class":358,"line":128},[356,2079,408],{"class":361},[356,2081,47],{"class":365},[356,2083,389],{"class":388},[356,2085,392],{"class":361},[356,2087,395],{"class":361},[356,2089,2035],{"class":398},[356,2091,395],{"class":361},[356,2093,431],{"class":361},[356,2095,2096],{"class":434},"3",[356,2098,438],{"class":361},[356,2100,47],{"class":365},[356,2102,369],{"class":361},[356,2104,2105,2107,2109],{"class":358,"line":124},[356,2106,498],{"class":361},[356,2108,123],{"class":365},[356,2110,369],{"class":361},[356,2112,2113,2115,2117],{"class":358,"line":48},[356,2114,507],{"class":361},[356,2116,51],{"class":365},[356,2118,369],{"class":361},[356,2120,2121,2123,2125],{"class":358,"line":23},[356,2122,438],{"class":361},[356,2124,366],{"class":365},[356,2126,369],{"class":361},[1350,2128,2130],{"id":2129},"percentage-widths-mobile-full-width","Percentage widths, mobile full width",[326,2132,2133,2134,2137],{},"Reset the column to full width below the ",[330,2135,2136],{},"sm"," breakpoint.",[347,2139,2141],{"className":349,"code":2140,"filename":345,"language":351,"meta":352,"style":352},"\u003Ctemplate>\n  \u003CContainer class=\"max-w-xl\">\n    \u003CRow>\n      \u003CColumn class=\"w-1\u002F3 max-sm:min-w-full\">1\u003C\u002FColumn>\n      \u003CColumn class=\"w-1\u002F3 max-sm:min-w-full\">2\u003C\u002FColumn>\n      \u003CColumn class=\"w-1\u002F3 max-sm:min-w-full\">3\u003C\u002FColumn>\n    \u003C\u002FRow>\n  \u003C\u002FContainer>\n\u003C\u002Ftemplate>\n",[330,2142,2143,2151,2169,2177,2204,2230,2256,2264,2272],{"__ignoreMap":352},[356,2144,2145,2147,2149],{"class":358,"line":18},[356,2146,362],{"class":361},[356,2148,366],{"class":365},[356,2150,369],{"class":361},[356,2152,2153,2155,2157,2159,2161,2163,2165,2167],{"class":358,"line":13},[356,2154,374],{"class":361},[356,2156,51],{"class":365},[356,2158,389],{"class":388},[356,2160,392],{"class":361},[356,2162,395],{"class":361},[356,2164,399],{"class":398},[356,2166,395],{"class":361},[356,2168,369],{"class":361},[356,2170,2171,2173,2175],{"class":358,"line":32},[356,2172,383],{"class":361},[356,2174,123],{"class":365},[356,2176,369],{"class":361},[356,2178,2179,2181,2183,2185,2187,2189,2192,2194,2196,2198,2200,2202],{"class":358,"line":27},[356,2180,408],{"class":361},[356,2182,47],{"class":365},[356,2184,389],{"class":388},[356,2186,392],{"class":361},[356,2188,395],{"class":361},[356,2190,2191],{"class":398},"w-1\u002F3 max-sm:min-w-full",[356,2193,395],{"class":361},[356,2195,431],{"class":361},[356,2197,2042],{"class":434},[356,2199,438],{"class":361},[356,2201,47],{"class":365},[356,2203,369],{"class":361},[356,2205,2206,2208,2210,2212,2214,2216,2218,2220,2222,2224,2226,2228],{"class":358,"line":52},[356,2207,408],{"class":361},[356,2209,47],{"class":365},[356,2211,389],{"class":388},[356,2213,392],{"class":361},[356,2215,395],{"class":361},[356,2217,2191],{"class":398},[356,2219,395],{"class":361},[356,2221,431],{"class":361},[356,2223,2069],{"class":434},[356,2225,438],{"class":361},[356,2227,47],{"class":365},[356,2229,369],{"class":361},[356,2231,2232,2234,2236,2238,2240,2242,2244,2246,2248,2250,2252,2254],{"class":358,"line":128},[356,2233,408],{"class":361},[356,2235,47],{"class":365},[356,2237,389],{"class":388},[356,2239,392],{"class":361},[356,2241,395],{"class":361},[356,2243,2191],{"class":398},[356,2245,395],{"class":361},[356,2247,431],{"class":361},[356,2249,2096],{"class":434},[356,2251,438],{"class":361},[356,2253,47],{"class":365},[356,2255,369],{"class":361},[356,2257,2258,2260,2262],{"class":358,"line":124},[356,2259,498],{"class":361},[356,2261,123],{"class":365},[356,2263,369],{"class":361},[356,2265,2266,2268,2270],{"class":358,"line":48},[356,2267,507],{"class":361},[356,2269,51],{"class":365},[356,2271,369],{"class":361},[356,2273,2274,2276,2278],{"class":358,"line":23},[356,2275,438],{"class":361},[356,2277,366],{"class":365},[356,2279,369],{"class":361},[1319,2281,2282],{"type":1321},[326,2283,2284,2285,2287,2288,2293],{},"This pattern uses ",[330,2286,1044],{}," queries, so treat it as a progressive enhancement for clients like ",[2289,2290,2292],"a",{"href":2291},"\u002Fdocs\u002Fglossary#ganga","GANGA",", where support is lacking.",[1350,2295,2297],{"id":2296},"custom-mobile-widths","Custom mobile widths",[326,2299,2300,2301,2303],{},"Mix widths per breakpoint, using ",[330,2302,1044],{}," queries.",[347,2305,2307],{"className":349,"code":2306,"filename":345,"language":351,"meta":352,"style":352},"\u003Ctemplate>\n  \u003CContainer class=\"max-w-xl\">\n    \u003CRow>\n      \u003CColumn class=\"w-1\u002F3 max-sm:w-1\u002F2\">\n        1\u002F3 desktop, 1\u002F2 mobile\n      \u003C\u002FColumn>\n      \u003CColumn class=\"w-1\u002F3 max-sm:w-1\u002F2\">\n        1\u002F3 desktop, 1\u002F2 mobile\n      \u003C\u002FColumn>\n      \u003CColumn class=\"w-1\u002F3 max-sm:min-w-full\">\n        1\u002F3 desktop, full mobile\n      \u003C\u002FColumn>\n    \u003C\u002FRow>\n  \u003C\u002FContainer>\n\u003C\u002Ftemplate>\n",[330,2308,2309,2317,2335,2343,2362,2367,2375,2393,2397,2405,2423,2428,2436,2444,2452],{"__ignoreMap":352},[356,2310,2311,2313,2315],{"class":358,"line":18},[356,2312,362],{"class":361},[356,2314,366],{"class":365},[356,2316,369],{"class":361},[356,2318,2319,2321,2323,2325,2327,2329,2331,2333],{"class":358,"line":13},[356,2320,374],{"class":361},[356,2322,51],{"class":365},[356,2324,389],{"class":388},[356,2326,392],{"class":361},[356,2328,395],{"class":361},[356,2330,399],{"class":398},[356,2332,395],{"class":361},[356,2334,369],{"class":361},[356,2336,2337,2339,2341],{"class":358,"line":32},[356,2338,383],{"class":361},[356,2340,123],{"class":365},[356,2342,369],{"class":361},[356,2344,2345,2347,2349,2351,2353,2355,2358,2360],{"class":358,"line":27},[356,2346,408],{"class":361},[356,2348,47],{"class":365},[356,2350,389],{"class":388},[356,2352,392],{"class":361},[356,2354,395],{"class":361},[356,2356,2357],{"class":398},"w-1\u002F3 max-sm:w-1\u002F2",[356,2359,395],{"class":361},[356,2361,369],{"class":361},[356,2363,2364],{"class":358,"line":52},[356,2365,2366],{"class":434},"        1\u002F3 desktop, 1\u002F2 mobile\n",[356,2368,2369,2371,2373],{"class":358,"line":128},[356,2370,489],{"class":361},[356,2372,47],{"class":365},[356,2374,369],{"class":361},[356,2376,2377,2379,2381,2383,2385,2387,2389,2391],{"class":358,"line":124},[356,2378,408],{"class":361},[356,2380,47],{"class":365},[356,2382,389],{"class":388},[356,2384,392],{"class":361},[356,2386,395],{"class":361},[356,2388,2357],{"class":398},[356,2390,395],{"class":361},[356,2392,369],{"class":361},[356,2394,2395],{"class":358,"line":48},[356,2396,2366],{"class":434},[356,2398,2399,2401,2403],{"class":358,"line":23},[356,2400,489],{"class":361},[356,2402,47],{"class":365},[356,2404,369],{"class":361},[356,2406,2407,2409,2411,2413,2415,2417,2419,2421],{"class":358,"line":140},[356,2408,408],{"class":361},[356,2410,47],{"class":365},[356,2412,389],{"class":388},[356,2414,392],{"class":361},[356,2416,395],{"class":361},[356,2418,2191],{"class":398},[356,2420,395],{"class":361},[356,2422,369],{"class":361},[356,2424,2425],{"class":358,"line":56},[356,2426,2427],{"class":434},"        1\u002F3 desktop, full mobile\n",[356,2429,2430,2432,2434],{"class":358,"line":80},[356,2431,489],{"class":361},[356,2433,47],{"class":365},[356,2435,369],{"class":361},[356,2437,2438,2440,2442],{"class":358,"line":36},[356,2439,498],{"class":361},[356,2441,123],{"class":365},[356,2443,369],{"class":361},[356,2445,2446,2448,2450],{"class":358,"line":73},[356,2447,507],{"class":361},[356,2449,51],{"class":365},[356,2451,369],{"class":361},[356,2453,2454,2456,2458],{"class":358,"line":132},[356,2455,438],{"class":361},[356,2457,366],{"class":365},[356,2459,369],{"class":361},[1350,2461,2463],{"id":2462},"force-equal-heights","Force equal heights",[326,2465,2466,2467,2470,2471,2474],{},"Use ",[330,2468,2469],{},"display: table-cell"," so columns physically match heights, while ",[330,2472,2473],{},"inline-block"," remains the default for stacking.",[347,2476,2478],{"className":349,"code":2477,"filename":345,"language":351,"meta":352,"style":352},"\u003Ctemplate>\n  \u003CContainer class=\"max-w-xl\">\n    \u003CRow>\n      \u002F\u002F [!code word:table-cell]\n      \u003CColumn class=\"table-cell sm:block sm:w-full\"> \n        Short\n      \u003C\u002FColumn>\n      \u003CColumn class=\"table-cell sm:block sm:w-full\">\n        This column is much taller. The shorter sibling fills its full height too.\n      \u003C\u002FColumn>\n    \u003C\u002FRow>\n  \u003C\u002FContainer>\n\u003C\u002Ftemplate>\n",[330,2479,2480,2488,2506,2514,2540,2545,2553,2573,2578,2586,2594,2602],{"__ignoreMap":352},[356,2481,2482,2484,2486],{"class":358,"line":18},[356,2483,362],{"class":361},[356,2485,366],{"class":365},[356,2487,369],{"class":361},[356,2489,2490,2492,2494,2496,2498,2500,2502,2504],{"class":358,"line":13},[356,2491,374],{"class":361},[356,2493,51],{"class":365},[356,2495,389],{"class":388},[356,2497,392],{"class":361},[356,2499,395],{"class":361},[356,2501,399],{"class":398},[356,2503,395],{"class":361},[356,2505,369],{"class":361},[356,2507,2508,2510,2512],{"class":358,"line":32},[356,2509,383],{"class":361},[356,2511,123],{"class":365},[356,2513,369],{"class":361},[356,2515,2516,2518,2520,2522,2524,2526,2530,2533,2535,2537],{"class":358,"line":52},[356,2517,408],{"class":361},[356,2519,47],{"class":365},[356,2521,389],{"class":388},[356,2523,392],{"class":361},[356,2525,395],{"class":361},[356,2527,2529],{"class":2528},"highlighted-word sXiT_","table-cell",[356,2531,2532],{"class":398}," sm:block sm:w-full",[356,2534,395],{"class":361},[356,2536,431],{"class":361},[356,2538,2539],{"class":434}," \n",[356,2541,2542],{"class":358,"line":128},[356,2543,2544],{"class":434},"        Short\n",[356,2546,2547,2549,2551],{"class":358,"line":124},[356,2548,489],{"class":361},[356,2550,47],{"class":365},[356,2552,369],{"class":361},[356,2554,2555,2557,2559,2561,2563,2565,2567,2569,2571],{"class":358,"line":48},[356,2556,408],{"class":361},[356,2558,47],{"class":365},[356,2560,389],{"class":388},[356,2562,392],{"class":361},[356,2564,395],{"class":361},[356,2566,2529],{"class":2528},[356,2568,2532],{"class":398},[356,2570,395],{"class":361},[356,2572,369],{"class":361},[356,2574,2575],{"class":358,"line":23},[356,2576,2577],{"class":434},"        This column is much taller. The shorter sibling fills its full height too.\n",[356,2579,2580,2582,2584],{"class":358,"line":140},[356,2581,489],{"class":361},[356,2583,47],{"class":365},[356,2585,369],{"class":361},[356,2587,2588,2590,2592],{"class":358,"line":56},[356,2589,498],{"class":361},[356,2591,123],{"class":365},[356,2593,369],{"class":361},[356,2595,2596,2598,2600],{"class":358,"line":80},[356,2597,507],{"class":361},[356,2599,51],{"class":365},[356,2601,369],{"class":361},[356,2603,2604,2606,2608],{"class":358,"line":36},[356,2605,438],{"class":361},[356,2607,366],{"class":365},[356,2609,369],{"class":361},[1319,2611,2612],{"type":1321},[326,2613,2614,2615,2617],{},"This requires using ",[330,2616,1044],{}," queries for stacking columns on mobile, as shown above.",[1350,2619,2621],{"id":2620},"reverse-stack-on-mobile","Reverse stack on mobile",[326,2623,2624],{},"Use CSS table display modes to reorder rows on mobile without rewriting markup.",[326,2626,2627,2630,2631,2634],{},[330,2628,2629],{},"table-header-group"," floats to the top, ",[330,2632,2633],{},"table-footer-group"," to the bottom.",[347,2636,2638],{"className":349,"code":2637,"filename":345,"language":351,"meta":352,"style":352},"\u003Ctemplate>\n  \u003CContainer class=\"max-w-xl\">\n    \u003CRow class=\"max-sm:table max-sm:w-full\">\n      \u003CColumn class=\"max-w-1\u002F3 max-sm:table-footer-group\">\n        Renders 3rd on mobile\n      \u003C\u002FColumn>\n      \u003CColumn class=\"max-w-1\u002F3 max-sm:table-footer-group\">\n        Renders 2nd on mobile\n      \u003C\u002FColumn>\n      \u003CColumn class=\"max-w-1\u002F3 max-sm:table-header-group\">\n        Renders 1st on mobile\n      \u003C\u002FColumn>\n    \u003C\u002FRow>\n  \u003C\u002FContainer>\n\u003C\u002Ftemplate>\n",[330,2639,2640,2648,2666,2685,2704,2709,2717,2735,2740,2748,2767,2772,2780,2788,2796],{"__ignoreMap":352},[356,2641,2642,2644,2646],{"class":358,"line":18},[356,2643,362],{"class":361},[356,2645,366],{"class":365},[356,2647,369],{"class":361},[356,2649,2650,2652,2654,2656,2658,2660,2662,2664],{"class":358,"line":13},[356,2651,374],{"class":361},[356,2653,51],{"class":365},[356,2655,389],{"class":388},[356,2657,392],{"class":361},[356,2659,395],{"class":361},[356,2661,399],{"class":398},[356,2663,395],{"class":361},[356,2665,369],{"class":361},[356,2667,2668,2670,2672,2674,2676,2678,2681,2683],{"class":358,"line":32},[356,2669,383],{"class":361},[356,2671,123],{"class":365},[356,2673,389],{"class":388},[356,2675,392],{"class":361},[356,2677,395],{"class":361},[356,2679,2680],{"class":398},"max-sm:table max-sm:w-full",[356,2682,395],{"class":361},[356,2684,369],{"class":361},[356,2686,2687,2689,2691,2693,2695,2697,2700,2702],{"class":358,"line":27},[356,2688,408],{"class":361},[356,2690,47],{"class":365},[356,2692,389],{"class":388},[356,2694,392],{"class":361},[356,2696,395],{"class":361},[356,2698,2699],{"class":398},"max-w-1\u002F3 max-sm:table-footer-group",[356,2701,395],{"class":361},[356,2703,369],{"class":361},[356,2705,2706],{"class":358,"line":52},[356,2707,2708],{"class":434},"        Renders 3rd on mobile\n",[356,2710,2711,2713,2715],{"class":358,"line":128},[356,2712,489],{"class":361},[356,2714,47],{"class":365},[356,2716,369],{"class":361},[356,2718,2719,2721,2723,2725,2727,2729,2731,2733],{"class":358,"line":124},[356,2720,408],{"class":361},[356,2722,47],{"class":365},[356,2724,389],{"class":388},[356,2726,392],{"class":361},[356,2728,395],{"class":361},[356,2730,2699],{"class":398},[356,2732,395],{"class":361},[356,2734,369],{"class":361},[356,2736,2737],{"class":358,"line":48},[356,2738,2739],{"class":434},"        Renders 2nd on mobile\n",[356,2741,2742,2744,2746],{"class":358,"line":23},[356,2743,489],{"class":361},[356,2745,47],{"class":365},[356,2747,369],{"class":361},[356,2749,2750,2752,2754,2756,2758,2760,2763,2765],{"class":358,"line":140},[356,2751,408],{"class":361},[356,2753,47],{"class":365},[356,2755,389],{"class":388},[356,2757,392],{"class":361},[356,2759,395],{"class":361},[356,2761,2762],{"class":398},"max-w-1\u002F3 max-sm:table-header-group",[356,2764,395],{"class":361},[356,2766,369],{"class":361},[356,2768,2769],{"class":358,"line":56},[356,2770,2771],{"class":434},"        Renders 1st on mobile\n",[356,2773,2774,2776,2778],{"class":358,"line":80},[356,2775,489],{"class":361},[356,2777,47],{"class":365},[356,2779,369],{"class":361},[356,2781,2782,2784,2786],{"class":358,"line":36},[356,2783,498],{"class":361},[356,2785,123],{"class":365},[356,2787,369],{"class":361},[356,2789,2790,2792,2794],{"class":358,"line":73},[356,2791,507],{"class":361},[356,2793,51],{"class":365},[356,2795,369],{"class":361},[356,2797,2798,2800,2802],{"class":358,"line":132},[356,2799,438],{"class":361},[356,2801,366],{"class":365},[356,2803,369],{"class":361},[1350,2805,2807],{"id":2806},"stack-by-default-columns-on-desktop-mobile-first","Stack by default, columns on desktop (mobile-first)",[326,2809,2810,2811,2137],{},"Switch from stacked to horizontal at the ",[330,2812,2136],{},[347,2814,2816],{"className":349,"code":2815,"language":351,"meta":352,"style":352},"\u003Ctemplate>\n  \u003CContainer class=\"max-w-xl\">\n    \u003CRow >\n      \u003CColumn class=\"w-full min-sm:w-1\u002F3\">Column 1\u003C\u002FColumn>\n      \u003CColumn class=\"w-full min-sm:w-1\u002F3\">Column 2\u003C\u002FColumn>\n      \u003CColumn class=\"w-full min-sm:w-1\u002F3\">Column 3\u003C\u002FColumn>\n    \u003C\u002FRow>\n  \u003C\u002FContainer>\n\u003C\u002Ftemplate>\n",[330,2817,2818,2826,2844,2853,2881,2908,2935,2943,2951],{"__ignoreMap":352},[356,2819,2820,2822,2824],{"class":358,"line":18},[356,2821,362],{"class":361},[356,2823,366],{"class":365},[356,2825,369],{"class":361},[356,2827,2828,2830,2832,2834,2836,2838,2840,2842],{"class":358,"line":13},[356,2829,374],{"class":361},[356,2831,51],{"class":365},[356,2833,389],{"class":388},[356,2835,392],{"class":361},[356,2837,395],{"class":361},[356,2839,399],{"class":398},[356,2841,395],{"class":361},[356,2843,369],{"class":361},[356,2845,2846,2848,2850],{"class":358,"line":32},[356,2847,383],{"class":361},[356,2849,123],{"class":365},[356,2851,2852],{"class":361}," >\n",[356,2854,2855,2857,2859,2861,2863,2865,2868,2870,2872,2875,2877,2879],{"class":358,"line":27},[356,2856,408],{"class":361},[356,2858,47],{"class":365},[356,2860,389],{"class":388},[356,2862,392],{"class":361},[356,2864,395],{"class":361},[356,2866,2867],{"class":398},"w-full min-sm:w-1\u002F3",[356,2869,395],{"class":361},[356,2871,431],{"class":361},[356,2873,2874],{"class":434},"Column 1",[356,2876,438],{"class":361},[356,2878,47],{"class":365},[356,2880,369],{"class":361},[356,2882,2883,2885,2887,2889,2891,2893,2895,2897,2899,2902,2904,2906],{"class":358,"line":52},[356,2884,408],{"class":361},[356,2886,47],{"class":365},[356,2888,389],{"class":388},[356,2890,392],{"class":361},[356,2892,395],{"class":361},[356,2894,2867],{"class":398},[356,2896,395],{"class":361},[356,2898,431],{"class":361},[356,2900,2901],{"class":434},"Column 2",[356,2903,438],{"class":361},[356,2905,47],{"class":365},[356,2907,369],{"class":361},[356,2909,2910,2912,2914,2916,2918,2920,2922,2924,2926,2929,2931,2933],{"class":358,"line":128},[356,2911,408],{"class":361},[356,2913,47],{"class":365},[356,2915,389],{"class":388},[356,2917,392],{"class":361},[356,2919,395],{"class":361},[356,2921,2867],{"class":398},[356,2923,395],{"class":361},[356,2925,431],{"class":361},[356,2927,2928],{"class":434},"Column 3",[356,2930,438],{"class":361},[356,2932,47],{"class":365},[356,2934,369],{"class":361},[356,2936,2937,2939,2941],{"class":358,"line":124},[356,2938,498],{"class":361},[356,2940,123],{"class":365},[356,2942,369],{"class":361},[356,2944,2945,2947,2949],{"class":358,"line":48},[356,2946,507],{"class":361},[356,2948,51],{"class":365},[356,2950,369],{"class":361},[356,2952,2953,2955,2957],{"class":358,"line":23},[356,2954,438],{"class":361},[356,2956,366],{"class":365},[356,2958,369],{"class":361},[1319,2960,2961],{"type":1848},[326,2962,2963,2964,2966,2967,2969,2970,2972],{},"This breaks in clients that do not support ",[330,2965,1044],{}," queries. It can also show columns stacked on desktop if the viewport is narrow enough to trigger the ",[330,2968,2136],{}," breakpoint and ",[330,2971,1044],{}," queries are supported.",[1350,2974,2976],{"id":2975},"gutters-between-columns","Gutters between columns",[326,2978,2979,2980,2982],{},"The cleanest way to add a gap between columns is a spacer ",[330,2981,47],{}," with a fixed width. Auto-width siblings absorb the remainder, so the row stays full-width with the gutter sitting cleanly between them.",[347,2984,2986],{"className":349,"code":2985,"filename":345,"language":351,"meta":352,"style":352},"\u003Ctemplate>\n  \u003CContainer class=\"max-w-xl\">\n    \u003CRow>\n      \u003CColumn>Left\u003C\u002FColumn>\n      \u003CColumn class=\"w-5\" \u002F>\n      \u003CColumn>Right\u003C\u002FColumn>\n    \u003C\u002FRow>\n  \u003C\u002FContainer>\n\u003C\u002Ftemplate>\n",[330,2987,2988,2996,3014,3022,3038,3057,3073,3081,3089],{"__ignoreMap":352},[356,2989,2990,2992,2994],{"class":358,"line":18},[356,2991,362],{"class":361},[356,2993,366],{"class":365},[356,2995,369],{"class":361},[356,2997,2998,3000,3002,3004,3006,3008,3010,3012],{"class":358,"line":13},[356,2999,374],{"class":361},[356,3001,51],{"class":365},[356,3003,389],{"class":388},[356,3005,392],{"class":361},[356,3007,395],{"class":361},[356,3009,399],{"class":398},[356,3011,395],{"class":361},[356,3013,369],{"class":361},[356,3015,3016,3018,3020],{"class":358,"line":32},[356,3017,383],{"class":361},[356,3019,123],{"class":365},[356,3021,369],{"class":361},[356,3023,3024,3026,3028,3030,3032,3034,3036],{"class":358,"line":27},[356,3025,408],{"class":361},[356,3027,47],{"class":365},[356,3029,431],{"class":361},[356,3031,1917],{"class":434},[356,3033,438],{"class":361},[356,3035,47],{"class":365},[356,3037,369],{"class":361},[356,3039,3040,3042,3044,3046,3048,3050,3052,3054],{"class":358,"line":52},[356,3041,408],{"class":361},[356,3043,47],{"class":365},[356,3045,389],{"class":388},[356,3047,392],{"class":361},[356,3049,395],{"class":361},[356,3051,1033],{"class":398},[356,3053,395],{"class":361},[356,3055,3056],{"class":361}," \u002F>\n",[356,3058,3059,3061,3063,3065,3067,3069,3071],{"class":358,"line":128},[356,3060,408],{"class":361},[356,3062,47],{"class":365},[356,3064,431],{"class":361},[356,3066,1934],{"class":434},[356,3068,438],{"class":361},[356,3070,47],{"class":365},[356,3072,369],{"class":361},[356,3074,3075,3077,3079],{"class":358,"line":124},[356,3076,498],{"class":361},[356,3078,123],{"class":365},[356,3080,369],{"class":361},[356,3082,3083,3085,3087],{"class":358,"line":48},[356,3084,507],{"class":361},[356,3086,51],{"class":365},[356,3088,369],{"class":361},[356,3090,3091,3093,3095],{"class":358,"line":23},[356,3092,438],{"class":361},[356,3094,366],{"class":365},[356,3096,369],{"class":361},[326,3098,3099,3100,3102,3103,3105],{},"In a 576px container, the spacer takes 20px (",[330,3101,1033],{},"), and the two content columns split the remaining 556px (278px each). No padding tricks, no outer bleed, and the spacer is a real grid slot so Outlook gets a proper MSO ",[330,3104,1016],{}," for it.",[326,3107,3108],{},"For more than two content columns, drop a spacer between each pair:",[347,3110,3112],{"className":349,"code":3111,"filename":345,"language":351,"meta":352,"style":352},"\u003Ctemplate>\n  \u003CContainer class=\"max-w-xl\">\n    \u003CRow>\n      \u003CColumn>1\u003C\u002FColumn>\n      \u003CColumn class=\"w-5\" \u002F>\n      \u003CColumn>2\u003C\u002FColumn>\n      \u003CColumn class=\"w-5\" \u002F>\n      \u003CColumn>3\u003C\u002FColumn>\n    \u003C\u002FRow>\n  \u003C\u002FContainer>\n\u003C\u002Ftemplate>\n",[330,3113,3114,3122,3140,3148,3164,3182,3198,3216,3232,3240,3248],{"__ignoreMap":352},[356,3115,3116,3118,3120],{"class":358,"line":18},[356,3117,362],{"class":361},[356,3119,366],{"class":365},[356,3121,369],{"class":361},[356,3123,3124,3126,3128,3130,3132,3134,3136,3138],{"class":358,"line":13},[356,3125,374],{"class":361},[356,3127,51],{"class":365},[356,3129,389],{"class":388},[356,3131,392],{"class":361},[356,3133,395],{"class":361},[356,3135,399],{"class":398},[356,3137,395],{"class":361},[356,3139,369],{"class":361},[356,3141,3142,3144,3146],{"class":358,"line":32},[356,3143,383],{"class":361},[356,3145,123],{"class":365},[356,3147,369],{"class":361},[356,3149,3150,3152,3154,3156,3158,3160,3162],{"class":358,"line":27},[356,3151,408],{"class":361},[356,3153,47],{"class":365},[356,3155,431],{"class":361},[356,3157,2042],{"class":434},[356,3159,438],{"class":361},[356,3161,47],{"class":365},[356,3163,369],{"class":361},[356,3165,3166,3168,3170,3172,3174,3176,3178,3180],{"class":358,"line":52},[356,3167,408],{"class":361},[356,3169,47],{"class":365},[356,3171,389],{"class":388},[356,3173,392],{"class":361},[356,3175,395],{"class":361},[356,3177,1033],{"class":398},[356,3179,395],{"class":361},[356,3181,3056],{"class":361},[356,3183,3184,3186,3188,3190,3192,3194,3196],{"class":358,"line":128},[356,3185,408],{"class":361},[356,3187,47],{"class":365},[356,3189,431],{"class":361},[356,3191,2069],{"class":434},[356,3193,438],{"class":361},[356,3195,47],{"class":365},[356,3197,369],{"class":361},[356,3199,3200,3202,3204,3206,3208,3210,3212,3214],{"class":358,"line":124},[356,3201,408],{"class":361},[356,3203,47],{"class":365},[356,3205,389],{"class":388},[356,3207,392],{"class":361},[356,3209,395],{"class":361},[356,3211,1033],{"class":398},[356,3213,395],{"class":361},[356,3215,3056],{"class":361},[356,3217,3218,3220,3222,3224,3226,3228,3230],{"class":358,"line":48},[356,3219,408],{"class":361},[356,3221,47],{"class":365},[356,3223,431],{"class":361},[356,3225,2096],{"class":434},[356,3227,438],{"class":361},[356,3229,47],{"class":365},[356,3231,369],{"class":361},[356,3233,3234,3236,3238],{"class":358,"line":23},[356,3235,498],{"class":361},[356,3237,123],{"class":365},[356,3239,369],{"class":361},[356,3241,3242,3244,3246],{"class":358,"line":140},[356,3243,507],{"class":361},[356,3245,51],{"class":365},[356,3247,369],{"class":361},[356,3249,3250,3252,3254],{"class":358,"line":56},[356,3251,438],{"class":361},[356,3253,366],{"class":365},[356,3255,369],{"class":361},[3257,3258,3260],"h4",{"id":3259},"asymmetric-padding","Asymmetric padding",[326,3262,3263,3264,3267,3268,3271],{},"For two-column layouts where you'd rather not add a spacer col, put half the gap on each side via ",[330,3265,3266],{},"pr-*"," and ",[330,3269,3270],{},"pl-*",":",[347,3273,3275],{"className":349,"code":3274,"filename":345,"language":351,"meta":352,"style":352},"\u003Ctemplate>\n  \u003CContainer class=\"max-w-xl\">\n    \u003CRow>\n      \u003CColumn class=\"pr-2.5\">Left\u003C\u002FColumn>\n      \u003CColumn class=\"pl-2.5\">Right\u003C\u002FColumn>\n    \u003C\u002FRow>\n  \u003C\u002FContainer>\n\u003C\u002Ftemplate>\n",[330,3276,3277,3285,3303,3311,3338,3365,3373,3381],{"__ignoreMap":352},[356,3278,3279,3281,3283],{"class":358,"line":18},[356,3280,362],{"class":361},[356,3282,366],{"class":365},[356,3284,369],{"class":361},[356,3286,3287,3289,3291,3293,3295,3297,3299,3301],{"class":358,"line":13},[356,3288,374],{"class":361},[356,3290,51],{"class":365},[356,3292,389],{"class":388},[356,3294,392],{"class":361},[356,3296,395],{"class":361},[356,3298,399],{"class":398},[356,3300,395],{"class":361},[356,3302,369],{"class":361},[356,3304,3305,3307,3309],{"class":358,"line":32},[356,3306,383],{"class":361},[356,3308,123],{"class":365},[356,3310,369],{"class":361},[356,3312,3313,3315,3317,3319,3321,3323,3326,3328,3330,3332,3334,3336],{"class":358,"line":27},[356,3314,408],{"class":361},[356,3316,47],{"class":365},[356,3318,389],{"class":388},[356,3320,392],{"class":361},[356,3322,395],{"class":361},[356,3324,3325],{"class":398},"pr-2.5",[356,3327,395],{"class":361},[356,3329,431],{"class":361},[356,3331,1917],{"class":434},[356,3333,438],{"class":361},[356,3335,47],{"class":365},[356,3337,369],{"class":361},[356,3339,3340,3342,3344,3346,3348,3350,3353,3355,3357,3359,3361,3363],{"class":358,"line":52},[356,3341,408],{"class":361},[356,3343,47],{"class":365},[356,3345,389],{"class":388},[356,3347,392],{"class":361},[356,3349,395],{"class":361},[356,3351,3352],{"class":398},"pl-2.5",[356,3354,395],{"class":361},[356,3356,431],{"class":361},[356,3358,1934],{"class":434},[356,3360,438],{"class":361},[356,3362,47],{"class":365},[356,3364,369],{"class":361},[356,3366,3367,3369,3371],{"class":358,"line":128},[356,3368,498],{"class":361},[356,3370,123],{"class":365},[356,3372,369],{"class":361},[356,3374,3375,3377,3379],{"class":358,"line":124},[356,3376,507],{"class":361},[356,3378,51],{"class":365},[356,3380,369],{"class":361},[356,3382,3383,3385,3387],{"class":358,"line":48},[356,3384,438],{"class":361},[356,3386,366],{"class":365},[356,3388,369],{"class":361},[326,3390,3391],{},"Each col gets the outer 288px slot. The inner padding (10 + 10) gives a 20px gap between content, with no padding on the row's outer edges.",[326,3393,3394],{},"The downside is that the padding eats into the column's width and you then need to reset it for mobile in order to have the content align properly. Also, this gets messy fast when using more than two columns.",[3257,3396,3398],{"id":3397},"symmetric-padding-gutter-outer","Symmetric padding (gutter + outer)",[326,3400,3401,3402,3406,3407,3271],{},"If you want padding between columns ",[3403,3404,3405],"strong",{},"and"," on the row's outer edges, use ",[330,3408,3409],{},"px-*",[347,3411,3413],{"className":349,"code":3412,"filename":345,"language":351,"meta":352,"style":352},"\u003Ctemplate>\n  \u003CContainer class=\"max-w-xl\">\n    \u003CRow>\n      \u003CColumn class=\"px-2\">1\u003C\u002FColumn>\n      \u003CColumn class=\"px-2\">2\u003C\u002FColumn>\n      \u003CColumn class=\"px-2\">3\u003C\u002FColumn>\n    \u003C\u002FRow>\n  \u003C\u002FContainer>\n\u003C\u002Ftemplate>\n",[330,3414,3415,3423,3441,3449,3476,3502,3528,3536,3544],{"__ignoreMap":352},[356,3416,3417,3419,3421],{"class":358,"line":18},[356,3418,362],{"class":361},[356,3420,366],{"class":365},[356,3422,369],{"class":361},[356,3424,3425,3427,3429,3431,3433,3435,3437,3439],{"class":358,"line":13},[356,3426,374],{"class":361},[356,3428,51],{"class":365},[356,3430,389],{"class":388},[356,3432,392],{"class":361},[356,3434,395],{"class":361},[356,3436,399],{"class":398},[356,3438,395],{"class":361},[356,3440,369],{"class":361},[356,3442,3443,3445,3447],{"class":358,"line":32},[356,3444,383],{"class":361},[356,3446,123],{"class":365},[356,3448,369],{"class":361},[356,3450,3451,3453,3455,3457,3459,3461,3464,3466,3468,3470,3472,3474],{"class":358,"line":27},[356,3452,408],{"class":361},[356,3454,47],{"class":365},[356,3456,389],{"class":388},[356,3458,392],{"class":361},[356,3460,395],{"class":361},[356,3462,3463],{"class":398},"px-2",[356,3465,395],{"class":361},[356,3467,431],{"class":361},[356,3469,2042],{"class":434},[356,3471,438],{"class":361},[356,3473,47],{"class":365},[356,3475,369],{"class":361},[356,3477,3478,3480,3482,3484,3486,3488,3490,3492,3494,3496,3498,3500],{"class":358,"line":52},[356,3479,408],{"class":361},[356,3481,47],{"class":365},[356,3483,389],{"class":388},[356,3485,392],{"class":361},[356,3487,395],{"class":361},[356,3489,3463],{"class":398},[356,3491,395],{"class":361},[356,3493,431],{"class":361},[356,3495,2069],{"class":434},[356,3497,438],{"class":361},[356,3499,47],{"class":365},[356,3501,369],{"class":361},[356,3503,3504,3506,3508,3510,3512,3514,3516,3518,3520,3522,3524,3526],{"class":358,"line":128},[356,3505,408],{"class":361},[356,3507,47],{"class":365},[356,3509,389],{"class":388},[356,3511,392],{"class":361},[356,3513,395],{"class":361},[356,3515,3463],{"class":398},[356,3517,395],{"class":361},[356,3519,431],{"class":361},[356,3521,2096],{"class":434},[356,3523,438],{"class":361},[356,3525,47],{"class":365},[356,3527,369],{"class":361},[356,3529,3530,3532,3534],{"class":358,"line":124},[356,3531,498],{"class":361},[356,3533,123],{"class":365},[356,3535,369],{"class":361},[356,3537,3538,3540,3542],{"class":358,"line":48},[356,3539,507],{"class":361},[356,3541,51],{"class":365},[356,3543,369],{"class":361},[356,3545,3546,3548,3550],{"class":358,"line":23},[356,3547,438],{"class":361},[356,3549,366],{"class":365},[356,3551,369],{"class":361},[326,3553,3554],{},"Problem with this is that the space between columns is double the outer padding (16px inside vs 8px outer in this example). To keep them even, add extra padding to the outer sides of the outer columns:",[347,3556,3558],{"className":349,"code":3557,"filename":345,"language":351,"meta":352,"style":352},"\u003Ctemplate>\n  \u003CContainer class=\"max-w-xl\">\n    \u003CRow>\n      \u003CColumn class=\"pl-4 pr-2\">1\u003C\u002FColumn>\n      \u003CColumn class=\"px-2\">2\u003C\u002FColumn>\n      \u003CColumn class=\"pl-2 pr-4\">3\u003C\u002FColumn>\n    \u003C\u002FRow>\n  \u003C\u002FContainer>\n\u003C\u002Ftemplate>\n",[330,3559,3560,3568,3586,3594,3621,3647,3674,3682,3690],{"__ignoreMap":352},[356,3561,3562,3564,3566],{"class":358,"line":18},[356,3563,362],{"class":361},[356,3565,366],{"class":365},[356,3567,369],{"class":361},[356,3569,3570,3572,3574,3576,3578,3580,3582,3584],{"class":358,"line":13},[356,3571,374],{"class":361},[356,3573,51],{"class":365},[356,3575,389],{"class":388},[356,3577,392],{"class":361},[356,3579,395],{"class":361},[356,3581,399],{"class":398},[356,3583,395],{"class":361},[356,3585,369],{"class":361},[356,3587,3588,3590,3592],{"class":358,"line":32},[356,3589,383],{"class":361},[356,3591,123],{"class":365},[356,3593,369],{"class":361},[356,3595,3596,3598,3600,3602,3604,3606,3609,3611,3613,3615,3617,3619],{"class":358,"line":27},[356,3597,408],{"class":361},[356,3599,47],{"class":365},[356,3601,389],{"class":388},[356,3603,392],{"class":361},[356,3605,395],{"class":361},[356,3607,3608],{"class":398},"pl-4 pr-2",[356,3610,395],{"class":361},[356,3612,431],{"class":361},[356,3614,2042],{"class":434},[356,3616,438],{"class":361},[356,3618,47],{"class":365},[356,3620,369],{"class":361},[356,3622,3623,3625,3627,3629,3631,3633,3635,3637,3639,3641,3643,3645],{"class":358,"line":52},[356,3624,408],{"class":361},[356,3626,47],{"class":365},[356,3628,389],{"class":388},[356,3630,392],{"class":361},[356,3632,395],{"class":361},[356,3634,3463],{"class":398},[356,3636,395],{"class":361},[356,3638,431],{"class":361},[356,3640,2069],{"class":434},[356,3642,438],{"class":361},[356,3644,47],{"class":365},[356,3646,369],{"class":361},[356,3648,3649,3651,3653,3655,3657,3659,3662,3664,3666,3668,3670,3672],{"class":358,"line":128},[356,3650,408],{"class":361},[356,3652,47],{"class":365},[356,3654,389],{"class":388},[356,3656,392],{"class":361},[356,3658,395],{"class":361},[356,3660,3661],{"class":398},"pl-2 pr-4",[356,3663,395],{"class":361},[356,3665,431],{"class":361},[356,3667,2096],{"class":434},[356,3669,438],{"class":361},[356,3671,47],{"class":365},[356,3673,369],{"class":361},[356,3675,3676,3678,3680],{"class":358,"line":124},[356,3677,498],{"class":361},[356,3679,123],{"class":365},[356,3681,369],{"class":361},[356,3683,3684,3686,3688],{"class":358,"line":48},[356,3685,507],{"class":361},[356,3687,51],{"class":365},[356,3689,369],{"class":361},[356,3691,3692,3694,3696],{"class":358,"line":23},[356,3693,438],{"class":361},[356,3695,366],{"class":365},[356,3697,369],{"class":361},[1350,3699,3701],{"id":3700},"nested-rows","Nested rows",[326,3703,3704],{},"Columns can contain Rows, which in turn can contain Columns, allowing for complex nested layouts. A nested Row's width is determined by its parent Column's resolved width, so the inner Columns divide that space as you'd expect.",[347,3706,3708],{"className":349,"code":3707,"filename":345,"language":351,"meta":352,"style":352},"\u003Ctemplate>\n  \u003CContainer class=\"max-w-xl\">\n    \u003CRow>\n      \u003CColumn class=\"w-2\u002F3 max-xs:w-full\">\n        Main 2\u002F3\n      \u003C\u002FColumn>\n      \u003CColumn class=\"w-1\u002F3 max-xs:w-full\">\n        \u003CRow>\n          \u003CColumn class=\"w-1\u002F2 max-xs:w-full\">\n            Nested 1\n          \u003C\u002FColumn>\n          \u003CColumn class=\"w-1\u002F2 max-xs:w-full\">\n            Nested 2\n          \u003C\u002FColumn>\n        \u003C\u002FRow>\n      \u003C\u002FColumn>\n    \u003C\u002FRow>\n  \u003C\u002FContainer>\n\u003C\u002Ftemplate>\n",[330,3709,3710,3718,3736,3744,3763,3768,3776,3795,3803,3822,3827,3835,3853,3858,3866,3874,3882,3890,3898],{"__ignoreMap":352},[356,3711,3712,3714,3716],{"class":358,"line":18},[356,3713,362],{"class":361},[356,3715,366],{"class":365},[356,3717,369],{"class":361},[356,3719,3720,3722,3724,3726,3728,3730,3732,3734],{"class":358,"line":13},[356,3721,374],{"class":361},[356,3723,51],{"class":365},[356,3725,389],{"class":388},[356,3727,392],{"class":361},[356,3729,395],{"class":361},[356,3731,399],{"class":398},[356,3733,395],{"class":361},[356,3735,369],{"class":361},[356,3737,3738,3740,3742],{"class":358,"line":32},[356,3739,383],{"class":361},[356,3741,123],{"class":365},[356,3743,369],{"class":361},[356,3745,3746,3748,3750,3752,3754,3756,3759,3761],{"class":358,"line":27},[356,3747,408],{"class":361},[356,3749,47],{"class":365},[356,3751,389],{"class":388},[356,3753,392],{"class":361},[356,3755,395],{"class":361},[356,3757,3758],{"class":398},"w-2\u002F3 max-xs:w-full",[356,3760,395],{"class":361},[356,3762,369],{"class":361},[356,3764,3765],{"class":358,"line":52},[356,3766,3767],{"class":434},"        Main 2\u002F3\n",[356,3769,3770,3772,3774],{"class":358,"line":128},[356,3771,489],{"class":361},[356,3773,47],{"class":365},[356,3775,369],{"class":361},[356,3777,3778,3780,3782,3784,3786,3788,3791,3793],{"class":358,"line":124},[356,3779,408],{"class":361},[356,3781,47],{"class":365},[356,3783,389],{"class":388},[356,3785,392],{"class":361},[356,3787,395],{"class":361},[356,3789,3790],{"class":398},"w-1\u002F3 max-xs:w-full",[356,3792,395],{"class":361},[356,3794,369],{"class":361},[356,3796,3797,3799,3801],{"class":358,"line":48},[356,3798,417],{"class":361},[356,3800,123],{"class":365},[356,3802,369],{"class":361},[356,3804,3805,3807,3809,3811,3813,3815,3818,3820],{"class":358,"line":23},[356,3806,426],{"class":361},[356,3808,47],{"class":365},[356,3810,389],{"class":388},[356,3812,392],{"class":361},[356,3814,395],{"class":361},[356,3816,3817],{"class":398},"w-1\u002F2 max-xs:w-full",[356,3819,395],{"class":361},[356,3821,369],{"class":361},[356,3823,3824],{"class":358,"line":140},[356,3825,3826],{"class":434},"            Nested 1\n",[356,3828,3829,3831,3833],{"class":358,"line":56},[356,3830,826],{"class":361},[356,3832,47],{"class":365},[356,3834,369],{"class":361},[356,3836,3837,3839,3841,3843,3845,3847,3849,3851],{"class":358,"line":80},[356,3838,426],{"class":361},[356,3840,47],{"class":365},[356,3842,389],{"class":388},[356,3844,392],{"class":361},[356,3846,395],{"class":361},[356,3848,3817],{"class":398},[356,3850,395],{"class":361},[356,3852,369],{"class":361},[356,3854,3855],{"class":358,"line":36},[356,3856,3857],{"class":434},"            Nested 2\n",[356,3859,3860,3862,3864],{"class":358,"line":73},[356,3861,826],{"class":361},[356,3863,47],{"class":365},[356,3865,369],{"class":361},[356,3867,3868,3870,3872],{"class":358,"line":132},[356,3869,447],{"class":361},[356,3871,123],{"class":365},[356,3873,369],{"class":361},[356,3875,3876,3878,3880],{"class":358,"line":66},[356,3877,489],{"class":361},[356,3879,47],{"class":365},[356,3881,369],{"class":361},[356,3883,3884,3886,3888],{"class":358,"line":112},[356,3885,498],{"class":361},[356,3887,123],{"class":365},[356,3889,369],{"class":361},[356,3891,3892,3894,3896],{"class":358,"line":40},[356,3893,507],{"class":361},[356,3895,51],{"class":365},[356,3897,369],{"class":361},[356,3899,3900,3902,3904],{"class":358,"line":44},[356,3901,438],{"class":361},[356,3903,366],{"class":365},[356,3905,369],{"class":361},[3907,3908,3909],"style",{},"html pre.shiki code .sGGKt, html code.shiki .sGGKt{--shiki-default:#7B6995}html pre.shiki code .sb4Pa, html code.shiki .sb4Pa{--shiki-default:#74DFC4}html pre.shiki code .sZNF3, html code.shiki .sZNF3{--shiki-default:#EB64B9}html pre.shiki code .sXiT_, html code.shiki .sXiT_{--shiki-default:#B4DCE7}html pre.shiki code .sLaUg, html code.shiki .sLaUg{--shiki-default:#FFFFFF}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);}html pre.shiki code .sVsQ9, html code.shiki .sVsQ9{--shiki-default:#91889B}",{"title":352,"searchDepth":13,"depth":13,"links":3911},[3912,3913,3914,3915,3920],{"id":337,"depth":13,"text":338},{"id":1023,"depth":13,"text":1024},{"id":1048,"depth":13,"text":1049},{"id":1347,"depth":13,"text":1348,"children":3916},[3917,3918,3919],{"id":977,"depth":32,"text":977},{"id":1485,"depth":32,"text":1486},{"id":1577,"depth":32,"text":1578},{"id":1856,"depth":13,"text":1857,"children":3921},[3922,3923,3924,3925,3926,3927,3928,3929,3930],{"id":1863,"depth":32,"text":1864},{"id":1977,"depth":32,"text":1978},{"id":2129,"depth":32,"text":2130},{"id":2296,"depth":32,"text":2297},{"id":2462,"depth":32,"text":2463},{"id":2620,"depth":32,"text":2621},{"id":2806,"depth":32,"text":2807},{"id":2975,"depth":32,"text":2976},{"id":3700,"depth":32,"text":3701},"An individual column within a Row component.","md",{},{"title":47,"description":3931},"docs\u002Fcomponents\u002Fcolumn","IoGg0rZWLkamflLieeSbO3mBxzucJi5t9NZDBeAoo4k",1781015438632]