[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"\u002Fblog\u002Ftailwind-css-subgrid-align-content":3,"$fbR0Brf-Ki_s4hrG28ufpL469Bvvh8P_DBgALLH-_9j0":781,"i-local-icon:calendar-days":784,"i-local-icon:tag":788,"i-local-icon:eye":790},{"id":4,"title":5,"body":6,"categories_slug":770,"comment_count":773,"date_published":774,"description":26,"extension":775,"meta":776,"navigation":235,"path":777,"seo":778,"stem":779,"__hash__":780},"content\u002Fblog\u002F13.tailwind-css-subgrid-align-content.md","Tailwind CSS - Using subgrid to align child content",{"type":7,"value":8,"toc":765},"minimark",[9,13,18,23,27,39,56,60,472,475,483,486,493,497,508,620,623,630,633,643,751,754,761],[10,11,5],"h1",{"id":12},"tailwind-css-using-subgrid-to-align-child-content",[14,15],"meta-card",{":categories":16,":date":17},"categories_slug","date_published",[19,20,22],"h2",{"id":21},"overview","Overview",[24,25,26],"p",{},"As of Tailwind CSS 3.4, CSS subgrids are now available. In this article, we will look at how we can use the new subgrid option to fix a very common layout alignment issue.",[24,28,29,30,38],{},"As per the ",[31,32,37],"a",{":target":33,"href":34,"rel":35},"\\_blank","https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FCSS\u002FCSS_grid_layout\u002FSubgrid",[36],"nofollow","MDN documentation",":",[40,41,42],"blockquote",{},[24,43,44,45,49,50,53,55],{},"When you add ",[46,47,48],"strong",{},"display: grid"," to a grid container, only the direct children become grid items and can then be placed on the grid you created. The children of these items display in normal flow. ",[51,52],"br",{},[51,54],{},"You can \"nest\" grids by making a grid item a grid container. These grids, however, are independent of the parent grid and of each other, meaning that they do not take their track sizing from the parent grid. This makes it difficult to line nested grid items up with the main grid.",[19,57,59],{"id":58},"step-1-the-html-and-tailwind-css-markup","Step 1: The HTML and Tailwind CSS markup",[61,62,67],"pre",{"className":63,"code":64,"language":65,"meta":66,"style":66},"language-html shiki shiki-themes github-dark","\u003C!-- Wrapper -->\n\u003Cdiv class=\"grid grid-cols-3 gap-x-8 p-20\">\n  \u003C!-- Child 1 -->\n  \u003Cdiv class=\"rounded-md border p-4\">\n    \u003Ch2 class=\"text-2xl\">Heading 1\u003C\u002Fh2>\n    \u003Cp class=\"py-4\">\n      Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro debitis maxime culpa harum\n      accusamus eos voluptatem veniam, odio, quibusdam repudiandae quidem reiciendis distinctio\n      eveniet quia doloremque? Quasi omnis alias voluptatum.\n    \u003C\u002Fp>\n    \u003Cimg src=\"\u002Fpublic\u002Fimages\u002Fhero-04.webp\" alt=\"Image\" \u002F>\n  \u003C\u002Fdiv>\n\n  \u003C!-- Child 2 -->\n  \u003Cdiv class=\"rounded-md border p-4\">\n    \u003Ch2 class=\"text-2xl\">Heading 2\u003C\u002Fh2>\n    \u003Cp class=\"py-4\">\n      Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro debitis maxime culpa harum\n      accusamus eos voluptatem veniam, odio, quibusdam repudiandae quidem reiciendis distinctio\n      eveniet quia doloremque? Quasi omnis alias voluptatum.\n    \u003C\u002Fp>\n    \u003Cimg src=\"\u002Fpublic\u002Fimages\u002Fhero-04.webp\" alt=\"Image\" \u002F>\n  \u003C\u002Fdiv>\n\n  \u003C!-- Child 3 -->\n  \u003Cdiv class=\"rounded-md border p-4\">\n    \u003Ch2 class=\"text-2xl\">Heading 3\u003C\u002Fh2>\n    \u003Cp class=\"py-4\">\n      Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro debitis maxime culpa harum\n      accusamus eos voluptatem veniam, odio, quibusdam repudiandae quidem reiciendis distinctio\n      eveniet quia doloremque? Quasi omnis alias voluptatum.\n    \u003C\u002Fp>\n    \u003Cimg src=\"\u002Fpublic\u002Fimages\u002Fhero-04.webp\" alt=\"Image\" \u002F>\n  \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n","html","",[68,69,70,79,104,110,127,149,165,171,177,183,193,220,230,237,243,258,278,293,298,303,308,317,338,347,352,358,373,393,408,413,418,423,432,453,462],"code",{"__ignoreMap":66},[71,72,75],"span",{"class":73,"line":74},"line",1,[71,76,78],{"class":77},"sAwPA","\u003C!-- Wrapper -->\n",[71,80,82,86,90,94,97,101],{"class":73,"line":81},2,[71,83,85],{"class":84},"s95oV","\u003C",[71,87,89],{"class":88},"s4JwU","div",[71,91,93],{"class":92},"svObZ"," class",[71,95,96],{"class":84},"=",[71,98,100],{"class":99},"sU2Wk","\"grid grid-cols-3 gap-x-8 p-20\"",[71,102,103],{"class":84},">\n",[71,105,107],{"class":73,"line":106},3,[71,108,109],{"class":77},"  \u003C!-- Child 1 -->\n",[71,111,113,116,118,120,122,125],{"class":73,"line":112},4,[71,114,115],{"class":84},"  \u003C",[71,117,89],{"class":88},[71,119,93],{"class":92},[71,121,96],{"class":84},[71,123,124],{"class":99},"\"rounded-md border p-4\"",[71,126,103],{"class":84},[71,128,130,133,135,137,139,142,145,147],{"class":73,"line":129},5,[71,131,132],{"class":84},"    \u003C",[71,134,19],{"class":88},[71,136,93],{"class":92},[71,138,96],{"class":84},[71,140,141],{"class":99},"\"text-2xl\"",[71,143,144],{"class":84},">Heading 1\u003C\u002F",[71,146,19],{"class":88},[71,148,103],{"class":84},[71,150,152,154,156,158,160,163],{"class":73,"line":151},6,[71,153,132],{"class":84},[71,155,24],{"class":88},[71,157,93],{"class":92},[71,159,96],{"class":84},[71,161,162],{"class":99},"\"py-4\"",[71,164,103],{"class":84},[71,166,168],{"class":73,"line":167},7,[71,169,170],{"class":84},"      Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro debitis maxime culpa harum\n",[71,172,174],{"class":73,"line":173},8,[71,175,176],{"class":84},"      accusamus eos voluptatem veniam, odio, quibusdam repudiandae quidem reiciendis distinctio\n",[71,178,180],{"class":73,"line":179},9,[71,181,182],{"class":84},"      eveniet quia doloremque? Quasi omnis alias voluptatum.\n",[71,184,186,189,191],{"class":73,"line":185},10,[71,187,188],{"class":84},"    \u003C\u002F",[71,190,24],{"class":88},[71,192,103],{"class":84},[71,194,196,198,201,204,206,209,212,214,217],{"class":73,"line":195},11,[71,197,132],{"class":84},[71,199,200],{"class":88},"img",[71,202,203],{"class":92}," src",[71,205,96],{"class":84},[71,207,208],{"class":99},"\"\u002Fpublic\u002Fimages\u002Fhero-04.webp\"",[71,210,211],{"class":92}," alt",[71,213,96],{"class":84},[71,215,216],{"class":99},"\"Image\"",[71,218,219],{"class":84}," \u002F>\n",[71,221,223,226,228],{"class":73,"line":222},12,[71,224,225],{"class":84},"  \u003C\u002F",[71,227,89],{"class":88},[71,229,103],{"class":84},[71,231,233],{"class":73,"line":232},13,[71,234,236],{"emptyLinePlaceholder":235},true,"\n",[71,238,240],{"class":73,"line":239},14,[71,241,242],{"class":77},"  \u003C!-- Child 2 -->\n",[71,244,246,248,250,252,254,256],{"class":73,"line":245},15,[71,247,115],{"class":84},[71,249,89],{"class":88},[71,251,93],{"class":92},[71,253,96],{"class":84},[71,255,124],{"class":99},[71,257,103],{"class":84},[71,259,261,263,265,267,269,271,274,276],{"class":73,"line":260},16,[71,262,132],{"class":84},[71,264,19],{"class":88},[71,266,93],{"class":92},[71,268,96],{"class":84},[71,270,141],{"class":99},[71,272,273],{"class":84},">Heading 2\u003C\u002F",[71,275,19],{"class":88},[71,277,103],{"class":84},[71,279,281,283,285,287,289,291],{"class":73,"line":280},17,[71,282,132],{"class":84},[71,284,24],{"class":88},[71,286,93],{"class":92},[71,288,96],{"class":84},[71,290,162],{"class":99},[71,292,103],{"class":84},[71,294,296],{"class":73,"line":295},18,[71,297,170],{"class":84},[71,299,301],{"class":73,"line":300},19,[71,302,176],{"class":84},[71,304,306],{"class":73,"line":305},20,[71,307,182],{"class":84},[71,309,311,313,315],{"class":73,"line":310},21,[71,312,188],{"class":84},[71,314,24],{"class":88},[71,316,103],{"class":84},[71,318,320,322,324,326,328,330,332,334,336],{"class":73,"line":319},22,[71,321,132],{"class":84},[71,323,200],{"class":88},[71,325,203],{"class":92},[71,327,96],{"class":84},[71,329,208],{"class":99},[71,331,211],{"class":92},[71,333,96],{"class":84},[71,335,216],{"class":99},[71,337,219],{"class":84},[71,339,341,343,345],{"class":73,"line":340},23,[71,342,225],{"class":84},[71,344,89],{"class":88},[71,346,103],{"class":84},[71,348,350],{"class":73,"line":349},24,[71,351,236],{"emptyLinePlaceholder":235},[71,353,355],{"class":73,"line":354},25,[71,356,357],{"class":77},"  \u003C!-- Child 3 -->\n",[71,359,361,363,365,367,369,371],{"class":73,"line":360},26,[71,362,115],{"class":84},[71,364,89],{"class":88},[71,366,93],{"class":92},[71,368,96],{"class":84},[71,370,124],{"class":99},[71,372,103],{"class":84},[71,374,376,378,380,382,384,386,389,391],{"class":73,"line":375},27,[71,377,132],{"class":84},[71,379,19],{"class":88},[71,381,93],{"class":92},[71,383,96],{"class":84},[71,385,141],{"class":99},[71,387,388],{"class":84},">Heading 3\u003C\u002F",[71,390,19],{"class":88},[71,392,103],{"class":84},[71,394,396,398,400,402,404,406],{"class":73,"line":395},28,[71,397,132],{"class":84},[71,399,24],{"class":88},[71,401,93],{"class":92},[71,403,96],{"class":84},[71,405,162],{"class":99},[71,407,103],{"class":84},[71,409,411],{"class":73,"line":410},29,[71,412,170],{"class":84},[71,414,416],{"class":73,"line":415},30,[71,417,176],{"class":84},[71,419,421],{"class":73,"line":420},31,[71,422,182],{"class":84},[71,424,426,428,430],{"class":73,"line":425},32,[71,427,188],{"class":84},[71,429,24],{"class":88},[71,431,103],{"class":84},[71,433,435,437,439,441,443,445,447,449,451],{"class":73,"line":434},33,[71,436,132],{"class":84},[71,438,200],{"class":88},[71,440,203],{"class":92},[71,442,96],{"class":84},[71,444,208],{"class":99},[71,446,211],{"class":92},[71,448,96],{"class":84},[71,450,216],{"class":99},[71,452,219],{"class":84},[71,454,456,458,460],{"class":73,"line":455},34,[71,457,225],{"class":84},[71,459,89],{"class":88},[71,461,103],{"class":84},[71,463,465,468,470],{"class":73,"line":464},35,[71,466,467],{"class":84},"\u003C\u002F",[71,469,89],{"class":88},[71,471,103],{"class":84},[24,473,474],{},"This will produce a 3 column grid as viewed below.",[24,476,477],{},[200,478],{"alt":479,"className":480,"src":482},"Image 1",[481],"blog-image","\u002Fimages\u002Fblog\u002Ftailwind-subgrid\u002Ftailwind-subgrid-01.webp",[24,484,485],{},"Of course this is an unrealistic scenario where all the text content is exactly the same length. In the real world, each text\u002Fparagraph section will most likely have varying lengths which is when we will notice the alignment issues.",[24,487,488],{},[200,489],{"alt":490,"className":491,"src":492},"Image 2",[481],"\u002Fimages\u002Fblog\u002Ftailwind-subgrid\u002Ftailwind-subgrid-02.webp",[19,494,496],{"id":495},"step-2-fixing-alignment-with-subgrid","Step 2: Fixing alignment with subgrid",[24,498,499,500,503,504,507],{},"On each child div container, we can now add the tailwind classes of ",[46,501,502],{},"grid"," and ",[46,505,506],{},"grid-rows-subgrid",". Make sure that these classes are added to all the child div containers.",[61,509,511],{"className":63,"code":510,"language":65,"meta":66,"style":66},"\u003C!-- Child 1 -->\n\u003Cdiv class=\"grid grid-rows-subgrid rounded-md border p-4\">\n  \u003Ch2 class=\"text-2xl\">Heading 1\u003C\u002Fh2>\n  \u003Cp class=\"py-4\">\n    Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro debitis maxime culpa harum\n    accusamus eos voluptatem veniam, odio.\n  \u003C\u002Fp>\n  \u003Cimg src=\"\u002Fpublic\u002Fimages\u002Fhero-04.webp\" alt=\"Image\" \u002F>\n\u003C\u002Fdiv>\n\n\u003C!-- Child 2 etc... -->\n",[68,512,513,518,533,551,565,570,575,583,603,611,615],{"__ignoreMap":66},[71,514,515],{"class":73,"line":74},[71,516,517],{"class":77},"\u003C!-- Child 1 -->\n",[71,519,520,522,524,526,528,531],{"class":73,"line":81},[71,521,85],{"class":84},[71,523,89],{"class":88},[71,525,93],{"class":92},[71,527,96],{"class":84},[71,529,530],{"class":99},"\"grid grid-rows-subgrid rounded-md border p-4\"",[71,532,103],{"class":84},[71,534,535,537,539,541,543,545,547,549],{"class":73,"line":106},[71,536,115],{"class":84},[71,538,19],{"class":88},[71,540,93],{"class":92},[71,542,96],{"class":84},[71,544,141],{"class":99},[71,546,144],{"class":84},[71,548,19],{"class":88},[71,550,103],{"class":84},[71,552,553,555,557,559,561,563],{"class":73,"line":112},[71,554,115],{"class":84},[71,556,24],{"class":88},[71,558,93],{"class":92},[71,560,96],{"class":84},[71,562,162],{"class":99},[71,564,103],{"class":84},[71,566,567],{"class":73,"line":129},[71,568,569],{"class":84},"    Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro debitis maxime culpa harum\n",[71,571,572],{"class":73,"line":151},[71,573,574],{"class":84},"    accusamus eos voluptatem veniam, odio.\n",[71,576,577,579,581],{"class":73,"line":167},[71,578,225],{"class":84},[71,580,24],{"class":88},[71,582,103],{"class":84},[71,584,585,587,589,591,593,595,597,599,601],{"class":73,"line":173},[71,586,115],{"class":84},[71,588,200],{"class":88},[71,590,203],{"class":92},[71,592,96],{"class":84},[71,594,208],{"class":99},[71,596,211],{"class":92},[71,598,96],{"class":84},[71,600,216],{"class":99},[71,602,219],{"class":84},[71,604,605,607,609],{"class":73,"line":179},[71,606,467],{"class":84},[71,608,89],{"class":88},[71,610,103],{"class":84},[71,612,613],{"class":73,"line":185},[71,614,236],{"emptyLinePlaceholder":235},[71,616,617],{"class":73,"line":195},[71,618,619],{"class":77},"\u003C!-- Child 2 etc... -->\n",[24,621,622],{},"However, this will break our layout as shown below.",[24,624,625],{},[200,626],{"alt":627,"className":628,"src":629},"Image 3",[481],"\u002Fimages\u002Fblog\u002Ftailwind-subgrid\u002Ftailwind-subgrid-03.webp",[24,631,632],{},"This is because for each child div container, it is required to specify the start and ending rows so that the grid class knows how many rows we are dealing with.",[24,634,635,636,503,639,642],{},"So if we add ",[46,637,638],{},"row-start-1",[46,640,641],{},"row-end-4"," classes to each of the child div elements, this will fix the layout.",[61,644,646],{"className":63,"code":645,"language":65,"meta":66,"style":66},"\u003C!-- Child 1 -->\n\u003Cdiv class=\"row-start-1 row-end-4 grid grid-rows-subgrid rounded-md border p-4\">\n  \u003Ch2 class=\"text-2xl\">Heading 1\u003C\u002Fh2>\n  \u003Cp class=\"py-4\">\n    Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro debitis maxime culpa harum\n    accusamus eos voluptatem veniam, odio.\n  \u003C\u002Fp>\n  \u003Cimg src=\"\u002Fpublic\u002Fimages\u002Fhero-04.webp\" alt=\"Image\" \u002F>\n\u003C\u002Fdiv>\n\n\u003C!-- Child 2 etc... -->\n",[68,647,648,652,667,685,699,703,707,715,735,743,747],{"__ignoreMap":66},[71,649,650],{"class":73,"line":74},[71,651,517],{"class":77},[71,653,654,656,658,660,662,665],{"class":73,"line":81},[71,655,85],{"class":84},[71,657,89],{"class":88},[71,659,93],{"class":92},[71,661,96],{"class":84},[71,663,664],{"class":99},"\"row-start-1 row-end-4 grid grid-rows-subgrid rounded-md border p-4\"",[71,666,103],{"class":84},[71,668,669,671,673,675,677,679,681,683],{"class":73,"line":106},[71,670,115],{"class":84},[71,672,19],{"class":88},[71,674,93],{"class":92},[71,676,96],{"class":84},[71,678,141],{"class":99},[71,680,144],{"class":84},[71,682,19],{"class":88},[71,684,103],{"class":84},[71,686,687,689,691,693,695,697],{"class":73,"line":112},[71,688,115],{"class":84},[71,690,24],{"class":88},[71,692,93],{"class":92},[71,694,96],{"class":84},[71,696,162],{"class":99},[71,698,103],{"class":84},[71,700,701],{"class":73,"line":129},[71,702,569],{"class":84},[71,704,705],{"class":73,"line":151},[71,706,574],{"class":84},[71,708,709,711,713],{"class":73,"line":167},[71,710,225],{"class":84},[71,712,24],{"class":88},[71,714,103],{"class":84},[71,716,717,719,721,723,725,727,729,731,733],{"class":73,"line":173},[71,718,115],{"class":84},[71,720,200],{"class":88},[71,722,203],{"class":92},[71,724,96],{"class":84},[71,726,208],{"class":99},[71,728,211],{"class":92},[71,730,96],{"class":84},[71,732,216],{"class":99},[71,734,219],{"class":84},[71,736,737,739,741],{"class":73,"line":179},[71,738,467],{"class":84},[71,740,89],{"class":88},[71,742,103],{"class":84},[71,744,745],{"class":73,"line":185},[71,746,236],{"emptyLinePlaceholder":235},[71,748,749],{"class":73,"line":195},[71,750,619],{"class":77},[24,752,753],{},"And now we have a perfectly aligned grid layout!",[24,755,756],{},[200,757],{"alt":758,"className":759,"src":760},"Image 4",[481],"\u002Fimages\u002Fblog\u002Ftailwind-subgrid\u002Ftailwind-subgrid-04.webp",[762,763,764],"style",{},"html pre.shiki code .sAwPA, html code.shiki .sAwPA{--shiki-default:#6A737D}html pre.shiki code .s95oV, html code.shiki .s95oV{--shiki-default:#E1E4E8}html pre.shiki code .s4JwU, html code.shiki .s4JwU{--shiki-default:#85E89D}html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}html pre.shiki code .sU2Wk, html code.shiki .sU2Wk{--shiki-default:#9ECBFF}html .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":66,"searchDepth":81,"depth":81,"links":766},[767,768,769],{"id":21,"depth":81,"text":22},{"id":58,"depth":81,"text":59},{"id":495,"depth":81,"text":496},[771,772],"css","tailwind",null,"2024-06-08","md",{},"\u002Fblog\u002Ftailwind-css-subgrid-align-content",{"title":5,"description":26},"blog\u002F13.tailwind-css-subgrid-align-content","nt_hqMli9RirB13a6R_Erz4OXmqtMBwJeaHwgD4qKss",[782],{"id":239,"name":777,"count":783},5673,{"left":785,"top":785,"width":349,"height":349,"rotate":785,"vFlip":786,"hFlip":786,"body":787},0,false,"\u003Cpath\n    fill=\"none\"\n    stroke=\"currentColor\"\n    stroke-linecap=\"round\"\n    stroke-linejoin=\"round\"\n    stroke-width=\"1.5\"\n    d=\"M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5m-9-6h.008v.008H12zM12 15h.008v.008H12zm0 2.25h.008v.008H12zM9.75 15h.008v.008H9.75zm0 2.25h.008v.008H9.75zM7.5 15h.008v.008H7.5zm0 2.25h.008v.008H7.5zm6.75-4.5h.008v.008h-.008zm0 2.25h.008v.008h-.008zm0 2.25h.008v.008h-.008zm2.25-4.5h.008v.008H16.5zm0 2.25h.008v.008H16.5z\" \u002F>",{"left":785,"top":785,"width":349,"height":349,"rotate":785,"vFlip":786,"hFlip":786,"body":789},"\u003Cg\n    fill=\"none\"\n    stroke=\"currentColor\"\n    stroke-linecap=\"round\"\n    stroke-linejoin=\"round\"\n    stroke-width=\"1.5\">\n    \u003Cpath\n      d=\"M9.568 3H5.25A2.25 2.25 0 0 0 3 5.25v4.318c0 .597.237 1.17.659 1.591l9.581 9.581c.699.699 1.78.872 2.607.33a18.1 18.1 0 0 0 5.224-5.223c.54-.827.368-1.908-.33-2.607l-9.583-9.58A2.25 2.25 0 0 0 9.568 3\" \u002F>\n    \u003Cpath d=\"M6 6h.008v.008H6z\" \u002F>\n  \u003C\u002Fg>",{"left":785,"top":785,"width":349,"height":349,"rotate":785,"vFlip":786,"hFlip":786,"body":791},"\u003Cg\n    fill=\"none\"\n    stroke=\"currentColor\"\n    stroke-linecap=\"round\"\n    stroke-linejoin=\"round\"\n    stroke-width=\"1.5\">\n    \u003Cpath\n      d=\"M2.036 12.322a1 1 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178c.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178\" \u002F>\n    \u003Cpath d=\"M15 12a3 3 0 1 1-6 0a3 3 0 0 1 6 0\" \u002F>\n  \u003C\u002Fg>"]