[{"data":1,"prerenderedAt":2365},["ShallowReactive",2],{"page-\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns\u002Fresponsive-forms-with-container-queries\u002F":3,"content-all-pages":2104},{"id":4,"title":5,"body":6,"description":2086,"extension":2087,"meta":2088,"navigation":399,"path":2100,"seo":2101,"stem":2102,"__hash__":2103},"content\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns\u002Fresponsive-forms-with-container-queries\u002Findex.md","Responsive Forms with Container Queries: Reflow Without Losing the Wiring",{"type":7,"value":8,"toc":2077},"minimark",[9,13,28,33,41,68,78,194,197,201,204,208,1673,1675,1679,1694,1710,1738,1744,1746,1750,1757,1918,1934,1936,1940,1960,1971,1973,1977,1989,2006,2012,2033,2037,2074],[10,11,5],"h1",{"id":12},"responsive-forms-with-container-queries-reflow-without-losing-the-wiring",[14,15,16,17,22,23,27],"p",{},"Forms are where responsive layout stops being cosmetic. A card that reflows badly looks awkward; a form that reflows badly separates a label from its input, drops a field group's heading, or sends Tab bouncing across the screen in an order nobody would choose. And forms are exactly the component most likely to be rendered at several widths in one product — full page at signup, in a 420px drawer for editing, in a dashboard column at checkout. This page builds a form whose layout is a function of its own width, which is the same premise as the rest of ",[18,19,21],"a",{"href":20},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns\u002F","responsive component patterns"," and of ",[18,24,26],{"href":25},"\u002Fmastering-container-queries-responsive-layouts\u002F","Mastering Container Queries & Responsive Layouts"," generally, and then spends most of its time on the part that actually goes wrong: keeping the wiring intact across the switch.",[29,30,32],"h2",{"id":31},"why-layout-and-only-layout-should-move","Why layout, and only layout, should move",[14,34,35,36,40],{},"The useful mental model is that a form has two structures. One is semantic: which label names which control, which controls form a group, what order a person moves through them. The other is presentational: how many columns, whether the label sits above or beside. The semantic structure belongs entirely to the HTML and must not change with width. The presentational structure is the only thing a ",[37,38,39],"code",{},"@container"," rule is allowed to touch.",[14,42,43,44,47,48,51,52,55,56,59,60,63,64,67],{},"That constraint sounds limiting and is actually liberating, because CSS Grid can rearrange boxes across two axes without touching a single element's position in the document. ",[37,45,46],{},"label"," before ",[37,49,50],{},"input"," in the source can paint above it or to the left of it purely by changing ",[37,53,54],{},"grid-template-columns",". Nothing about ",[37,57,58],{},"for","\u002F",[37,61,62],{},"id",", ",[37,65,66],{},"aria-labelledby",", or sequential focus order is even aware that the change happened.",[14,69,70,71,74,75,77],{},"Contrast this with the JavaScript approach, which typically re-renders the field with a different wrapper at a breakpoint. That works until it re-mounts an input mid-typing, loses the caret, drops the ",[37,72,73],{},":focus"," state, or reads out a fresh label to a screen reader that was already inside the field. There is no version of a resize listener that is cheaper or safer than a ",[37,76,39],{}," rule here.",[79,80,86,87,86,91,86,95,86,102,86,108,86,120,86,127,86,134,86,139,86,142,86,145,86,149,86,154,86,158,86,162,86,165,86,170,86,174,86,177,86,180,86,182,86,184,86,186,86,189],"svg",{"viewBox":81,"role":82,"ariaLabel":83,"xmlns":84,"style":85},"0 0 720 340","img","A form field shown with the label above the input in a narrow container and beside the input in a wide container, with identical DOM order","http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg","width:100%;height:auto;max-width:720px;margin:2rem 0","\n  ",[88,89,90],"title",{},"Label placement changes, field wiring does not",[92,93,94],"desc",{},"Below the threshold each label sits above its input; above it the label moves to a left column. The label-to-input association and tab order are unchanged.",[96,97,101],"text",{"x":98,"y":99,"style":100},"360","28","text-anchor:middle;fill:currentColor;font:700 17px sans-serif","same markup, two grid templates",[96,103,107],{"x":104,"y":105,"style":106},"175","58","text-anchor:middle;fill:currentColor;font:600 13px sans-serif","narrow: label above",[109,110],"rect",{"x":111,"y":112,"width":113,"height":114,"rx":115,"fill":116,"stroke":117,"strokeWidth":118,"opacity":119},"30","70","290","212","10","none","currentColor","1.5","0.55",[109,121],{"x":122,"y":123,"width":123,"height":124,"rx":125,"fill":117,"opacity":126},"52","90","16","3","0.35",[109,128],{"x":122,"y":129,"width":130,"height":111,"rx":131,"fill":132,"opacity":133},"112","246","6","#7aa2ff","0.22",[96,135,138],{"x":104,"y":136,"style":137},"132","text-anchor:middle;fill:currentColor;font:12px sans-serif;opacity:0.9","input 1",[109,140],{"x":122,"y":141,"width":123,"height":124,"rx":125,"fill":117,"opacity":126},"160",[109,143],{"x":122,"y":144,"width":130,"height":111,"rx":131,"fill":132,"opacity":133},"182",[96,146,148],{"x":104,"y":147,"style":137},"202","input 2",[109,150],{"x":122,"y":151,"width":152,"height":111,"rx":131,"fill":117,"opacity":153},"230","120","0.18",[96,155,157],{"x":129,"y":156,"style":137},"250","submit",[96,159,161],{"x":160,"y":105,"style":106},"545","wide: label beside",[109,163],{"x":164,"y":112,"width":113,"height":114,"rx":115,"fill":116,"stroke":117,"strokeWidth":118,"opacity":119},"400",[109,166],{"x":167,"y":168,"width":169,"height":124,"rx":125,"fill":117,"opacity":126},"418","118","86",[109,171],{"x":172,"y":129,"width":173,"height":111,"rx":131,"fill":132,"opacity":133},"516","156",[96,175,138],{"x":176,"y":136,"style":137},"594",[109,178],{"x":167,"y":179,"width":169,"height":124,"rx":125,"fill":117,"opacity":126},"188",[109,181],{"x":172,"y":144,"width":173,"height":111,"rx":131,"fill":132,"opacity":133},[96,183,148],{"x":176,"y":147,"style":137},[109,185],{"x":172,"y":151,"width":152,"height":111,"rx":131,"fill":117,"opacity":153},[96,187,157],{"x":188,"y":156,"style":137},"576",[96,190,193],{"x":98,"y":191,"style":192},"316","text-anchor:middle;fill:currentColor;font:12px sans-serif;opacity:0.75","Tab order is label-free and identical: input 1, input 2, submit.",[195,196],"hr",{},[29,198,200],{"id":199},"the-complete-form","The complete form",[14,202,203],{},"Drag the frame from wide to narrow. Two thresholds fire at different moments: the paired city and postcode fields drop to one column first, then every label moves from beside its input to above it.",[205,206],"live-demo",{"name":207},"lp2-form-reflow",[209,210,215],"pre",{"className":211,"code":212,"language":213,"meta":214,"style":214},"language-html shiki shiki-themes github-light-high-contrast github-dark-high-contrast","\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n\u003Cmeta charset=\"utf-8\">\n\u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n\u003Ctitle>Container-driven form\u003C\u002Ftitle>\n\u003Cstyle>\n  body { margin: 0; padding: 1rem; font: 16px\u002F1.5 system-ui, sans-serif; }\n\n  \u002F* The form is its own container. Every rule below asks how wide this form\n     is — never how wide the window is. *\u002F\n  .signup {\n    container: form \u002F inline-size;\n    display: grid;\n    gap: 0.85rem;\n    max-inline-size: 46rem;\n  }\n\n  \u002F* Base state: label above input. This is the state a browser without\n     @container support gets, and it is the state that survives 400% zoom. *\u002F\n  .field { display: grid; gap: 0.3rem; }\n\n  .field__label { font-size: 0.9rem; font-weight: 600; }\n\n  .field__control,\n  .subgroup__item {\n    font: inherit;\n    \u002F* Form controls carry an intrinsic default width of roughly 20\n       characters. Without these two declarations a grid track will refuse\n       to shrink below it and the control overflows the container. *\u002F\n    inline-size: 100%;\n    box-sizing: border-box;\n    padding: 0.5rem 0.65rem;\n    border: 1px solid #d4d4d8;\n    border-radius: 8px;\n  }\n\n  .field__control:focus-visible,\n  .subgroup__item:focus-visible {\n    outline: 2px solid #3b6df5;\n    outline-offset: 2px;\n  }\n\n  .subgroup { display: grid; gap: 0.5rem; }\n\n  .submit {\n    font: inherit;\n    padding: 0.55rem 1.1rem;\n    border: 0;\n    border-radius: 8px;\n    background: #3b6df5;\n    color: #fff;\n  }\n\n  \u002F* Threshold 1: two fields can share a row. This is a question about the\n     pair of controls, not about label placement, so it gets its own rule. *\u002F\n  @container form (min-width: 24rem) {\n    .subgroup { grid-template-columns: 1fr 1fr; }\n  }\n\n  \u002F* Threshold 2: there is room for a label column. Only grid placement\n     changes here — no order, no grid-row, no source reshuffling. *\u002F\n  @container form (min-width: 30rem) {\n    .field {\n      grid-template-columns: 9rem minmax(0, 1fr);\n      align-items: start;\n      column-gap: 1rem;\n    }\n    \u002F* Optically align the label baseline with the input's first line. *\u002F\n    .field__label { padding-block-start: 0.55rem; text-align: end; }\n    \u002F* The actions row has no label, so place the button in column 2 to keep\n       it aligned with the inputs above it. *\u002F\n    .field--actions > .submit { grid-column: 2; justify-self: start; }\n  }\n\u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n  \u003Cform class=\"signup\" action=\"#\" method=\"post\">\n    \u003Cdiv class=\"field\">\n      \u003Clabel class=\"field__label\" for=\"name\">Full name\u003C\u002Flabel>\n      \u003Cinput class=\"field__control\" id=\"name\" name=\"name\" type=\"text\" autocomplete=\"name\">\n    \u003C\u002Fdiv>\n\n    \u003Cdiv class=\"field\">\n      \u003Clabel class=\"field__label\" for=\"mail\">Email\u003C\u002Flabel>\n      \u003Cinput class=\"field__control\" id=\"mail\" name=\"email\" type=\"email\" autocomplete=\"email\">\n    \u003C\u002Fdiv>\n\n    \u003C!-- Two controls, one conceptual field. The group is declared in the\n         markup so it survives every layout the CSS can produce. -->\n    \u003Cdiv class=\"field field--group\">\n      \u003Cspan class=\"field__label\" id=\"loc-label\">Location\u003C\u002Fspan>\n      \u003Cdiv class=\"field__control subgroup\" role=\"group\" aria-labelledby=\"loc-label\">\n        \u003Cinput class=\"subgroup__item\" type=\"text\" name=\"city\" aria-label=\"City\" autocomplete=\"address-level2\">\n        \u003Cinput class=\"subgroup__item\" type=\"text\" name=\"postcode\" aria-label=\"Postcode\" autocomplete=\"postal-code\">\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\n    \u003Cdiv class=\"field field--actions\">\n      \u003Cbutton class=\"submit\" type=\"submit\">Create account\u003C\u002Fbutton>\n    \u003C\u002Fdiv>\n  \u003C\u002Fform>\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n","html","",[37,216,217,237,257,267,285,310,324,334,394,401,408,414,423,432,446,461,476,482,487,493,499,528,533,563,568,577,585,598,604,610,616,632,645,665,685,700,705,710,718,726,746,760,765,770,796,801,809,820,838,849,862,875,888,893,898,904,910,919,943,948,953,959,965,973,981,1011,1024,1038,1044,1050,1079,1085,1091,1123,1128,1138,1147,1157,1192,1210,1240,1284,1294,1299,1314,1341,1381,1390,1395,1401,1407,1423,1450,1481,1526,1568,1578,1587,1592,1608,1636,1645,1655,1664],{"__ignoreMap":214},[218,219,222,226,230,234],"span",{"class":220,"line":221},"line",1,[218,223,225],{"class":224},"suds8","\u003C!",[218,227,229],{"class":228},"sne4z","DOCTYPE",[218,231,233],{"class":232},"s-5SL"," html",[218,235,236],{"class":224},">\n",[218,238,240,243,245,248,251,255],{"class":220,"line":239},2,[218,241,242],{"class":224},"\u003C",[218,244,213],{"class":228},[218,246,247],{"class":232}," lang",[218,249,250],{"class":224},"=",[218,252,254],{"class":253},"sT6z2","\"en\"",[218,256,236],{"class":224},[218,258,260,262,265],{"class":220,"line":259},3,[218,261,242],{"class":224},[218,263,264],{"class":228},"head",[218,266,236],{"class":224},[218,268,270,272,275,278,280,283],{"class":220,"line":269},4,[218,271,242],{"class":224},[218,273,274],{"class":228},"meta",[218,276,277],{"class":232}," charset",[218,279,250],{"class":224},[218,281,282],{"class":253},"\"utf-8\"",[218,284,236],{"class":224},[218,286,288,290,292,295,297,300,303,305,308],{"class":220,"line":287},5,[218,289,242],{"class":224},[218,291,274],{"class":228},[218,293,294],{"class":232}," name",[218,296,250],{"class":224},[218,298,299],{"class":253},"\"viewport\"",[218,301,302],{"class":232}," content",[218,304,250],{"class":224},[218,306,307],{"class":253},"\"width=device-width, initial-scale=1\"",[218,309,236],{"class":224},[218,311,313,315,317,320,322],{"class":220,"line":312},6,[218,314,242],{"class":224},[218,316,88],{"class":228},[218,318,319],{"class":224},">Container-driven form\u003C\u002F",[218,321,88],{"class":228},[218,323,236],{"class":224},[218,325,327,329,332],{"class":220,"line":326},7,[218,328,242],{"class":224},[218,330,331],{"class":228},"style",[218,333,236],{"class":224},[218,335,337,340,343,346,349,352,355,358,360,363,367,369,372,374,376,379,381,383,386,388,391],{"class":220,"line":336},8,[218,338,339],{"class":228},"  body",[218,341,342],{"class":224}," { ",[218,344,345],{"class":232},"margin",[218,347,348],{"class":224},": ",[218,350,351],{"class":232},"0",[218,353,354],{"class":224},"; ",[218,356,357],{"class":232},"padding",[218,359,348],{"class":224},[218,361,362],{"class":232},"1",[218,364,366],{"class":365},"sHUrx","rem",[218,368,354],{"class":224},[218,370,371],{"class":232},"font",[218,373,348],{"class":224},[218,375,124],{"class":232},[218,377,378],{"class":365},"px",[218,380,59],{"class":224},[218,382,118],{"class":232},[218,384,385],{"class":232}," system-ui",[218,387,63],{"class":224},[218,389,390],{"class":232},"sans-serif",[218,392,393],{"class":224},"; }\n",[218,395,397],{"class":220,"line":396},9,[218,398,400],{"emptyLinePlaceholder":399},true,"\n",[218,402,404],{"class":220,"line":403},10,[218,405,407],{"class":406},"sLBg1","  \u002F* The form is its own container. Every rule below asks how wide this form\n",[218,409,411],{"class":220,"line":410},11,[218,412,413],{"class":406},"     is — never how wide the window is. *\u002F\n",[218,415,417,420],{"class":220,"line":416},12,[218,418,419],{"class":232},"  .signup",[218,421,422],{"class":224}," {\n",[218,424,426,429],{"class":220,"line":425},13,[218,427,428],{"class":232},"    container",[218,430,431],{"class":224},": form \u002F inline-size;\n",[218,433,435,438,440,443],{"class":220,"line":434},14,[218,436,437],{"class":232},"    display",[218,439,348],{"class":224},[218,441,442],{"class":232},"grid",[218,444,445],{"class":224},";\n",[218,447,449,452,454,457,459],{"class":220,"line":448},15,[218,450,451],{"class":232},"    gap",[218,453,348],{"class":224},[218,455,456],{"class":232},"0.85",[218,458,366],{"class":365},[218,460,445],{"class":224},[218,462,464,467,469,472,474],{"class":220,"line":463},16,[218,465,466],{"class":232},"    max-inline-size",[218,468,348],{"class":224},[218,470,471],{"class":232},"46",[218,473,366],{"class":365},[218,475,445],{"class":224},[218,477,479],{"class":220,"line":478},17,[218,480,481],{"class":224},"  }\n",[218,483,485],{"class":220,"line":484},18,[218,486,400],{"emptyLinePlaceholder":399},[218,488,490],{"class":220,"line":489},19,[218,491,492],{"class":406},"  \u002F* Base state: label above input. This is the state a browser without\n",[218,494,496],{"class":220,"line":495},20,[218,497,498],{"class":406},"     @container support gets, and it is the state that survives 400% zoom. *\u002F\n",[218,500,502,505,507,510,512,514,516,519,521,524,526],{"class":220,"line":501},21,[218,503,504],{"class":232},"  .field",[218,506,342],{"class":224},[218,508,509],{"class":232},"display",[218,511,348],{"class":224},[218,513,442],{"class":232},[218,515,354],{"class":224},[218,517,518],{"class":232},"gap",[218,520,348],{"class":224},[218,522,523],{"class":232},"0.3",[218,525,366],{"class":365},[218,527,393],{"class":224},[218,529,531],{"class":220,"line":530},22,[218,532,400],{"emptyLinePlaceholder":399},[218,534,536,539,541,544,546,549,551,553,556,558,561],{"class":220,"line":535},23,[218,537,538],{"class":232},"  .field__label",[218,540,342],{"class":224},[218,542,543],{"class":232},"font-size",[218,545,348],{"class":224},[218,547,548],{"class":232},"0.9",[218,550,366],{"class":365},[218,552,354],{"class":224},[218,554,555],{"class":232},"font-weight",[218,557,348],{"class":224},[218,559,560],{"class":232},"600",[218,562,393],{"class":224},[218,564,566],{"class":220,"line":565},24,[218,567,400],{"emptyLinePlaceholder":399},[218,569,571,574],{"class":220,"line":570},25,[218,572,573],{"class":232},"  .field__control",[218,575,576],{"class":224},",\n",[218,578,580,583],{"class":220,"line":579},26,[218,581,582],{"class":232},"  .subgroup__item",[218,584,422],{"class":224},[218,586,588,591,593,596],{"class":220,"line":587},27,[218,589,590],{"class":232},"    font",[218,592,348],{"class":224},[218,594,595],{"class":232},"inherit",[218,597,445],{"class":224},[218,599,601],{"class":220,"line":600},28,[218,602,603],{"class":406},"    \u002F* Form controls carry an intrinsic default width of roughly 20\n",[218,605,607],{"class":220,"line":606},29,[218,608,609],{"class":406},"       characters. Without these two declarations a grid track will refuse\n",[218,611,613],{"class":220,"line":612},30,[218,614,615],{"class":406},"       to shrink below it and the control overflows the container. *\u002F\n",[218,617,619,622,624,627,630],{"class":220,"line":618},31,[218,620,621],{"class":232},"    inline-size",[218,623,348],{"class":224},[218,625,626],{"class":232},"100",[218,628,629],{"class":365},"%",[218,631,445],{"class":224},[218,633,635,638,640,643],{"class":220,"line":634},32,[218,636,637],{"class":232},"    box-sizing",[218,639,348],{"class":224},[218,641,642],{"class":232},"border-box",[218,644,445],{"class":224},[218,646,648,651,653,656,658,661,663],{"class":220,"line":647},33,[218,649,650],{"class":232},"    padding",[218,652,348],{"class":224},[218,654,655],{"class":232},"0.5",[218,657,366],{"class":365},[218,659,660],{"class":232}," 0.65",[218,662,366],{"class":365},[218,664,445],{"class":224},[218,666,668,671,673,675,677,680,683],{"class":220,"line":667},34,[218,669,670],{"class":232},"    border",[218,672,348],{"class":224},[218,674,362],{"class":232},[218,676,378],{"class":365},[218,678,679],{"class":232}," solid",[218,681,682],{"class":232}," #d4d4d8",[218,684,445],{"class":224},[218,686,688,691,693,696,698],{"class":220,"line":687},35,[218,689,690],{"class":232},"    border-radius",[218,692,348],{"class":224},[218,694,695],{"class":232},"8",[218,697,378],{"class":365},[218,699,445],{"class":224},[218,701,703],{"class":220,"line":702},36,[218,704,481],{"class":224},[218,706,708],{"class":220,"line":707},37,[218,709,400],{"emptyLinePlaceholder":399},[218,711,713,716],{"class":220,"line":712},38,[218,714,715],{"class":232},"  .field__control:focus-visible",[218,717,576],{"class":224},[218,719,721,724],{"class":220,"line":720},39,[218,722,723],{"class":232},"  .subgroup__item:focus-visible",[218,725,422],{"class":224},[218,727,729,732,734,737,739,741,744],{"class":220,"line":728},40,[218,730,731],{"class":232},"    outline",[218,733,348],{"class":224},[218,735,736],{"class":232},"2",[218,738,378],{"class":365},[218,740,679],{"class":232},[218,742,743],{"class":232}," #3b6df5",[218,745,445],{"class":224},[218,747,749,752,754,756,758],{"class":220,"line":748},41,[218,750,751],{"class":232},"    outline-offset",[218,753,348],{"class":224},[218,755,736],{"class":232},[218,757,378],{"class":365},[218,759,445],{"class":224},[218,761,763],{"class":220,"line":762},42,[218,764,481],{"class":224},[218,766,768],{"class":220,"line":767},43,[218,769,400],{"emptyLinePlaceholder":399},[218,771,773,776,778,780,782,784,786,788,790,792,794],{"class":220,"line":772},44,[218,774,775],{"class":232},"  .subgroup",[218,777,342],{"class":224},[218,779,509],{"class":232},[218,781,348],{"class":224},[218,783,442],{"class":232},[218,785,354],{"class":224},[218,787,518],{"class":232},[218,789,348],{"class":224},[218,791,655],{"class":232},[218,793,366],{"class":365},[218,795,393],{"class":224},[218,797,799],{"class":220,"line":798},45,[218,800,400],{"emptyLinePlaceholder":399},[218,802,804,807],{"class":220,"line":803},46,[218,805,806],{"class":232},"  .submit",[218,808,422],{"class":224},[218,810,812,814,816,818],{"class":220,"line":811},47,[218,813,590],{"class":232},[218,815,348],{"class":224},[218,817,595],{"class":232},[218,819,445],{"class":224},[218,821,823,825,827,829,831,834,836],{"class":220,"line":822},48,[218,824,650],{"class":232},[218,826,348],{"class":224},[218,828,119],{"class":232},[218,830,366],{"class":365},[218,832,833],{"class":232}," 1.1",[218,835,366],{"class":365},[218,837,445],{"class":224},[218,839,841,843,845,847],{"class":220,"line":840},49,[218,842,670],{"class":232},[218,844,348],{"class":224},[218,846,351],{"class":232},[218,848,445],{"class":224},[218,850,852,854,856,858,860],{"class":220,"line":851},50,[218,853,690],{"class":232},[218,855,348],{"class":224},[218,857,695],{"class":232},[218,859,378],{"class":365},[218,861,445],{"class":224},[218,863,865,868,870,873],{"class":220,"line":864},51,[218,866,867],{"class":232},"    background",[218,869,348],{"class":224},[218,871,872],{"class":232},"#3b6df5",[218,874,445],{"class":224},[218,876,878,881,883,886],{"class":220,"line":877},52,[218,879,880],{"class":232},"    color",[218,882,348],{"class":224},[218,884,885],{"class":232},"#fff",[218,887,445],{"class":224},[218,889,891],{"class":220,"line":890},53,[218,892,481],{"class":224},[218,894,896],{"class":220,"line":895},54,[218,897,400],{"emptyLinePlaceholder":399},[218,899,901],{"class":220,"line":900},55,[218,902,903],{"class":406},"  \u002F* Threshold 1: two fields can share a row. This is a question about the\n",[218,905,907],{"class":220,"line":906},56,[218,908,909],{"class":406},"     pair of controls, not about label placement, so it gets its own rule. *\u002F\n",[218,911,913,916],{"class":220,"line":912},57,[218,914,915],{"class":365},"  @container",[218,917,918],{"class":224}," form (min-width: 24rem) {\n",[218,920,922,925,927,929,931,933,936,939,941],{"class":220,"line":921},58,[218,923,924],{"class":232},"    .subgroup",[218,926,342],{"class":224},[218,928,54],{"class":232},[218,930,348],{"class":224},[218,932,362],{"class":232},[218,934,935],{"class":365},"fr",[218,937,938],{"class":232}," 1",[218,940,935],{"class":365},[218,942,393],{"class":224},[218,944,946],{"class":220,"line":945},59,[218,947,481],{"class":224},[218,949,951],{"class":220,"line":950},60,[218,952,400],{"emptyLinePlaceholder":399},[218,954,956],{"class":220,"line":955},61,[218,957,958],{"class":406},"  \u002F* Threshold 2: there is room for a label column. Only grid placement\n",[218,960,962],{"class":220,"line":961},62,[218,963,964],{"class":406},"     changes here — no order, no grid-row, no source reshuffling. *\u002F\n",[218,966,968,970],{"class":220,"line":967},63,[218,969,915],{"class":365},[218,971,972],{"class":224}," form (min-width: 30rem) {\n",[218,974,976,979],{"class":220,"line":975},64,[218,977,978],{"class":232},"    .field",[218,980,422],{"class":224},[218,982,984,987,989,992,994,997,1000,1002,1004,1006,1008],{"class":220,"line":983},65,[218,985,986],{"class":232},"      grid-template-columns",[218,988,348],{"class":224},[218,990,991],{"class":232},"9",[218,993,366],{"class":365},[218,995,996],{"class":232}," minmax",[218,998,999],{"class":224},"(",[218,1001,351],{"class":232},[218,1003,63],{"class":224},[218,1005,362],{"class":232},[218,1007,935],{"class":365},[218,1009,1010],{"class":224},");\n",[218,1012,1014,1017,1019,1022],{"class":220,"line":1013},66,[218,1015,1016],{"class":232},"      align-items",[218,1018,348],{"class":224},[218,1020,1021],{"class":232},"start",[218,1023,445],{"class":224},[218,1025,1027,1030,1032,1034,1036],{"class":220,"line":1026},67,[218,1028,1029],{"class":232},"      column-gap",[218,1031,348],{"class":224},[218,1033,362],{"class":232},[218,1035,366],{"class":365},[218,1037,445],{"class":224},[218,1039,1041],{"class":220,"line":1040},68,[218,1042,1043],{"class":224},"    }\n",[218,1045,1047],{"class":220,"line":1046},69,[218,1048,1049],{"class":406},"    \u002F* Optically align the label baseline with the input's first line. *\u002F\n",[218,1051,1053,1056,1058,1061,1063,1065,1067,1069,1072,1074,1077],{"class":220,"line":1052},70,[218,1054,1055],{"class":232},"    .field__label",[218,1057,342],{"class":224},[218,1059,1060],{"class":232},"padding-block-start",[218,1062,348],{"class":224},[218,1064,119],{"class":232},[218,1066,366],{"class":365},[218,1068,354],{"class":224},[218,1070,1071],{"class":232},"text-align",[218,1073,348],{"class":224},[218,1075,1076],{"class":232},"end",[218,1078,393],{"class":224},[218,1080,1082],{"class":220,"line":1081},71,[218,1083,1084],{"class":406},"    \u002F* The actions row has no label, so place the button in column 2 to keep\n",[218,1086,1088],{"class":220,"line":1087},72,[218,1089,1090],{"class":406},"       it aligned with the inputs above it. *\u002F\n",[218,1092,1094,1097,1100,1103,1105,1108,1110,1112,1114,1117,1119,1121],{"class":220,"line":1093},73,[218,1095,1096],{"class":232},"    .field--actions",[218,1098,1099],{"class":365}," >",[218,1101,1102],{"class":232}," .submit",[218,1104,342],{"class":224},[218,1106,1107],{"class":232},"grid-column",[218,1109,348],{"class":224},[218,1111,736],{"class":232},[218,1113,354],{"class":224},[218,1115,1116],{"class":232},"justify-self",[218,1118,348],{"class":224},[218,1120,1021],{"class":232},[218,1122,393],{"class":224},[218,1124,1126],{"class":220,"line":1125},74,[218,1127,481],{"class":224},[218,1129,1131,1134,1136],{"class":220,"line":1130},75,[218,1132,1133],{"class":224},"\u003C\u002F",[218,1135,331],{"class":228},[218,1137,236],{"class":224},[218,1139,1141,1143,1145],{"class":220,"line":1140},76,[218,1142,1133],{"class":224},[218,1144,264],{"class":228},[218,1146,236],{"class":224},[218,1148,1150,1152,1155],{"class":220,"line":1149},77,[218,1151,242],{"class":224},[218,1153,1154],{"class":228},"body",[218,1156,236],{"class":224},[218,1158,1160,1163,1166,1169,1171,1174,1177,1179,1182,1185,1187,1190],{"class":220,"line":1159},78,[218,1161,1162],{"class":224},"  \u003C",[218,1164,1165],{"class":228},"form",[218,1167,1168],{"class":232}," class",[218,1170,250],{"class":224},[218,1172,1173],{"class":253},"\"signup\"",[218,1175,1176],{"class":232}," action",[218,1178,250],{"class":224},[218,1180,1181],{"class":253},"\"#\"",[218,1183,1184],{"class":232}," method",[218,1186,250],{"class":224},[218,1188,1189],{"class":253},"\"post\"",[218,1191,236],{"class":224},[218,1193,1195,1198,1201,1203,1205,1208],{"class":220,"line":1194},79,[218,1196,1197],{"class":224},"    \u003C",[218,1199,1200],{"class":228},"div",[218,1202,1168],{"class":232},[218,1204,250],{"class":224},[218,1206,1207],{"class":253},"\"field\"",[218,1209,236],{"class":224},[218,1211,1213,1216,1218,1220,1222,1225,1228,1230,1233,1236,1238],{"class":220,"line":1212},80,[218,1214,1215],{"class":224},"      \u003C",[218,1217,46],{"class":228},[218,1219,1168],{"class":232},[218,1221,250],{"class":224},[218,1223,1224],{"class":253},"\"field__label\"",[218,1226,1227],{"class":232}," for",[218,1229,250],{"class":224},[218,1231,1232],{"class":253},"\"name\"",[218,1234,1235],{"class":224},">Full name\u003C\u002F",[218,1237,46],{"class":228},[218,1239,236],{"class":224},[218,1241,1243,1245,1247,1249,1251,1254,1257,1259,1261,1263,1265,1267,1270,1272,1275,1278,1280,1282],{"class":220,"line":1242},81,[218,1244,1215],{"class":224},[218,1246,50],{"class":228},[218,1248,1168],{"class":232},[218,1250,250],{"class":224},[218,1252,1253],{"class":253},"\"field__control\"",[218,1255,1256],{"class":232}," id",[218,1258,250],{"class":224},[218,1260,1232],{"class":253},[218,1262,294],{"class":232},[218,1264,250],{"class":224},[218,1266,1232],{"class":253},[218,1268,1269],{"class":232}," type",[218,1271,250],{"class":224},[218,1273,1274],{"class":253},"\"text\"",[218,1276,1277],{"class":232}," autocomplete",[218,1279,250],{"class":224},[218,1281,1232],{"class":253},[218,1283,236],{"class":224},[218,1285,1287,1290,1292],{"class":220,"line":1286},82,[218,1288,1289],{"class":224},"    \u003C\u002F",[218,1291,1200],{"class":228},[218,1293,236],{"class":224},[218,1295,1297],{"class":220,"line":1296},83,[218,1298,400],{"emptyLinePlaceholder":399},[218,1300,1302,1304,1306,1308,1310,1312],{"class":220,"line":1301},84,[218,1303,1197],{"class":224},[218,1305,1200],{"class":228},[218,1307,1168],{"class":232},[218,1309,250],{"class":224},[218,1311,1207],{"class":253},[218,1313,236],{"class":224},[218,1315,1317,1319,1321,1323,1325,1327,1329,1331,1334,1337,1339],{"class":220,"line":1316},85,[218,1318,1215],{"class":224},[218,1320,46],{"class":228},[218,1322,1168],{"class":232},[218,1324,250],{"class":224},[218,1326,1224],{"class":253},[218,1328,1227],{"class":232},[218,1330,250],{"class":224},[218,1332,1333],{"class":253},"\"mail\"",[218,1335,1336],{"class":224},">Email\u003C\u002F",[218,1338,46],{"class":228},[218,1340,236],{"class":224},[218,1342,1344,1346,1348,1350,1352,1354,1356,1358,1360,1362,1364,1367,1369,1371,1373,1375,1377,1379],{"class":220,"line":1343},86,[218,1345,1215],{"class":224},[218,1347,50],{"class":228},[218,1349,1168],{"class":232},[218,1351,250],{"class":224},[218,1353,1253],{"class":253},[218,1355,1256],{"class":232},[218,1357,250],{"class":224},[218,1359,1333],{"class":253},[218,1361,294],{"class":232},[218,1363,250],{"class":224},[218,1365,1366],{"class":253},"\"email\"",[218,1368,1269],{"class":232},[218,1370,250],{"class":224},[218,1372,1366],{"class":253},[218,1374,1277],{"class":232},[218,1376,250],{"class":224},[218,1378,1366],{"class":253},[218,1380,236],{"class":224},[218,1382,1384,1386,1388],{"class":220,"line":1383},87,[218,1385,1289],{"class":224},[218,1387,1200],{"class":228},[218,1389,236],{"class":224},[218,1391,1393],{"class":220,"line":1392},88,[218,1394,400],{"emptyLinePlaceholder":399},[218,1396,1398],{"class":220,"line":1397},89,[218,1399,1400],{"class":406},"    \u003C!-- Two controls, one conceptual field. The group is declared in the\n",[218,1402,1404],{"class":220,"line":1403},90,[218,1405,1406],{"class":406},"         markup so it survives every layout the CSS can produce. -->\n",[218,1408,1410,1412,1414,1416,1418,1421],{"class":220,"line":1409},91,[218,1411,1197],{"class":224},[218,1413,1200],{"class":228},[218,1415,1168],{"class":232},[218,1417,250],{"class":224},[218,1419,1420],{"class":253},"\"field field--group\"",[218,1422,236],{"class":224},[218,1424,1426,1428,1430,1432,1434,1436,1438,1440,1443,1446,1448],{"class":220,"line":1425},92,[218,1427,1215],{"class":224},[218,1429,218],{"class":228},[218,1431,1168],{"class":232},[218,1433,250],{"class":224},[218,1435,1224],{"class":253},[218,1437,1256],{"class":232},[218,1439,250],{"class":224},[218,1441,1442],{"class":253},"\"loc-label\"",[218,1444,1445],{"class":224},">Location\u003C\u002F",[218,1447,218],{"class":228},[218,1449,236],{"class":224},[218,1451,1453,1455,1457,1459,1461,1464,1467,1469,1472,1475,1477,1479],{"class":220,"line":1452},93,[218,1454,1215],{"class":224},[218,1456,1200],{"class":228},[218,1458,1168],{"class":232},[218,1460,250],{"class":224},[218,1462,1463],{"class":253},"\"field__control subgroup\"",[218,1465,1466],{"class":232}," role",[218,1468,250],{"class":224},[218,1470,1471],{"class":253},"\"group\"",[218,1473,1474],{"class":232}," aria-labelledby",[218,1476,250],{"class":224},[218,1478,1442],{"class":253},[218,1480,236],{"class":224},[218,1482,1484,1487,1489,1491,1493,1496,1498,1500,1502,1504,1506,1509,1512,1514,1517,1519,1521,1524],{"class":220,"line":1483},94,[218,1485,1486],{"class":224},"        \u003C",[218,1488,50],{"class":228},[218,1490,1168],{"class":232},[218,1492,250],{"class":224},[218,1494,1495],{"class":253},"\"subgroup__item\"",[218,1497,1269],{"class":232},[218,1499,250],{"class":224},[218,1501,1274],{"class":253},[218,1503,294],{"class":232},[218,1505,250],{"class":224},[218,1507,1508],{"class":253},"\"city\"",[218,1510,1511],{"class":232}," aria-label",[218,1513,250],{"class":224},[218,1515,1516],{"class":253},"\"City\"",[218,1518,1277],{"class":232},[218,1520,250],{"class":224},[218,1522,1523],{"class":253},"\"address-level2\"",[218,1525,236],{"class":224},[218,1527,1529,1531,1533,1535,1537,1539,1541,1543,1545,1547,1549,1552,1554,1556,1559,1561,1563,1566],{"class":220,"line":1528},95,[218,1530,1486],{"class":224},[218,1532,50],{"class":228},[218,1534,1168],{"class":232},[218,1536,250],{"class":224},[218,1538,1495],{"class":253},[218,1540,1269],{"class":232},[218,1542,250],{"class":224},[218,1544,1274],{"class":253},[218,1546,294],{"class":232},[218,1548,250],{"class":224},[218,1550,1551],{"class":253},"\"postcode\"",[218,1553,1511],{"class":232},[218,1555,250],{"class":224},[218,1557,1558],{"class":253},"\"Postcode\"",[218,1560,1277],{"class":232},[218,1562,250],{"class":224},[218,1564,1565],{"class":253},"\"postal-code\"",[218,1567,236],{"class":224},[218,1569,1571,1574,1576],{"class":220,"line":1570},96,[218,1572,1573],{"class":224},"      \u003C\u002F",[218,1575,1200],{"class":228},[218,1577,236],{"class":224},[218,1579,1581,1583,1585],{"class":220,"line":1580},97,[218,1582,1289],{"class":224},[218,1584,1200],{"class":228},[218,1586,236],{"class":224},[218,1588,1590],{"class":220,"line":1589},98,[218,1591,400],{"emptyLinePlaceholder":399},[218,1593,1595,1597,1599,1601,1603,1606],{"class":220,"line":1594},99,[218,1596,1197],{"class":224},[218,1598,1200],{"class":228},[218,1600,1168],{"class":232},[218,1602,250],{"class":224},[218,1604,1605],{"class":253},"\"field field--actions\"",[218,1607,236],{"class":224},[218,1609,1611,1613,1616,1618,1620,1623,1625,1627,1629,1632,1634],{"class":220,"line":1610},100,[218,1612,1215],{"class":224},[218,1614,1615],{"class":228},"button",[218,1617,1168],{"class":232},[218,1619,250],{"class":224},[218,1621,1622],{"class":253},"\"submit\"",[218,1624,1269],{"class":232},[218,1626,250],{"class":224},[218,1628,1622],{"class":253},[218,1630,1631],{"class":224},">Create account\u003C\u002F",[218,1633,1615],{"class":228},[218,1635,236],{"class":224},[218,1637,1639,1641,1643],{"class":220,"line":1638},101,[218,1640,1289],{"class":224},[218,1642,1200],{"class":228},[218,1644,236],{"class":224},[218,1646,1648,1651,1653],{"class":220,"line":1647},102,[218,1649,1650],{"class":224},"  \u003C\u002F",[218,1652,1165],{"class":228},[218,1654,236],{"class":224},[218,1656,1658,1660,1662],{"class":220,"line":1657},103,[218,1659,1133],{"class":224},[218,1661,1154],{"class":228},[218,1663,236],{"class":224},[218,1665,1667,1669,1671],{"class":220,"line":1666},104,[218,1668,1133],{"class":224},[218,1670,213],{"class":228},[218,1672,236],{"class":224},[195,1674],{},[29,1676,1678],{"id":1677},"key-technique-place-never-reorder","Key technique: place, never reorder",[14,1680,1681,1682,1685,1686,1689,1690,1693],{},"The whole reflow is one property. In the base state ",[37,1683,1684],{},".field"," is a single-column grid, so its two children stack in source order. In the wide state it gains ",[37,1687,1688],{},"grid-template-columns: 9rem minmax(0, 1fr)",", and its two children flow into columns one and two — still in source order. The label was already first in the DOM, so it lands in the label column without anyone naming a row, a column, or an ",[37,1691,1692],{},"order"," value.",[14,1695,1696,1697,1701,1702,1705,1706,1709],{},"That is the discipline worth internalising for every form: ",[1698,1699,1700],"strong",{},"a field's markup must already be in the order you want it read, and every layout state must be reachable by auto-placement alone."," The moment you reach for ",[37,1703,1704],{},"grid-row: 1"," or ",[37,1707,1708],{},"order: -1"," to drag something back into position, the visual sequence and the focus sequence have diverged, and a keyboard user is now Tabbing through your form in a different order than the one they can see.",[14,1711,1712,1713,1716,1717,1720,1721,1724,1725,1728,1729,1732,1733,1737],{},"The ",[37,1714,1715],{},"minmax(0, 1fr)"," on the input column matters more than it looks. A grid track's default minimum is ",[37,1718,1719],{},"auto",", which resolves to the item's min-content size — and an ",[37,1722,1723],{},"\u003Cinput>"," reports a min-content size derived from its ",[37,1726,1727],{},"size"," attribute default, historically around twenty characters. Leave the track as plain ",[37,1730,1731],{},"1fr"," and a narrow form will simply overflow rather than shrink; the general form of this problem is unpacked in ",[18,1734,1736],{"href":1735},"\u002Fmastering-container-queries-responsive-layouts\u002Fintrinsic-sizing-techniques\u002Fpreventing-flex-and-grid-overflow\u002F","preventing flex and grid overflow",".",[14,1739,1740,1741,1743],{},"Note also which state is the base. Labels-above is written as the default and labels-beside is the enhancement, not the other way round. That ordering means the layout that works in the most constrained situation — narrow container, no ",[37,1742,39],{}," support, heavy zoom — is the one that needs no rules to fire.",[195,1745],{},[29,1747,1749],{"id":1748},"variation-focus-context-that-survives-the-reflow","Variation: focus context that survives the reflow",[14,1751,1752,1753,1756],{},"Because the field wrapper is a real element in both states, it can carry state styling that reads correctly in either arrangement. ",[37,1754,1755],{},":focus-within"," on the wrapper lets the label respond when its own input takes focus, which is genuinely useful when the label is a full column away:",[209,1758,1762],{"className":1759,"code":1760,"language":1761,"meta":214,"style":214},"language-css shiki shiki-themes github-light-high-contrast github-dark-high-contrast",".field:focus-within > .field__label {\n  color: #3b6df5;\n}\n\n@media (prefers-reduced-motion: no-preference) {\n  .field__label { transition: color 150ms ease; }\n}\n\n\u002F* An invalid control after the user has interacted with it. :user-invalid\n   waits for interaction, unlike :invalid, which flags empty required\n   fields on first paint. *\u002F\n.field__control:user-invalid {\n  border-color: #b42318;\n}\n.field:has(.field__control:user-invalid) > .field__label {\n  color: #b42318;\n}\n","css",[37,1763,1764,1776,1787,1792,1796,1804,1829,1833,1837,1842,1847,1852,1865,1877,1881,1904,1914],{"__ignoreMap":214},[218,1765,1766,1769,1771,1774],{"class":220,"line":221},[218,1767,1768],{"class":232},".field:focus-within",[218,1770,1099],{"class":365},[218,1772,1773],{"class":232}," .field__label",[218,1775,422],{"class":224},[218,1777,1778,1781,1783,1785],{"class":220,"line":239},[218,1779,1780],{"class":232},"  color",[218,1782,348],{"class":224},[218,1784,872],{"class":232},[218,1786,445],{"class":224},[218,1788,1789],{"class":220,"line":259},[218,1790,1791],{"class":224},"}\n",[218,1793,1794],{"class":220,"line":269},[218,1795,400],{"emptyLinePlaceholder":399},[218,1797,1798,1801],{"class":220,"line":287},[218,1799,1800],{"class":365},"@media",[218,1802,1803],{"class":224}," (prefers-reduced-motion: no-preference) {\n",[218,1805,1806,1808,1810,1813,1815,1818,1821,1824,1827],{"class":220,"line":312},[218,1807,538],{"class":232},[218,1809,342],{"class":224},[218,1811,1812],{"class":232},"transition",[218,1814,348],{"class":224},[218,1816,1817],{"class":232},"color",[218,1819,1820],{"class":232}," 150",[218,1822,1823],{"class":365},"ms",[218,1825,1826],{"class":232}," ease",[218,1828,393],{"class":224},[218,1830,1831],{"class":220,"line":326},[218,1832,1791],{"class":224},[218,1834,1835],{"class":220,"line":336},[218,1836,400],{"emptyLinePlaceholder":399},[218,1838,1839],{"class":220,"line":396},[218,1840,1841],{"class":406},"\u002F* An invalid control after the user has interacted with it. :user-invalid\n",[218,1843,1844],{"class":220,"line":403},[218,1845,1846],{"class":406},"   waits for interaction, unlike :invalid, which flags empty required\n",[218,1848,1849],{"class":220,"line":410},[218,1850,1851],{"class":406},"   fields on first paint. *\u002F\n",[218,1853,1854,1857,1860,1863],{"class":220,"line":416},[218,1855,1856],{"class":232},".field__control",[218,1858,1859],{"class":224},":",[218,1861,1862],{"class":228},"user-invalid",[218,1864,422],{"class":224},[218,1866,1867,1870,1872,1875],{"class":220,"line":425},[218,1868,1869],{"class":232},"  border-color",[218,1871,348],{"class":224},[218,1873,1874],{"class":232},"#b42318",[218,1876,445],{"class":224},[218,1878,1879],{"class":220,"line":434},[218,1880,1791],{"class":224},[218,1882,1883,1886,1888,1890,1892,1894,1897,1900,1902],{"class":220,"line":448},[218,1884,1885],{"class":232},".field:has",[218,1887,999],{"class":224},[218,1889,1856],{"class":232},[218,1891,1859],{"class":224},[218,1893,1862],{"class":228},[218,1895,1896],{"class":224},") ",[218,1898,1899],{"class":365},">",[218,1901,1773],{"class":232},[218,1903,422],{"class":224},[218,1905,1906,1908,1910,1912],{"class":220,"line":463},[218,1907,1780],{"class":232},[218,1909,348],{"class":224},[218,1911,1874],{"class":232},[218,1913,445],{"class":224},[218,1915,1916],{"class":220,"line":478},[218,1917,1791],{"class":224},[14,1919,1920,1921,1924,1925,1929,1930,1737],{},"Colour alone must never be the only signal — pair it with a text error message referenced by ",[37,1922,1923],{},"aria-describedby",". Related patterns for state feedback are collected in ",[18,1926,1928],{"href":1927},"\u002Fcss-only-micro-interactions-animations\u002Fhover-focus-state-design\u002Ffocus-within-form-patterns\u002F","focus-within form patterns",", and the transition guard follows the advice in ",[18,1931,1933],{"href":1932},"\u002Fcss-only-micro-interactions-animations\u002Faccessibility-in-css-animations\u002Freducing-motion-preferences-in-css\u002F","reducing motion preferences in CSS",[195,1935],{},[29,1937,1939],{"id":1938},"browser-support","Browser support",[14,1941,1942,1944,1945,1948,1949,1952,1953,1956,1957,1959],{},[37,1943,39],{}," and ",[37,1946,1947],{},"container-type: inline-size"," shipped in Chrome 105, Edge 105, Safari 16.0 and Firefox 110. ",[37,1950,1951],{},":user-invalid"," is available in Chrome 119, Edge 119, Safari 16.5 and Firefox 88, and ",[37,1954,1955],{},":has()"," in Chrome 105, Edge 105, Safari 15.4 and Firefox 121 — both degrade to simply not applying, which costs a colour change rather than a layout. ",[37,1958,1755],{}," predates all of them and is supported in every current engine.",[14,1961,1962,1963,1966,1967,1737],{},"Because labels-above is the base state, an engine that ignores every rule above still renders a correct, usable form. No ",[37,1964,1965],{},"@supports"," guard is needed for correctness; add one only if you want a viewport-based approximation of the two-column state, as described in ",[18,1968,1970],{"href":1969},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-fallbacks\u002Fhandling-container-query-fallbacks-for-older-browsers\u002F","handling container query fallbacks for older browsers",[195,1972],{},[29,1974,1976],{"id":1975},"faq","FAQ",[14,1978,1979,1982,1983,1985,1986,1988],{},[1698,1980,1981],{},"Does moving a label with CSS grid break its association with the input?","\nNo. The association comes from the label's ",[37,1984,58],{}," attribute matching the input's ",[37,1987,62],{},", which is a DOM relationship that CSS cannot touch. Grid placement only moves the painted boxes.",[14,1990,1991,1994,1995,1998,1999,2002,2003,2005],{},[1698,1992,1993],{},"Why do my inputs overflow the form when it gets narrow?","\nForm controls have a default intrinsic width of around twenty characters that does not shrink, and a grid or flex item will not shrink below its min-content size. Set ",[37,1996,1997],{},"width: 100%"," with ",[37,2000,2001],{},"box-sizing: border-box"," on the control and ",[37,2004,1715],{}," on the track it sits in.",[14,2007,2008,2011],{},[1698,2009,2010],{},"Should the label sit above or beside the input at wide widths?","\nLabels above the input are faster to scan and never truncate, so they are the safer default. Labels beside the input save vertical space in dense settings forms, which is why making the choice a container query rather than a hardcoded decision is useful.",[14,2013,2014,2017,2018,2021,2022,2024,2025,2028,2029,2032],{},[1698,2015,2016],{},"How do I group two fields onto one row accessibly?","\nWrap them in an element with ",[37,2019,2020],{},"role=\"group\""," and an ",[37,2023,66],{}," pointing at the group's visible heading, or use a ",[37,2026,2027],{},"fieldset"," with a ",[37,2030,2031],{},"legend",". The grouping must exist in the markup, because a two-column grid conveys nothing to a screen reader.",[29,2034,2036],{"id":2035},"related","Related",[2038,2039,2040,2048,2055,2061,2067],"ul",{},[2041,2042,2043,2047],"li",{},[18,2044,2046],{"href":2045},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns\u002Fcontainer-query-sidebar-layouts\u002F","Container Query Sidebar Layouts"," — the same place-don't-reorder rule at panel scale.",[2041,2049,2050,2054],{},[18,2051,2053],{"href":2052},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns\u002Fbuilding-responsive-cards-with-container-queries\u002F","Building Responsive Cards with Container Queries"," — the canonical two-threshold component.",[2041,2056,2057,2060],{},[18,2058,2059],{"href":20},"Responsive Component Patterns"," — the parent guide for this family of components.",[2041,2062,2063,2066],{},[18,2064,2065],{"href":1927},"Focus-within Form Patterns"," — state feedback that works in either layout.",[2041,2068,2069,2073],{},[18,2070,2072],{"href":2071},"\u002Fcss-only-micro-interactions-animations\u002Faccessibility-in-css-animations\u002Fcreating-accessible-focus-indicators\u002F","Creating Accessible Focus Indicators"," — focus rings that stay visible against input borders.",[331,2075,2076],{},"html pre.shiki code .suds8, html code.shiki .suds8{--shiki-default:#0E1116;--shiki-dark:#F0F3F6}html pre.shiki code .sne4z, html code.shiki .sne4z{--shiki-default:#024C1A;--shiki-dark:#72F088}html pre.shiki code .s-5SL, html code.shiki .s-5SL{--shiki-default:#023B95;--shiki-dark:#91CBFF}html pre.shiki code .sT6z2, html code.shiki .sT6z2{--shiki-default:#032563;--shiki-dark:#ADDCFF}html pre.shiki code .sHUrx, html code.shiki .sHUrx{--shiki-default:#A0111F;--shiki-dark:#FF9492}html pre.shiki code .sLBg1, html code.shiki .sLBg1{--shiki-default:#66707B;--shiki-dark:#BDC4CC}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 .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);}",{"title":214,"searchDepth":239,"depth":239,"links":2078},[2079,2080,2081,2082,2083,2084,2085],{"id":31,"depth":239,"text":32},{"id":199,"depth":239,"text":200},{"id":1677,"depth":239,"text":1678},{"id":1748,"depth":239,"text":1749},{"id":1938,"depth":239,"text":1939},{"id":1975,"depth":239,"text":1976},{"id":2035,"depth":239,"text":2036},"Reflow form labels from beside the input to above it using the form's own width, keeping label association, grouping and focus order intact through the switch.","md",{"pageTitle":2089,"datePublished":2090,"dateModified":2090,"faq":2091},"Responsive Forms with Container Queries","2026-07-20",[2092,2094,2096,2098],{"q":1981,"a":2093},"No. The association comes from the label's for attribute matching the input's id, which is a DOM relationship that CSS cannot touch. Grid placement only moves the painted boxes.",{"q":1993,"a":2095},"Form controls have a default intrinsic width of around twenty characters that does not shrink, and a grid or flex item will not shrink below its min-content size. Set width 100% with box-sizing border-box on the control and minmax(0, 1fr) on the track it sits in.",{"q":2010,"a":2097},"Labels above the input are faster to scan and never truncate, so they are the safer default. Labels beside the input save vertical space in dense settings forms, which is why making the choice a container query rather than a hardcoded decision is useful.",{"q":2016,"a":2099},"Wrap them in an element with role group and an aria-labelledby pointing at the group's visible heading, or use a fieldset with a legend. The grouping must exist in the markup, because a two-column grid conveys nothing to a screen reader.","\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns\u002Fresponsive-forms-with-container-queries",{"title":5,"description":2086},"mastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns\u002Fresponsive-forms-with-container-queries\u002Findex","kCNYYp3Mdu8g5b3P1xpMwPX0f6aZN2aSjy9jklCiatY",[2105,2108,2111,2114,2117,2120,2123,2126,2129,2132,2135,2138,2141,2144,2147,2150,2153,2156,2159,2162,2165,2168,2171,2174,2177,2180,2183,2186,2189,2192,2195,2198,2201,2204,2207,2210,2213,2216,2219,2222,2225,2228,2231,2234,2237,2240,2243,2245,2248,2251,2254,2257,2260,2263,2266,2269,2272,2275,2278,2281,2284,2287,2290,2293,2296,2299,2302,2305,2308,2311,2314,2316,2319,2322,2325,2328,2331,2334,2337,2340,2343,2346,2349,2350,2353,2356,2359,2362],{"path":2106,"title":2107},"\u002Fcss-only-micro-interactions-animations\u002Faccessibility-in-css-animations\u002Fcreating-accessible-focus-indicators","Creating Accessible Focus Indicators: Building a Ring That Survives Any Background",{"path":2109,"title":2110},"\u002Fcss-only-micro-interactions-animations\u002Faccessibility-in-css-animations","Accessibility in CSS Animations: Patterns, Specs & Best Practices",{"path":2112,"title":2113},"\u002Fcss-only-micro-interactions-animations\u002Faccessibility-in-css-animations\u002Fprefers-reduced-motion-recipes","prefers-reduced-motion Recipes: A Reduction for Every Common Effect",{"path":2115,"title":2116},"\u002Fcss-only-micro-interactions-animations\u002Faccessibility-in-css-animations\u002Freducing-motion-preferences-in-css","Reducing Motion Preferences in CSS: How the Setting Becomes a Media Feature",{"path":2118,"title":2119},"\u002Fcss-only-micro-interactions-animations\u002Faccessibility-in-css-animations\u002Ftarget-size-and-pointer-accessibility","Target Size and Pointer Accessibility: Meeting 2.5.8 Without Redesigning",{"path":2121,"title":2122},"\u002Fcss-only-micro-interactions-animations\u002Faccessibility-in-css-animations\u002Fvestibular-safe-animation-patterns","Vestibular-Safe Animation Patterns: Why Some Motion Makes People Sick",{"path":2124,"title":2125},"\u002Fcss-only-micro-interactions-animations\u002Faccessibility-in-css-animations\u002Fwcag-motion-success-criteria","WCAG Motion Success Criteria: What Each One Actually Requires",{"path":2127,"title":2128},"\u002Fcss-only-micro-interactions-animations\u002Fcontainer-aware-motion\u002Fcontainer-query-hover-affordances","Container Query Hover Affordances: When Narrow Means Persistent, Not Hidden",{"path":2130,"title":2131},"\u002Fcss-only-micro-interactions-animations\u002Fcontainer-aware-motion","Container-Aware Motion: Animation Sized by the Space a Component Actually Has",{"path":2133,"title":2134},"\u002Fcss-only-micro-interactions-animations\u002Fcontainer-aware-motion\u002Fmotion-that-scales-with-container-size","Motion That Scales with Container Size: cqi, cqb, and Derived Durations",{"path":2136,"title":2137},"\u002Fcss-only-micro-interactions-animations\u002Fcontainer-aware-motion\u002Fsuppressing-motion-in-small-containers","Suppressing Motion in Small Containers: Deliberately Animating Nothing",{"path":2139,"title":2140},"\u002Fcss-only-micro-interactions-animations\u002Fcss-animation-vs-web-animations-api","CSS Animation vs the Web Animations API: A Decision Guide",{"path":2142,"title":2143},"\u002Fcss-only-micro-interactions-animations\u002Fcss-animation-vs-web-animations-api\u002Fwhen-to-use-javascript-animation","When to Use JavaScript Instead of CSS for Animation",{"path":2145,"title":2146},"\u002Fcss-only-micro-interactions-animations\u002Fcss-custom-properties-architecture\u002Fanimating-custom-properties-with-at-property","Animating Custom Properties with @property: Typed Variables That Interpolate",{"path":2148,"title":2149},"\u002Fcss-only-micro-interactions-animations\u002Fcss-custom-properties-architecture\u002Ffluid-spacing-tokens-driving-transition-durations","Fluid Spacing Tokens That Drive Transition Durations",{"path":2151,"title":2152},"\u002Fcss-only-micro-interactions-animations\u002Fcss-custom-properties-architecture","CSS Custom Properties Architecture: Scalable Design Systems & Dynamic UI",{"path":2154,"title":2155},"\u002Fcss-only-micro-interactions-animations\u002Fcss-custom-properties-architecture\u002Fregistered-properties-and-type-safety","Registered Properties and Type Safety: @property as a Contract for Design Tokens",{"path":2157,"title":2158},"\u002Fcss-only-micro-interactions-animations\u002Fcss-transition-fundamentals\u002Fcss-transition-timing-functions","CSS Transition Timing Functions: ease, cubic-bezier(), steps() and linear()",{"path":2160,"title":2161},"\u002Fcss-only-micro-interactions-animations\u002Fcss-transition-fundamentals","CSS Transition Fundamentals: Architecture, Performance & Patterns",{"path":2163,"title":2164},"\u002Fcss-only-micro-interactions-animations\u002Fcss-transition-fundamentals\u002Fstarting-style-entry-animations","@starting-style: Animating an Element's Very First Style Change",{"path":2166,"title":2167},"\u002Fcss-only-micro-interactions-animations\u002Fcss-transition-fundamentals\u002Ftransitioning-display-with-allow-discrete","Transitioning display with transition-behavior: allow-discrete and @starting-style",{"path":2169,"title":2170},"\u002Fcss-only-micro-interactions-animations\u002Fhover-focus-state-design\u002Faccessible-css-only-tooltips","Accessible CSS-Only Tooltips and Hover Cards With  and ",{"path":2172,"title":2173},"\u002Fcss-only-micro-interactions-animations\u002Fhover-focus-state-design\u002Ffocus-visible-vs-focus-polyfill-alternatives"," vs :focus: Why It Replaced the Focus-Ring Polyfill",{"path":2175,"title":2176},"\u002Fcss-only-micro-interactions-animations\u002Fhover-focus-state-design\u002Ffocus-within-form-patterns"," Form Patterns: Styling a Group From the Field Inside It",{"path":2178,"title":2179},"\u002Fcss-only-micro-interactions-animations\u002Fhover-focus-state-design","Hover & Focus State Design: Spec-Compliant Patterns for Modern UIs",{"path":2181,"title":2182},"\u002Fcss-only-micro-interactions-animations\u002Fhover-focus-state-design\u002Fpointer-and-hover-media-queries","Pointer and Hover Media Queries: Gating Affordances by Input Capability",{"path":2184,"title":2185},"\u002Fcss-only-micro-interactions-animations\u002Fhover-focus-state-design\u002Fsmooth-hover-effects-without-javascript","Smooth Hover Effects Without JavaScript: CSS-Only Patterns for Modern UI",{"path":2187,"title":2188},"\u002Fcss-only-micro-interactions-animations","CSS-Only Micro-Interactions & Animations: Architecture, Performance & Implementation",{"path":2190,"title":2191},"\u002Fcss-only-micro-interactions-animations\u002Fkeyframe-animation-patterns\u002Fcontainer-query-triggered-keyframe-animations","Container-Query-Triggered Keyframe Animations: Animate Differently per Available Space",{"path":2193,"title":2194},"\u002Fcss-only-micro-interactions-animations\u002Fkeyframe-animation-patterns\u002Fcss-only-accordions-and-disclosure","CSS-Only Accordions and Disclosure Widgets with details and summary",{"path":2196,"title":2197},"\u002Fcss-only-micro-interactions-animations\u002Fkeyframe-animation-patterns\u002Fcss-only-loading-spinners-and-skeletons","CSS-Only Loading Spinners and Skeleton Shimmer Screens with @keyframes",{"path":2199,"title":2200},"\u002Fcss-only-micro-interactions-animations\u002Fkeyframe-animation-patterns\u002Fcss-only-toggle-switches-and-checkboxes","CSS-Only Toggle Switches and Checkboxes That Keep the Native Input",{"path":2202,"title":2203},"\u002Fcss-only-micro-interactions-animations\u002Fkeyframe-animation-patterns","Keyframe Animation Patterns: Spec-Compliant Architectures for Modern UIs",{"path":2205,"title":2206},"\u002Fcss-only-micro-interactions-animations\u002Fkeyframe-animation-patterns\u002Fstaggered-list-animations-with-custom-properties","Staggered List Animations Using --i Index Custom Properties",{"path":2208,"title":2209},"\u002Fcss-only-micro-interactions-animations\u002Fperformance-gpu-acceleration","Performance & GPU Acceleration in CSS: A Developer’s Blueprint",{"path":2211,"title":2212},"\u002Fcss-only-micro-interactions-animations\u002Fperformance-gpu-acceleration\u002Foptimizing-css-animations-for-60fps","Optimizing CSS Animations for 60fps: Budgeting the Frame",{"path":2214,"title":2215},"\u002Fcss-only-micro-interactions-animations\u002Fperformance-gpu-acceleration\u002Fprofiling-animations-in-devtools","Profiling CSS Animations in DevTools: Finding the Frame That Costs Too Much",{"path":2217,"title":2218},"\u002Fcss-only-micro-interactions-animations\u002Fperformance-gpu-acceleration\u002Fwill-change-and-the-compositor-thread","will-change and the Compositor Thread: Layer Promotion Without the Footguns",{"path":2220,"title":2221},"\u002Fcss-only-micro-interactions-animations\u002Fscroll-driven-animations","Scroll-Driven Animations: Binding Motion to Scroll Position in Pure CSS",{"path":2223,"title":2224},"\u002Fcss-only-micro-interactions-animations\u002Fscroll-driven-animations\u002Fscroll-driven-animation-fallbacks","Shipping Scroll-Driven Animations Without Breaking Anything",{"path":2226,"title":2227},"\u002Fcss-only-micro-interactions-animations\u002Fscroll-driven-animations\u002Fscroll-progress-bar-without-javascript","A Reading Progress Bar Driven by scroll(root)",{"path":2229,"title":2230},"\u002Fcss-only-micro-interactions-animations\u002Fscroll-driven-animations\u002Fscroll-triggered-reveal-animations","Reveal-on-Scroll with view() and animation-range",{"path":2232,"title":2233},"\u002Fcss-only-micro-interactions-animations\u002Fview-transitions-for-css-developers","View Transitions for CSS Developers: the Pseudo-Element Tree, Snapshots, and Named Elements",{"path":2235,"title":2236},"\u002Fcss-only-micro-interactions-animations\u002Fview-transitions-for-css-developers\u002Fsame-document-view-transitions","Writing a Same-Document View Transition: the CSS You Actually Author",{"path":2238,"title":2239},"\u002Fcss-only-micro-interactions-animations\u002Fview-transitions-for-css-developers\u002Fview-transition-names-shared-elements","view-transition-name and Shared Elements: Morphing a Thumbnail into a Hero",{"path":2241,"title":2242},"\u002Fcss-only-micro-interactions-animations\u002Fview-transitions-for-css-developers\u002Fview-transitions-with-reduced-motion","Honouring prefers-reduced-motion in View Transitions",{"path":59,"title":2244},"Modern CSS Layouts & Micro-Interactions",{"path":2246,"title":2247},"\u002Fmastering-container-queries-responsive-layouts\u002Fanchor-positioning-and-overlays\u002Fanchor-positioned-tooltips","Anchor-Positioned Tooltips: Tethering, Flipping, and Getting the Semantics Right",{"path":2249,"title":2250},"\u002Fmastering-container-queries-responsive-layouts\u002Fanchor-positioning-and-overlays\u002Fanchor-positioning-fallbacks","Anchor Positioning Fallbacks: A Graceful Floor for Older Browser Versions",{"path":2252,"title":2253},"\u002Fmastering-container-queries-responsive-layouts\u002Fanchor-positioning-and-overlays","CSS Anchor Positioning and Overlays: Tethering Elements Without JavaScript",{"path":2255,"title":2256},"\u002Fmastering-container-queries-responsive-layouts\u002Fanchor-positioning-and-overlays\u002Fpopover-attribute-and-css-styling","The popover Attribute: Top-Layer Overlays With No JavaScript",{"path":2258,"title":2259},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-fallbacks\u002Ffeature-detection-with-supports","Feature Detection with @supports: Syntax, Semantics, and the Traps",{"path":2261,"title":2262},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-fallbacks\u002Fhandling-container-query-fallbacks-for-older-browsers","Handling Container Query Fallbacks for Older Browsers",{"path":2264,"title":2265},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-fallbacks","Container Query Fallbacks: Spec-Compliant CSS Strategies for Legacy Browsers",{"path":2267,"title":2268},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-syntax-basics\u002Fcontainer-query-units-cqi-cqb-explained","Container Query Units Explained: cqi, cqb, cqw, cqh, cqmin and cqmax",{"path":2270,"title":2271},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-syntax-basics\u002Fcontainer-type-size-vs-inline-size","Choosing container-type: inline-size, size, or normal",{"path":2273,"title":2274},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-syntax-basics\u002Fcontainer-vs-media-queries-comparison","Container vs Media Queries: Choosing the Right Reference Box",{"path":2276,"title":2277},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-syntax-basics\u002Fhow-to-use-container-queries-in-production","How to Use Container Queries in Production Without a Rewrite",{"path":2279,"title":2280},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-syntax-basics","Container Query Syntax Basics",{"path":2282,"title":2283},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-syntax-basics\u002Fnesting-and-naming-container-queries","Nesting and Naming Container Queries: Targeting the Right Ancestor",{"path":2285,"title":2286},"\u002Fmastering-container-queries-responsive-layouts\u002Fcss-grid-and-subgrid-layouts\u002Fauto-fit-minmax-responsive-grids","Responsive Grids with repeat(auto-fit, minmax())",{"path":2288,"title":2289},"\u002Fmastering-container-queries-responsive-layouts\u002Fcss-grid-and-subgrid-layouts\u002Fbuilding-a-dashboard-with-subgrid","Building a Responsive Dashboard Where Cards Align with Subgrid",{"path":2291,"title":2292},"\u002Fmastering-container-queries-responsive-layouts\u002Fcss-grid-and-subgrid-layouts\u002Fholy-grail-layout-with-grid","The Holy-Grail Layout with CSS Grid and Container Queries",{"path":2294,"title":2295},"\u002Fmastering-container-queries-responsive-layouts\u002Fcss-grid-and-subgrid-layouts","CSS Grid and Subgrid Layouts for Responsive Interfaces",{"path":2297,"title":2298},"\u002Fmastering-container-queries-responsive-layouts\u002Fcss-grid-and-subgrid-layouts\u002Fsubgrid-vs-nested-grid","Subgrid vs an Independently Nested Grid",{"path":2300,"title":2301},"\u002Fmastering-container-queries-responsive-layouts\u002Ffluid-typography-with-clamp\u002Fclamp-vs-media-query-typography","clamp() Fluid Type vs Media-Query Step Typography: Tradeoffs and Anatomy",{"path":2303,"title":2304},"\u002Fmastering-container-queries-responsive-layouts\u002Ffluid-typography-with-clamp\u002Ffluid-space-scale-with-clamp","Building a Fluid Spacing Scale with clamp() and Container Units",{"path":2306,"title":2307},"\u002Fmastering-container-queries-responsive-layouts\u002Ffluid-typography-with-clamp\u002Ffluid-type-accessibility-and-zoom","Fluid Type, Accessibility and Zoom: The vw-Only Trap",{"path":2309,"title":2310},"\u002Fmastering-container-queries-responsive-layouts\u002Ffluid-typography-with-clamp\u002Ffluid-typography-without-javascript","Fluid Typography Without JavaScript: A Precision CSS Reference",{"path":2312,"title":2313},"\u002Fmastering-container-queries-responsive-layouts\u002Ffluid-typography-with-clamp","Fluid Typography with clamp(): A Practical Guide for Modern CSS",{"path":2315,"title":26},"\u002Fmastering-container-queries-responsive-layouts",{"path":2317,"title":2318},"\u002Fmastering-container-queries-responsive-layouts\u002Fintrinsic-sizing-techniques\u002Faspect-ratio-for-responsive-media","Using aspect-ratio for Responsive Media and Preventing Layout Shift",{"path":2320,"title":2321},"\u002Fmastering-container-queries-responsive-layouts\u002Fintrinsic-sizing-techniques","Intrinsic Sizing Techniques: Modern CSS Layouts for Responsive UI",{"path":2323,"title":2324},"\u002Fmastering-container-queries-responsive-layouts\u002Fintrinsic-sizing-techniques\u002Fmin-max-fit-content-explained","min-content, max-content, and fit-content() Explained",{"path":2326,"title":2327},"\u002Fmastering-container-queries-responsive-layouts\u002Fintrinsic-sizing-techniques\u002Fpreventing-flex-and-grid-overflow","The min-width: auto Trap in Flex and Grid Layouts",{"path":2329,"title":2330},"\u002Fmastering-container-queries-responsive-layouts\u002Fmodern-css-reset-strategies\u002Fcascade-layers-for-reset-and-tokens","Cascade Layers for Reset and Design Tokens",{"path":2332,"title":2333},"\u002Fmastering-container-queries-responsive-layouts\u002Fmodern-css-reset-strategies\u002Fcascade-layers-vs-specificity-hacks","Cascade Layers vs Specificity Hacks: Ordering Instead of Escalating",{"path":2335,"title":2336},"\u002Fmastering-container-queries-responsive-layouts\u002Fmodern-css-reset-strategies","Modern CSS Reset Strategies: A Spec-Compliant Foundation",{"path":2338,"title":2339},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns\u002Fbuilding-responsive-cards-with-container-queries","Building Responsive Cards with Container Queries: A Production-Ready Guide",{"path":2341,"title":2342},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns\u002Fcontainer-query-data-tables","Container Query Data Tables: Reflowing Tables to Cards",{"path":2344,"title":2345},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns\u002Fcontainer-query-sidebar-layouts","Container Query Sidebar Layouts That Travel Between Contexts",{"path":2347,"title":2348},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns","Responsive Component Patterns: Architecture & Implementation",{"path":2100,"title":5},{"path":2351,"title":2352},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns\u002Fresponsive-navigation-without-media-queries","Responsive Navigation Without Media Queries Using Container Queries",{"path":2354,"title":2355},"\u002Fmastering-container-queries-responsive-layouts\u002Fstyle-queries-and-container-state\u002Fcontainer-style-query-theming","Container Style Query Theming: One Token Instead of a Variant Class Matrix",{"path":2357,"title":2358},"\u002Fmastering-container-queries-responsive-layouts\u002Fstyle-queries-and-container-state","Style Queries and Container State: Token-Driven Component Variants",{"path":2360,"title":2361},"\u002Fmastering-container-queries-responsive-layouts\u002Fstyle-queries-and-container-state\u002Fstyle-queries-with-custom-properties","Style Queries With Custom Properties: Declaring, Inheriting, and Matching Tokens",{"path":2363,"title":2364},"\u002Fmastering-container-queries-responsive-layouts\u002Fstyle-queries-and-container-state\u002Fstyle-query-fallbacks-and-support","Style Query Fallbacks and Support: Designing for Older Browser Versions",1784566156645]