[{"data":1,"prerenderedAt":1068},["ShallowReactive",2],{"i-ph:sidebar":3,"i-ph:caret-left":8,"i-ph:caret-right":10,"components-grid":12,"i-ph:code":1066},{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":7},0,256,false,"\u003Cpath fill=\"currentColor\" d=\"M216 40H40a16 16 0 0 0-16 16v144a16 16 0 0 0 16 16h176a16 16 0 0 0 16-16V56a16 16 0 0 0-16-16M40 152h16a8 8 0 0 0 0-16H40v-16h16a8 8 0 0 0 0-16H40V88h16a8 8 0 0 0 0-16H40V56h40v144H40Zm176 48H96V56h120z\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":9},"\u003Cpath fill=\"currentColor\" d=\"M165.66 202.34a8 8 0 0 1-11.32 11.32l-80-80a8 8 0 0 1 0-11.32l80-80a8 8 0 0 1 11.32 11.32L91.31 128Z\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":11},"\u003Cpath fill=\"currentColor\" d=\"m181.66 133.66l-80 80a8 8 0 0 1-11.32-11.32L164.69 128L90.34 53.66a8 8 0 0 1 11.32-11.32l80 80a8 8 0 0 1 0 11.32\"\u002F>",{"id":13,"title":14,"body":15,"description":25,"extension":1060,"meta":1061,"navigation":122,"path":1062,"seo":1063,"stem":1064,"__hash__":1065},"docs\u002Fdocs\u002Fcomponents\u002Fgrid.md","Grid",{"type":16,"value":17,"toc":1055},"minimark",[18,22,26,45,489,494,497,874,878,909,913,916,1051],[19,20,14],"h1",{"id":21},"grid",[23,24,25],"p",{},"A simple grid layout component that provides a convenient way to create grid layouts with various alignment and spacing options. Note that this component is not meant for complex grid layouts.",[23,27,28,29,32,33,36,37,40,41,44],{},"Most layout controls are boolean toggles. When you omit them, Grid falls back to CSS defaults such as ",[30,31,21],"code",{},", ",[30,34,35],{},"row"," auto-flow, ",[30,38,39],{},"stretch",", and the theme ",[30,42,43],{},"s"," gap.",[46,47,49],"grid-example",{"source-path":48},"Grid\u002FGrid.vue",[50,51,56],"pre",{"className":52,"code":53,"language":54,"meta":55,"style":55},"language-vue shiki shiki-themes vitesse-dark vitesse-light vitesse-dark","\u003Cscript setup>\nimport { Grid } from '@dolanske\u002Fvui'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CGrid :columns=\"3\" gap=\"m\" center>\n    \u003Cdiv>Item 1\u003C\u002Fdiv>\n    \u003Cdiv>Item 2\u003C\u002Fdiv>\n    \u003Cdiv>Item 3\u003C\u002Fdiv>\n  \u003C\u002FGrid>\n\n  \u003C!-- Custom grid template -->\n  \u003CGrid columns=\"4fr 0.5fr 1fr\" gap=\"m\">\n    \u003Cdiv>Wide\u003C\u002Fdiv>\n    \u003Cdiv>Narrow\u003C\u002Fdiv>\n    \u003Cdiv>Narrow\u003C\u002Fdiv>\n  \u003C\u002FGrid>\n\n  \u003C!-- Grid with rows -->\n  \u003CGrid :columns=\"2\" rows=\"1fr 2fr\" gap=\"m\">\n    \u003Cdiv>Top Left\u003C\u002Fdiv>\n    \u003Cdiv>Top Right\u003C\u002Fdiv>\n    \u003Cdiv>Bottom Left\u003C\u002Fdiv>\n    \u003Cdiv>Bottom Right\u003C\u002Fdiv>\n  \u003C\u002FGrid>\n\u003C\u002Ftemplate>\n","vue","",[30,57,58,78,107,117,124,134,173,195,213,231,241,246,253,284,302,320,337,346,351,357,399,417,435,453,471,480],{"__ignoreMap":55},[59,60,63,67,71,75],"span",{"class":61,"line":62},"line",1,[59,64,66],{"class":65},"sP76a","\u003C",[59,68,70],{"class":69},"sKpE2","script",[59,72,74],{"class":73},"sflEz"," setup",[59,76,77],{"class":65},">\n",[59,79,81,84,87,90,93,96,100,104],{"class":61,"line":80},2,[59,82,83],{"class":69},"import",[59,85,86],{"class":65}," {",[59,88,89],{"class":73}," Grid",[59,91,92],{"class":65}," }",[59,94,95],{"class":69}," from",[59,97,99],{"class":98},"sBR95"," '",[59,101,103],{"class":102},"sfmH-","@dolanske\u002Fvui",[59,105,106],{"class":98},"'\n",[59,108,110,113,115],{"class":61,"line":109},3,[59,111,112],{"class":65},"\u003C\u002F",[59,114,70],{"class":69},[59,116,77],{"class":65},[59,118,120],{"class":61,"line":119},4,[59,121,123],{"emptyLinePlaceholder":122},true,"\n",[59,125,127,129,132],{"class":61,"line":126},5,[59,128,66],{"class":65},[59,130,131],{"class":69},"template",[59,133,77],{"class":65},[59,135,137,140,142,145,148,151,154,156,159,161,163,166,168,171],{"class":61,"line":136},6,[59,138,139],{"class":65},"  \u003C",[59,141,14],{"class":69},[59,143,144],{"class":73}," :columns",[59,146,147],{"class":65},"=",[59,149,150],{"class":98},"\"",[59,152,153],{"class":102},"3",[59,155,150],{"class":98},[59,157,158],{"class":73}," gap",[59,160,147],{"class":65},[59,162,150],{"class":98},[59,164,165],{"class":102},"m",[59,167,150],{"class":98},[59,169,170],{"class":73}," center",[59,172,77],{"class":65},[59,174,176,179,182,185,189,191,193],{"class":61,"line":175},7,[59,177,178],{"class":65},"    \u003C",[59,180,181],{"class":69},"div",[59,183,184],{"class":65},">",[59,186,188],{"class":187},"sX1ls","Item 1",[59,190,112],{"class":65},[59,192,181],{"class":69},[59,194,77],{"class":65},[59,196,198,200,202,204,207,209,211],{"class":61,"line":197},8,[59,199,178],{"class":65},[59,201,181],{"class":69},[59,203,184],{"class":65},[59,205,206],{"class":187},"Item 2",[59,208,112],{"class":65},[59,210,181],{"class":69},[59,212,77],{"class":65},[59,214,216,218,220,222,225,227,229],{"class":61,"line":215},9,[59,217,178],{"class":65},[59,219,181],{"class":69},[59,221,184],{"class":65},[59,223,224],{"class":187},"Item 3",[59,226,112],{"class":65},[59,228,181],{"class":69},[59,230,77],{"class":65},[59,232,234,237,239],{"class":61,"line":233},10,[59,235,236],{"class":65},"  \u003C\u002F",[59,238,14],{"class":69},[59,240,77],{"class":65},[59,242,244],{"class":61,"line":243},11,[59,245,123],{"emptyLinePlaceholder":122},[59,247,249],{"class":61,"line":248},12,[59,250,252],{"class":251},"sR5Ys","  \u003C!-- Custom grid template -->\n",[59,254,256,258,260,263,265,267,270,272,274,276,278,280,282],{"class":61,"line":255},13,[59,257,139],{"class":65},[59,259,14],{"class":69},[59,261,262],{"class":73}," columns",[59,264,147],{"class":65},[59,266,150],{"class":98},[59,268,269],{"class":102},"4fr 0.5fr 1fr",[59,271,150],{"class":98},[59,273,158],{"class":73},[59,275,147],{"class":65},[59,277,150],{"class":98},[59,279,165],{"class":102},[59,281,150],{"class":98},[59,283,77],{"class":65},[59,285,287,289,291,293,296,298,300],{"class":61,"line":286},14,[59,288,178],{"class":65},[59,290,181],{"class":69},[59,292,184],{"class":65},[59,294,295],{"class":187},"Wide",[59,297,112],{"class":65},[59,299,181],{"class":69},[59,301,77],{"class":65},[59,303,305,307,309,311,314,316,318],{"class":61,"line":304},15,[59,306,178],{"class":65},[59,308,181],{"class":69},[59,310,184],{"class":65},[59,312,313],{"class":187},"Narrow",[59,315,112],{"class":65},[59,317,181],{"class":69},[59,319,77],{"class":65},[59,321,323,325,327,329,331,333,335],{"class":61,"line":322},16,[59,324,178],{"class":65},[59,326,181],{"class":69},[59,328,184],{"class":65},[59,330,313],{"class":187},[59,332,112],{"class":65},[59,334,181],{"class":69},[59,336,77],{"class":65},[59,338,340,342,344],{"class":61,"line":339},17,[59,341,236],{"class":65},[59,343,14],{"class":69},[59,345,77],{"class":65},[59,347,349],{"class":61,"line":348},18,[59,350,123],{"emptyLinePlaceholder":122},[59,352,354],{"class":61,"line":353},19,[59,355,356],{"class":251},"  \u003C!-- Grid with rows -->\n",[59,358,360,362,364,366,368,370,373,375,378,380,382,385,387,389,391,393,395,397],{"class":61,"line":359},20,[59,361,139],{"class":65},[59,363,14],{"class":69},[59,365,144],{"class":73},[59,367,147],{"class":65},[59,369,150],{"class":98},[59,371,372],{"class":102},"2",[59,374,150],{"class":98},[59,376,377],{"class":73}," rows",[59,379,147],{"class":65},[59,381,150],{"class":98},[59,383,384],{"class":102},"1fr 2fr",[59,386,150],{"class":98},[59,388,158],{"class":73},[59,390,147],{"class":65},[59,392,150],{"class":98},[59,394,165],{"class":102},[59,396,150],{"class":98},[59,398,77],{"class":65},[59,400,402,404,406,408,411,413,415],{"class":61,"line":401},21,[59,403,178],{"class":65},[59,405,181],{"class":69},[59,407,184],{"class":65},[59,409,410],{"class":187},"Top Left",[59,412,112],{"class":65},[59,414,181],{"class":69},[59,416,77],{"class":65},[59,418,420,422,424,426,429,431,433],{"class":61,"line":419},22,[59,421,178],{"class":65},[59,423,181],{"class":69},[59,425,184],{"class":65},[59,427,428],{"class":187},"Top Right",[59,430,112],{"class":65},[59,432,181],{"class":69},[59,434,77],{"class":65},[59,436,438,440,442,444,447,449,451],{"class":61,"line":437},23,[59,439,178],{"class":65},[59,441,181],{"class":69},[59,443,184],{"class":65},[59,445,446],{"class":187},"Bottom Left",[59,448,112],{"class":65},[59,450,181],{"class":69},[59,452,77],{"class":65},[59,454,456,458,460,462,465,467,469],{"class":61,"line":455},24,[59,457,178],{"class":65},[59,459,181],{"class":69},[59,461,184],{"class":65},[59,463,464],{"class":187},"Bottom Right",[59,466,112],{"class":65},[59,468,181],{"class":69},[59,470,77],{"class":65},[59,472,474,476,478],{"class":61,"line":473},25,[59,475,236],{"class":65},[59,477,14],{"class":69},[59,479,77],{"class":65},[59,481,483,485,487],{"class":61,"line":482},26,[59,484,112],{"class":65},[59,486,131],{"class":69},[59,488,77],{"class":65},[490,491,493],"h3",{"id":492},"props","Props",[23,495,496],{},"The idea is that you control the component by using boolean props. This allows you to define layouts quickly.",[498,499,500,516],"table",{},[501,502,503],"thead",{},[504,505,506,510,513],"tr",{},[507,508,509],"th",{},"Name",[507,511,512],{},"Default",[507,514,515],{},"Type",[517,518,519,542,583,603,621,639,657,675,693,711,730,748,766,784,802,820,838,856],"tbody",{},[504,520,521,527,532],{},[522,523,524],"td",{},[30,525,526],{},"inline",[522,528,529],{},[30,530,531],{},"false",[522,533,534,537,538,541],{},[30,535,536],{},"boolean"," ",[539,540],"br",{}," Makes the grid container inline",[504,543,544,549,553],{},[522,545,546],{},[30,547,548],{},"gap",[522,550,551],{},[30,552,43],{},[522,554,555,537,558,537,561,537,563,537,565,537,568,537,571,537,574,537,577,537,580,582],{},[30,556,557],{},"xxs",[30,559,560],{},"xs",[30,562,43],{},[30,564,165],{},[30,566,567],{},"l",[30,569,570],{},"xl",[30,572,573],{},"xxl",[30,575,576],{},"xxxl",[30,578,579],{},"number",[539,581],{}," Gap between grid items (theme spacing token or custom unit value)",[504,584,585,590,593],{},[522,586,587],{},[30,588,589],{},"rows",[522,591,592],{},"—",[522,594,595,537,597,537,600,602],{},[30,596,579],{},[30,598,599],{},"string",[539,601],{}," Number of rows or custom grid template rows",[504,604,605,610,612],{},[522,606,607],{},[30,608,609],{},"columns",[522,611,592],{},[522,613,614,537,616,537,618,620],{},[30,615,579],{},[30,617,599],{},[539,619],{}," Number of columns or custom grid template columns",[504,622,623,628,632],{},[522,624,625],{},[30,626,627],{},"center",[522,629,630],{},[30,631,531],{},[522,633,634,537,636,638],{},[30,635,536],{},[539,637],{}," Centers items on both axes",[504,640,641,646,650],{},[522,642,643],{},[30,644,645],{},"x-start",[522,647,648],{},[30,649,39],{},[522,651,652,537,654,656],{},[30,653,536],{},[539,655],{}," Aligns items to the start on the inline axis",[504,658,659,664,668],{},[522,660,661],{},[30,662,663],{},"x-end",[522,665,666],{},[30,667,531],{},[522,669,670,537,672,674],{},[30,671,536],{},[539,673],{}," Aligns items to the end on the inline axis",[504,676,677,682,686],{},[522,678,679],{},[30,680,681],{},"x-center",[522,683,684],{},[30,685,531],{},[522,687,688,537,690,692],{},[30,689,536],{},[539,691],{}," Centers items on the inline axis",[504,694,695,700,704],{},[522,696,697],{},[30,698,699],{},"x-stretch",[522,701,702],{},[30,703,39],{},[522,705,706,537,708,710],{},[30,707,536],{},[539,709],{}," Stretches items across the inline axis",[504,712,713,718,723],{},[522,714,715],{},[30,716,717],{},"y-start",[522,719,720],{},[30,721,722],{},"start",[522,724,725,537,727,729],{},[30,726,536],{},[539,728],{}," Aligns items to the start on the block axis",[504,731,732,737,741],{},[522,733,734],{},[30,735,736],{},"y-end",[522,738,739],{},[30,740,531],{},[522,742,743,537,745,747],{},[30,744,536],{},[539,746],{}," Aligns items to the end on the block axis",[504,749,750,755,759],{},[522,751,752],{},[30,753,754],{},"y-center",[522,756,757],{},[30,758,531],{},[522,760,761,537,763,765],{},[30,762,536],{},[539,764],{}," Centers items on the block axis",[504,767,768,773,777],{},[522,769,770],{},[30,771,772],{},"y-baseline",[522,774,775],{},[30,776,531],{},[522,778,779,537,781,783],{},[30,780,536],{},[539,782],{}," Aligns items along their baselines",[504,785,786,791,795],{},[522,787,788],{},[30,789,790],{},"y-stretch",[522,792,793],{},[30,794,39],{},[522,796,797,537,799,801],{},[30,798,536],{},[539,800],{}," Stretches items across the block axis",[504,803,804,809,813],{},[522,805,806],{},[30,807,808],{},"auto-flow-row",[522,810,811],{},[30,812,35],{},[522,814,815,537,817,819],{},[30,816,536],{},[539,818],{}," Auto-places grid items by rows",[504,821,822,827,831],{},[522,823,824],{},[30,825,826],{},"auto-flow-column",[522,828,829],{},[30,830,531],{},[522,832,833,537,835,837],{},[30,834,536],{},[539,836],{}," Auto-places grid items by columns",[504,839,840,845,849],{},[522,841,842],{},[30,843,844],{},"auto-flow-dense",[522,846,847],{},[30,848,531],{},[522,850,851,537,853,855],{},[30,852,536],{},[539,854],{}," Enables dense auto-placement packing",[504,857,858,863,867],{},[522,859,860],{},[30,861,862],{},"expand",[522,864,865],{},[30,866,531],{},[522,868,869,537,871,873],{},[30,870,536],{},[539,872],{}," Makes the grid container expand to full width",[490,875,877],{"id":876},"slots","Slots",[498,879,880,892],{},[501,881,882],{},[504,883,884,886,889],{},[507,885,509],{},[507,887,888],{},"Accepts",[507,890,891],{},"Description",[517,893,894],{},[504,895,896,901,906],{},[522,897,898],{},[30,899,900],{},"default",[522,902,903],{},[30,904,905],{},"any",[522,907,908],{},"The grid items to be laid out",[490,910,912],{"id":911},"tokens","Tokens",[23,914,915],{},"CSS variable tokens used for global or per-instance manipulation of certain styling.",[498,917,918,929],{},[501,919,920],{},[504,921,922,925,927],{},[507,923,924],{},"Token",[507,926,512],{},[507,928,891],{},[517,930,931,945,964,979,993,1008,1022,1036],{},[504,932,933,938,942],{},[522,934,935],{},[30,936,937],{},"--vui-grid-display",[522,939,940],{},[30,941,21],{},[522,943,944],{},"Display value",[504,946,947,952,961],{},[522,948,949],{},[30,950,951],{},"--vui-grid-gap",[522,953,954],{},[955,956,958],"a",{"href":957},"\u002Fdocs\u002Ftokens\u002Fspacing",[30,959,960],{},"var(--space-s)",[522,962,963],{},"Gap",[504,965,966,971,976],{},[522,967,968],{},[30,969,970],{},"--vui-grid-columns",[522,972,973],{},[30,974,975],{},"none",[522,977,978],{},"Grid template columns",[504,980,981,986,990],{},[522,982,983],{},[30,984,985],{},"--vui-grid-rows",[522,987,988],{},[30,989,975],{},[522,991,992],{},"Grid template rows",[504,994,995,1000,1005],{},[522,996,997],{},[30,998,999],{},"--vui-grid-align",[522,1001,1002],{},[30,1003,1004],{},"flex-start",[522,1006,1007],{},"Align items",[504,1009,1010,1015,1019],{},[522,1011,1012],{},[30,1013,1014],{},"--vui-grid-justify",[522,1016,1017],{},[30,1018,39],{},[522,1020,1021],{},"Justify items",[504,1023,1024,1029,1033],{},[522,1025,1026],{},[30,1027,1028],{},"--vui-grid-flow",[522,1030,1031],{},[30,1032,35],{},[522,1034,1035],{},"Grid auto flow",[504,1037,1038,1043,1048],{},[522,1039,1040],{},[30,1041,1042],{},"--vui-grid-width",[522,1044,1045],{},[30,1046,1047],{},"auto",[522,1049,1050],{},"Container width",[1052,1053,1054],"style",{},"html pre.shiki code .sP76a, html code.shiki .sP76a{--shiki-dark:#666666;--shiki-light:#999999;--shiki-default:#666666}html pre.shiki code .sKpE2, html code.shiki .sKpE2{--shiki-dark:#4D9375;--shiki-light:#1E754F;--shiki-default:#4D9375}html pre.shiki code .sflEz, html code.shiki .sflEz{--shiki-dark:#BD976A;--shiki-light:#B07D48;--shiki-default:#BD976A}html pre.shiki code .sBR95, html code.shiki .sBR95{--shiki-dark:#C98A7D77;--shiki-light:#B5695977;--shiki-default:#C98A7D77}html pre.shiki code .sfmH-, html code.shiki .sfmH-{--shiki-dark:#C98A7D;--shiki-light:#B56959;--shiki-default:#C98A7D}html pre.shiki code .sX1ls, html code.shiki .sX1ls{--shiki-dark:#DBD7CAEE;--shiki-light:#393A34;--shiki-default:#DBD7CAEE}html pre.shiki code .sR5Ys, html code.shiki .sR5Ys{--shiki-dark:#758575DD;--shiki-light:#A0ADA0;--shiki-default:#758575DD}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}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":55,"searchDepth":80,"depth":80,"links":1056},[1057,1058,1059],{"id":492,"depth":109,"text":493},{"id":876,"depth":109,"text":877},{"id":911,"depth":109,"text":912},"md",{},"\u002Fdocs\u002Fcomponents\u002Fgrid",{"title":14,"description":25},"docs\u002Fcomponents\u002Fgrid","4DJ2Kou_XqIoAHBGaNzvXdMQ08QzgABhOdLpzAfIGoU",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":1067},"\u003Cpath fill=\"currentColor\" d=\"M69.12 94.15L28.5 128l40.62 33.85a8 8 0 1 1-10.24 12.29l-48-40a8 8 0 0 1 0-12.29l48-40a8 8 0 0 1 10.24 12.3m176 27.7l-48-40a8 8 0 1 0-10.24 12.3L227.5 128l-40.62 33.85a8 8 0 1 0 10.24 12.29l48-40a8 8 0 0 0 0-12.29m-82.39-89.37a8 8 0 0 0-10.25 4.79l-64 176a8 8 0 0 0 4.79 10.26A8.1 8.1 0 0 0 96 224a8 8 0 0 0 7.52-5.27l64-176a8 8 0 0 0-4.79-10.25\"\u002F>",1782200882855]