[{"data":1,"prerenderedAt":2213},["ShallowReactive",2],{"page-\u002Fmastering-container-queries-responsive-layouts\u002Fcss-grid-and-subgrid-layouts\u002Fgrid-template-areas-responsive-layouts":3,"content-all-pages":1649,"live-demo:grid-areas-layout":2207},{"id":4,"title":5,"body":6,"description":1627,"extension":1628,"meta":1629,"navigation":401,"path":1645,"seo":1646,"stem":1647,"__hash__":1648},"content\u002Fmastering-container-queries-responsive-layouts\u002Fcss-grid-and-subgrid-layouts\u002Fgrid-template-areas-responsive-layouts\u002Findex.md","Responsive Layouts With grid-template-areas: Rearranging Regions by Name",{"type":7,"value":8,"toc":1616},"minimark",[9,19,45,50,61,68,208,212,215,219,1051,1066,1070,1075,1092,1167,1178,1200,1204,1223,1245,1260,1270,1274,1289,1296,1300,1303,1512,1520,1524,1533,1537,1550,1559,1571,1580,1584,1613],[10,11,13,14,18],"h1",{"id":12},"responsive-layouts-with-grid-template-areas-rearranging-regions-by-name","Responsive Layouts With ",[15,16,17],"code",{},"grid-template-areas",": Rearranging Regions by Name",[20,21,22,23,26,27,30,31,33,34,39,40,44],"p",{},"A page or component layout is a set of regions — header, navigation, main content, aside, footer — and responsive design is mostly about rearranging those regions as space changes. Writing that rearrangement with line numbers means updating every child's ",[15,24,25],{},"grid-column"," and ",[15,28,29],{},"grid-row"," at every breakpoint, and the numbers say nothing about intent. ",[15,32,17],{}," lets you draw the layout as a picture made of region names, and each breakpoint becomes a different picture. This page shows how to build a container-driven layout from area maps, the validity rules that silently break them, and how to keep the visual order honest for keyboard and screen-reader users. It belongs to ",[35,36,38],"a",{"href":37},"\u002Fmastering-container-queries-responsive-layouts\u002Fcss-grid-and-subgrid-layouts\u002F","CSS Grid & Subgrid Layouts"," in the ",[35,41,43],{"href":42},"\u002Fmastering-container-queries-responsive-layouts\u002F","Mastering Container Queries & Responsive Layouts"," guide.",[46,47,49],"h2",{"id":48},"why-draw-the-layout","Why draw the layout",[20,51,52,53,56,57,60],{},"An area map is readable in a way line numbers are not. Compare ",[15,54,55],{},"grid-column: 2 \u002F 4; grid-row: 1 \u002F 3"," with a map in which a region called ",[15,58,59],{},"main"," visibly occupies the middle two columns of the first two rows. The map is documentation and implementation at once: someone reading the stylesheet sees the layout's shape.",[20,62,63,64,67],{},"The larger benefit is where the responsive logic lives. With areas, each child is assigned to a region once — ",[15,65,66],{},".site-nav { grid-area: nav }"," — and never changes. Only the container's map changes between sizes. A three-breakpoint layout is three maps on one element, rather than a dozen placement rules scattered over five children.",[69,70,76,77,76,81,76,85,76,93,76,102,76,108,76,112,76,116,76,121,76,124,76,128,76,132,76,135,76,139,76,144,76,148,76,151,76,155,76,158,76,162,76,165,76,167,76,169,76,171,76,173,76,176,76,179,76,182,76,185,76,189,76,193,76,195,76,198,76,201,76,203,76,205],"svg",{"viewBox":71,"role":72,"ariaLabel":73,"xmlns":74,"style":75},"0 0 720 320","img","The same five regions arranged by three area maps: one column when narrow, two columns when medium, three columns when wide","http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg","width:100%;height:auto;max-width:720px;margin:2rem 0","\n  ",[78,79,80],"title",{},"One set of regions, three maps",[82,83,84],"desc",{},"Narrow: header, nav, main, aside and footer stacked. Medium: header across the top, nav and main side by side, aside and footer below. Wide: header across the top, nav, main and aside in three columns, footer across the bottom.",[86,87,92],"text",{"textAnchor":88,"x":89,"y":90,"style":91},"middle","360","26","text-anchor:middle;fill:currentColor;font:700 17px sans-serif","Only the map changes",[94,95],"rect",{"x":96,"y":97,"width":98,"height":96,"rx":99,"fill":100,"opacity":101},"30","50","140","4","#7aa2ff","0.45",[86,103,107],{"textAnchor":88,"x":104,"y":105,"style":106},"100","70","text-anchor:middle;fill:currentColor;font:11px ui-monospace,monospace","header",[94,109],{"x":96,"y":110,"width":98,"height":90,"rx":99,"fill":100,"opacity":111},"84","0.25",[86,113,115],{"textAnchor":88,"x":104,"y":114,"style":106},"102","nav",[94,117],{"x":96,"y":118,"width":98,"height":119,"rx":99,"fill":100,"opacity":120},"114","80","0.14",[86,122,59],{"textAnchor":88,"x":104,"y":123,"style":106},"158",[94,125],{"x":96,"y":126,"width":98,"height":127,"rx":99,"fill":100,"opacity":111},"198","40",[86,129,131],{"textAnchor":88,"x":104,"y":130,"style":106},"222","aside",[94,133],{"x":96,"y":134,"width":98,"height":90,"rx":99,"fill":100,"opacity":101},"242",[86,136,138],{"textAnchor":88,"x":104,"y":137,"style":106},"260","footer",[86,140,143],{"textAnchor":88,"x":104,"y":141,"style":142},"296","text-anchor:middle;fill:currentColor;font:12px sans-serif","narrow",[94,145],{"x":146,"y":97,"width":147,"height":96,"rx":99,"fill":100,"opacity":101},"210","220",[86,149,107],{"textAnchor":88,"x":150,"y":105,"style":106},"320",[94,152],{"x":146,"y":110,"width":153,"height":154,"rx":99,"fill":100,"opacity":111},"64","110",[86,156,115],{"textAnchor":88,"x":134,"y":157,"style":106},"142",[94,159],{"x":160,"y":110,"width":161,"height":154,"rx":99,"fill":100,"opacity":120},"278","152",[86,163,59],{"textAnchor":88,"x":164,"y":157,"style":106},"354",[94,166],{"x":146,"y":126,"width":147,"height":127,"rx":99,"fill":100,"opacity":111},[86,168,131],{"textAnchor":88,"x":150,"y":130,"style":106},[94,170],{"x":146,"y":134,"width":147,"height":90,"rx":99,"fill":100,"opacity":101},[86,172,138],{"textAnchor":88,"x":150,"y":137,"style":106},[86,174,175],{"textAnchor":88,"x":150,"y":141,"style":142},"medium",[94,177],{"x":178,"y":97,"width":147,"height":96,"rx":99,"fill":100,"opacity":101},"470",[86,180,107],{"textAnchor":88,"x":181,"y":105,"style":106},"580",[94,183],{"x":178,"y":110,"width":97,"height":184,"rx":99,"fill":100,"opacity":111},"154",[86,186,115],{"textAnchor":88,"x":187,"y":188,"style":106},"495","164",[94,190],{"x":191,"y":110,"width":192,"height":184,"rx":99,"fill":100,"opacity":120},"524","112",[86,194,59],{"textAnchor":88,"x":181,"y":188,"style":106},[94,196],{"x":197,"y":110,"width":97,"height":184,"rx":99,"fill":100,"opacity":111},"640",[86,199,131],{"textAnchor":88,"x":200,"y":188,"style":106},"665",[94,202],{"x":178,"y":134,"width":147,"height":90,"rx":99,"fill":100,"opacity":101},[86,204,138],{"textAnchor":88,"x":181,"y":137,"style":106},[86,206,207],{"textAnchor":88,"x":181,"y":141,"style":142},"wide",[46,209,211],{"id":210},"the-complete-implementation","The complete implementation",[20,213,214],{},"The article layout below is driven by container width, so it adapts whether it spans the page or sits in a narrower column.",[216,217],"live-demo",{"name":218},"grid-areas-layout",[220,221,226],"pre",{"className":222,"code":223,"language":224,"meta":225,"style":225},"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>grid-template-areas layout\u003C\u002Ftitle>\n\u003Cstyle>\n  body { margin: 0; font: 15px\u002F1.5 system-ui, sans-serif; }\n\n  .shell-host { container-type: inline-size; }\n\n  .shell {\n    display: grid;\n    gap: 1rem;\n    padding: 1rem;\n    \u002F* Narrow map: one column, everything in source order. *\u002F\n    grid-template-areas:\n      \"header\"\n      \"nav\"\n      \"main\"\n      \"aside\"\n      \"footer\";\n  }\n\n  \u002F* Children are assigned once and never change. *\u002F\n  .shell > header { grid-area: header; }\n  .shell > nav    { grid-area: nav; }\n  .shell > main   { grid-area: main; min-width: 0; }\n  .shell > aside  { grid-area: aside; }\n  .shell > footer { grid-area: footer; }\n\n  \u002F* Medium map: nav beside main. *\u002F\n  @container (width > 40rem) {\n    .shell {\n      grid-template-columns: 12rem 1fr;\n      grid-template-areas:\n        \"header header\"\n        \"nav    main\"\n        \"aside  aside\"\n        \"footer footer\";\n    }\n  }\n\n  \u002F* Wide map: three columns. The dots-free map keeps every row full. *\u002F\n  @container (width > 64rem) {\n    .shell {\n      grid-template-columns: 12rem 1fr 16rem;\n      grid-template-areas:\n        \"header header header\"\n        \"nav    main   aside\"\n        \"footer footer footer\";\n    }\n  }\n\n  .shell > * { padding: 0.75rem; border-radius: 8px; background: #f1f5f9; }\n\u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n  \u003Cdiv class=\"shell-host\">\n    \u003Cdiv class=\"shell\">\n      \u003Cheader>Header\u003C\u002Fheader>\n      \u003Cnav aria-label=\"Section\">Navigation\u003C\u002Fnav>\n      \u003Cmain>Main content\u003C\u002Fmain>\n      \u003Caside>Related\u003C\u002Faside>\n      \u003Cfooter>Footer\u003C\u002Ffooter>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n","html","",[15,227,228,248,268,278,296,321,335,345,396,403,417,422,431,445,461,475,482,491,497,503,509,515,523,529,534,540,559,577,604,622,639,644,650,659,667,688,696,702,708,714,722,728,733,738,744,752,759,781,788,794,800,808,813,818,823,869,879,888,898,917,934,949,971,985,999,1013,1023,1033,1042],{"__ignoreMap":225},[229,230,233,237,241,245],"span",{"class":231,"line":232},"line",1,[229,234,236],{"class":235},"suds8","\u003C!",[229,238,240],{"class":239},"sne4z","doctype",[229,242,244],{"class":243},"s-5SL"," html",[229,246,247],{"class":235},">\n",[229,249,251,254,256,259,262,266],{"class":231,"line":250},2,[229,252,253],{"class":235},"\u003C",[229,255,224],{"class":239},[229,257,258],{"class":243}," lang",[229,260,261],{"class":235},"=",[229,263,265],{"class":264},"sT6z2","\"en\"",[229,267,247],{"class":235},[229,269,271,273,276],{"class":231,"line":270},3,[229,272,253],{"class":235},[229,274,275],{"class":239},"head",[229,277,247],{"class":235},[229,279,281,283,286,289,291,294],{"class":231,"line":280},4,[229,282,253],{"class":235},[229,284,285],{"class":239},"meta",[229,287,288],{"class":243}," charset",[229,290,261],{"class":235},[229,292,293],{"class":264},"\"utf-8\"",[229,295,247],{"class":235},[229,297,299,301,303,306,308,311,314,316,319],{"class":231,"line":298},5,[229,300,253],{"class":235},[229,302,285],{"class":239},[229,304,305],{"class":243}," name",[229,307,261],{"class":235},[229,309,310],{"class":264},"\"viewport\"",[229,312,313],{"class":243}," content",[229,315,261],{"class":235},[229,317,318],{"class":264},"\"width=device-width, initial-scale=1\"",[229,320,247],{"class":235},[229,322,324,326,328,331,333],{"class":231,"line":323},6,[229,325,253],{"class":235},[229,327,78],{"class":239},[229,329,330],{"class":235},">grid-template-areas layout\u003C\u002F",[229,332,78],{"class":239},[229,334,247],{"class":235},[229,336,338,340,343],{"class":231,"line":337},7,[229,339,253],{"class":235},[229,341,342],{"class":239},"style",[229,344,247],{"class":235},[229,346,348,351,354,357,360,363,366,369,371,374,378,381,384,387,390,393],{"class":231,"line":347},8,[229,349,350],{"class":239},"  body",[229,352,353],{"class":235}," { ",[229,355,356],{"class":243},"margin",[229,358,359],{"class":235},": ",[229,361,362],{"class":243},"0",[229,364,365],{"class":235},"; ",[229,367,368],{"class":243},"font",[229,370,359],{"class":235},[229,372,373],{"class":243},"15",[229,375,377],{"class":376},"sHUrx","px",[229,379,380],{"class":235},"\u002F",[229,382,383],{"class":243},"1.5",[229,385,386],{"class":243}," system-ui",[229,388,389],{"class":235},", ",[229,391,392],{"class":243},"sans-serif",[229,394,395],{"class":235},"; }\n",[229,397,399],{"class":231,"line":398},9,[229,400,402],{"emptyLinePlaceholder":401},true,"\n",[229,404,406,409,411,414],{"class":231,"line":405},10,[229,407,408],{"class":243},"  .shell-host",[229,410,353],{"class":235},[229,412,413],{"class":243},"container-type",[229,415,416],{"class":235},": inline-size; }\n",[229,418,420],{"class":231,"line":419},11,[229,421,402],{"emptyLinePlaceholder":401},[229,423,425,428],{"class":231,"line":424},12,[229,426,427],{"class":243},"  .shell",[229,429,430],{"class":235}," {\n",[229,432,434,437,439,442],{"class":231,"line":433},13,[229,435,436],{"class":243},"    display",[229,438,359],{"class":235},[229,440,441],{"class":243},"grid",[229,443,444],{"class":235},";\n",[229,446,448,451,453,456,459],{"class":231,"line":447},14,[229,449,450],{"class":243},"    gap",[229,452,359],{"class":235},[229,454,455],{"class":243},"1",[229,457,458],{"class":376},"rem",[229,460,444],{"class":235},[229,462,464,467,469,471,473],{"class":231,"line":463},15,[229,465,466],{"class":243},"    padding",[229,468,359],{"class":235},[229,470,455],{"class":243},[229,472,458],{"class":376},[229,474,444],{"class":235},[229,476,478],{"class":231,"line":477},16,[229,479,481],{"class":480},"sLBg1","    \u002F* Narrow map: one column, everything in source order. *\u002F\n",[229,483,485,488],{"class":231,"line":484},17,[229,486,487],{"class":243},"    grid-template-areas",[229,489,490],{"class":235},":\n",[229,492,494],{"class":231,"line":493},18,[229,495,496],{"class":264},"      \"header\"\n",[229,498,500],{"class":231,"line":499},19,[229,501,502],{"class":264},"      \"nav\"\n",[229,504,506],{"class":231,"line":505},20,[229,507,508],{"class":264},"      \"main\"\n",[229,510,512],{"class":231,"line":511},21,[229,513,514],{"class":264},"      \"aside\"\n",[229,516,518,521],{"class":231,"line":517},22,[229,519,520],{"class":264},"      \"footer\"",[229,522,444],{"class":235},[229,524,526],{"class":231,"line":525},23,[229,527,528],{"class":235},"  }\n",[229,530,532],{"class":231,"line":531},24,[229,533,402],{"emptyLinePlaceholder":401},[229,535,537],{"class":231,"line":536},25,[229,538,539],{"class":480},"  \u002F* Children are assigned once and never change. *\u002F\n",[229,541,543,545,548,551,553,556],{"class":231,"line":542},26,[229,544,427],{"class":243},[229,546,547],{"class":376}," >",[229,549,550],{"class":239}," header",[229,552,353],{"class":235},[229,554,555],{"class":243},"grid-area",[229,557,558],{"class":235},": header; }\n",[229,560,562,564,566,569,572,574],{"class":231,"line":561},27,[229,563,427],{"class":243},[229,565,547],{"class":376},[229,567,568],{"class":239}," nav",[229,570,571],{"class":235},"    { ",[229,573,555],{"class":243},[229,575,576],{"class":235},": nav; }\n",[229,578,580,582,584,587,590,592,595,598,600,602],{"class":231,"line":579},28,[229,581,427],{"class":243},[229,583,547],{"class":376},[229,585,586],{"class":239}," main",[229,588,589],{"class":235},"   { ",[229,591,555],{"class":243},[229,593,594],{"class":235},": main; ",[229,596,597],{"class":243},"min-width",[229,599,359],{"class":235},[229,601,362],{"class":243},[229,603,395],{"class":235},[229,605,607,609,611,614,617,619],{"class":231,"line":606},29,[229,608,427],{"class":243},[229,610,547],{"class":376},[229,612,613],{"class":239}," aside",[229,615,616],{"class":235},"  { ",[229,618,555],{"class":243},[229,620,621],{"class":235},": aside; }\n",[229,623,625,627,629,632,634,636],{"class":231,"line":624},30,[229,626,427],{"class":243},[229,628,547],{"class":376},[229,630,631],{"class":239}," footer",[229,633,353],{"class":235},[229,635,555],{"class":243},[229,637,638],{"class":235},": footer; }\n",[229,640,642],{"class":231,"line":641},31,[229,643,402],{"emptyLinePlaceholder":401},[229,645,647],{"class":231,"line":646},32,[229,648,649],{"class":480},"  \u002F* Medium map: nav beside main. *\u002F\n",[229,651,653,656],{"class":231,"line":652},33,[229,654,655],{"class":376},"  @container",[229,657,658],{"class":235}," (width > 40rem) {\n",[229,660,662,665],{"class":231,"line":661},34,[229,663,664],{"class":243},"    .shell",[229,666,430],{"class":235},[229,668,670,673,675,678,680,683,686],{"class":231,"line":669},35,[229,671,672],{"class":243},"      grid-template-columns",[229,674,359],{"class":235},[229,676,677],{"class":243},"12",[229,679,458],{"class":376},[229,681,682],{"class":243}," 1",[229,684,685],{"class":376},"fr",[229,687,444],{"class":235},[229,689,691,694],{"class":231,"line":690},36,[229,692,693],{"class":243},"      grid-template-areas",[229,695,490],{"class":235},[229,697,699],{"class":231,"line":698},37,[229,700,701],{"class":264},"        \"header header\"\n",[229,703,705],{"class":231,"line":704},38,[229,706,707],{"class":264},"        \"nav    main\"\n",[229,709,711],{"class":231,"line":710},39,[229,712,713],{"class":264},"        \"aside  aside\"\n",[229,715,717,720],{"class":231,"line":716},40,[229,718,719],{"class":264},"        \"footer footer\"",[229,721,444],{"class":235},[229,723,725],{"class":231,"line":724},41,[229,726,727],{"class":235},"    }\n",[229,729,731],{"class":231,"line":730},42,[229,732,528],{"class":235},[229,734,736],{"class":231,"line":735},43,[229,737,402],{"emptyLinePlaceholder":401},[229,739,741],{"class":231,"line":740},44,[229,742,743],{"class":480},"  \u002F* Wide map: three columns. The dots-free map keeps every row full. *\u002F\n",[229,745,747,749],{"class":231,"line":746},45,[229,748,655],{"class":376},[229,750,751],{"class":235}," (width > 64rem) {\n",[229,753,755,757],{"class":231,"line":754},46,[229,756,664],{"class":243},[229,758,430],{"class":235},[229,760,762,764,766,768,770,772,774,777,779],{"class":231,"line":761},47,[229,763,672],{"class":243},[229,765,359],{"class":235},[229,767,677],{"class":243},[229,769,458],{"class":376},[229,771,682],{"class":243},[229,773,685],{"class":376},[229,775,776],{"class":243}," 16",[229,778,458],{"class":376},[229,780,444],{"class":235},[229,782,784,786],{"class":231,"line":783},48,[229,785,693],{"class":243},[229,787,490],{"class":235},[229,789,791],{"class":231,"line":790},49,[229,792,793],{"class":264},"        \"header header header\"\n",[229,795,797],{"class":231,"line":796},50,[229,798,799],{"class":264},"        \"nav    main   aside\"\n",[229,801,803,806],{"class":231,"line":802},51,[229,804,805],{"class":264},"        \"footer footer footer\"",[229,807,444],{"class":235},[229,809,811],{"class":231,"line":810},52,[229,812,727],{"class":235},[229,814,816],{"class":231,"line":815},53,[229,817,528],{"class":235},[229,819,821],{"class":231,"line":820},54,[229,822,402],{"emptyLinePlaceholder":401},[229,824,826,828,830,833,835,838,840,843,845,847,850,852,855,857,859,862,864,867],{"class":231,"line":825},55,[229,827,427],{"class":243},[229,829,547],{"class":376},[229,831,832],{"class":239}," *",[229,834,353],{"class":235},[229,836,837],{"class":243},"padding",[229,839,359],{"class":235},[229,841,842],{"class":243},"0.75",[229,844,458],{"class":376},[229,846,365],{"class":235},[229,848,849],{"class":243},"border-radius",[229,851,359],{"class":235},[229,853,854],{"class":243},"8",[229,856,377],{"class":376},[229,858,365],{"class":235},[229,860,861],{"class":243},"background",[229,863,359],{"class":235},[229,865,866],{"class":243},"#f1f5f9",[229,868,395],{"class":235},[229,870,872,875,877],{"class":231,"line":871},56,[229,873,874],{"class":235},"\u003C\u002F",[229,876,342],{"class":239},[229,878,247],{"class":235},[229,880,882,884,886],{"class":231,"line":881},57,[229,883,874],{"class":235},[229,885,275],{"class":239},[229,887,247],{"class":235},[229,889,891,893,896],{"class":231,"line":890},58,[229,892,253],{"class":235},[229,894,895],{"class":239},"body",[229,897,247],{"class":235},[229,899,901,904,907,910,912,915],{"class":231,"line":900},59,[229,902,903],{"class":235},"  \u003C",[229,905,906],{"class":239},"div",[229,908,909],{"class":243}," class",[229,911,261],{"class":235},[229,913,914],{"class":264},"\"shell-host\"",[229,916,247],{"class":235},[229,918,920,923,925,927,929,932],{"class":231,"line":919},60,[229,921,922],{"class":235},"    \u003C",[229,924,906],{"class":239},[229,926,909],{"class":243},[229,928,261],{"class":235},[229,930,931],{"class":264},"\"shell\"",[229,933,247],{"class":235},[229,935,937,940,942,945,947],{"class":231,"line":936},61,[229,938,939],{"class":235},"      \u003C",[229,941,107],{"class":239},[229,943,944],{"class":235},">Header\u003C\u002F",[229,946,107],{"class":239},[229,948,247],{"class":235},[229,950,952,954,956,959,961,964,967,969],{"class":231,"line":951},62,[229,953,939],{"class":235},[229,955,115],{"class":239},[229,957,958],{"class":243}," aria-label",[229,960,261],{"class":235},[229,962,963],{"class":264},"\"Section\"",[229,965,966],{"class":235},">Navigation\u003C\u002F",[229,968,115],{"class":239},[229,970,247],{"class":235},[229,972,974,976,978,981,983],{"class":231,"line":973},63,[229,975,939],{"class":235},[229,977,59],{"class":239},[229,979,980],{"class":235},">Main content\u003C\u002F",[229,982,59],{"class":239},[229,984,247],{"class":235},[229,986,988,990,992,995,997],{"class":231,"line":987},64,[229,989,939],{"class":235},[229,991,131],{"class":239},[229,993,994],{"class":235},">Related\u003C\u002F",[229,996,131],{"class":239},[229,998,247],{"class":235},[229,1000,1002,1004,1006,1009,1011],{"class":231,"line":1001},65,[229,1003,939],{"class":235},[229,1005,138],{"class":239},[229,1007,1008],{"class":235},">Footer\u003C\u002F",[229,1010,138],{"class":239},[229,1012,247],{"class":235},[229,1014,1016,1019,1021],{"class":231,"line":1015},66,[229,1017,1018],{"class":235},"    \u003C\u002F",[229,1020,906],{"class":239},[229,1022,247],{"class":235},[229,1024,1026,1029,1031],{"class":231,"line":1025},67,[229,1027,1028],{"class":235},"  \u003C\u002F",[229,1030,906],{"class":239},[229,1032,247],{"class":235},[229,1034,1036,1038,1040],{"class":231,"line":1035},68,[229,1037,874],{"class":235},[229,1039,895],{"class":239},[229,1041,247],{"class":235},[229,1043,1045,1047,1049],{"class":231,"line":1044},69,[229,1046,874],{"class":235},[229,1048,224],{"class":239},[229,1050,247],{"class":235},[20,1052,1053,1054,1057,1058,1060,1061,1065],{},"The source order — header, nav, main, aside, footer — matches the reading order in every map: left to right, top to bottom. That is not an accident but a constraint the maps were designed around, and it is the most important rule in the accessibility section below. ",[15,1055,1056],{},"min-width: 0"," on ",[15,1059,59],{}," stops long content from widening its column, the grid equivalent of the flexbox automatic-minimum issue in ",[35,1062,1064],{"href":1063},"\u002Fmastering-container-queries-responsive-layouts\u002Fintrinsic-sizing-techniques\u002Fpreventing-flex-and-grid-overflow\u002F","Preventing Flex and Grid Overflow",".",[46,1067,1069],{"id":1068},"the-key-technique-maps-must-be-rectangles","The key technique: maps must be rectangles",[20,1071,1072,1074],{},[15,1073,17],{}," has strict validity rules, and violating them invalidates the entire declaration — the grid then has no named areas, and every item falls back to auto-placement, usually as one long column. The two rules:",[1076,1077,1078,1086],"ol",{},[1079,1080,1081,1085],"li",{},[1082,1083,1084],"strong",{},"Every row string has the same number of cells."," Cells are separated by whitespace; a row with one fewer name than its neighbours is invalid.",[1079,1087,1088,1091],{},[1082,1089,1090],{},"Every named area is a single rectangle."," A name that forms an L shape, or appears in two separate places, is invalid.",[69,1093,76,1096,76,1099,76,1102,76,1105,76,1112,76,1118,76,1122,76,1125,76,1130,76,1135,76,1138,76,1141,76,1144,76,1147,76,1151,76,1154,76,1157,76,1160,76,1163],{"viewBox":1094,"role":72,"ariaLabel":1095,"xmlns":74,"style":75},"0 0 720 260","Three area maps: a valid rectangular map, an invalid map with an L-shaped area, and an invalid map with a short row",[78,1097,1098],{},"Valid and invalid area maps",[82,1100,1101],{},"Valid: every name forms a rectangle and every row has three cells. Invalid: main occupies an L shape across two rows. Invalid: the second row has only two cells while the others have three.",[86,1103,1104],{"textAnchor":88,"x":89,"y":90,"style":91},"Rectangles and equal rows, or nothing",[94,1106],{"x":96,"y":97,"width":1107,"height":1108,"rx":854,"fill":1109,"stroke":1110,"strokeWidth":383,"opacity":1111},"200","120","none","currentColor","0.6",[86,1113,1117],{"textAnchor":88,"x":1114,"y":1115,"style":1116},"130","82","text-anchor:middle;fill:currentColor;font:12px ui-monospace,monospace","\"a a a\"",[86,1119,1121],{"textAnchor":88,"x":1114,"y":1120,"style":1116},"108","\"b m m\"",[86,1123,1121],{"textAnchor":88,"x":1114,"y":1124,"style":1116},"134",[86,1126,1129],{"textAnchor":88,"x":1114,"y":1127,"style":1128},"196","text-anchor:middle;fill:currentColor;font:600 12px sans-serif","valid",[94,1131],{"x":137,"y":97,"width":1107,"height":1108,"rx":854,"fill":1109,"stroke":1110,"strokeWidth":383,"strokeDashArray":1132,"opacity":1134},[1133,99],"6","0.7",[86,1136,1137],{"textAnchor":88,"x":89,"y":1115,"style":1116},"\"a m m\"",[86,1139,1140],{"textAnchor":88,"x":89,"y":1120,"style":1116},"\"b b m\"",[86,1142,1143],{"textAnchor":88,"x":89,"y":1124,"style":1116},"\"b b b\"",[86,1145,1146],{"textAnchor":88,"x":89,"y":1127,"style":1128},"invalid: m is L-shaped",[94,1148],{"x":1149,"y":97,"width":1107,"height":1108,"rx":854,"fill":1109,"stroke":1110,"strokeWidth":383,"strokeDashArray":1150,"opacity":1134},"490",[1133,99],[86,1152,1117],{"textAnchor":88,"x":1153,"y":1115,"style":1116},"590",[86,1155,1156],{"textAnchor":88,"x":1153,"y":1120,"style":1116},"\"b m\"",[86,1158,1159],{"textAnchor":88,"x":1153,"y":1124,"style":1116},"\"f f f\"",[86,1161,1162],{"textAnchor":88,"x":1153,"y":1127,"style":1128},"invalid: short row",[86,1164,1166],{"textAnchor":88,"x":89,"y":1165,"style":142},"238","Use \".\" for empty cells so rows stay the same length.",[20,1168,1169,1170,1173,1174,1177],{},"A single dot, or a run of dots such as ",[15,1171,1172],{},"...",", marks an empty cell. Dots keep rows the same length when a region should leave a gap, for example ",[15,1175,1176],{},"\"header header\" \". main\""," for a layout whose main column is offset. Aligning the strings vertically in the source, as in the example, makes errors like a short row easy to spot by eye.",[20,1179,1180,1181,1183,1184,26,1187,1190,1191,1194,1195,1199],{},"Areas also create implicit named lines: an area called ",[15,1182,59],{}," produces lines named ",[15,1185,1186],{},"main-start",[15,1188,1189],{},"main-end"," in both axes. Those names are usable in line-based placement elsewhere — ",[15,1192,1193],{},"grid-column: main-start \u002F aside-end"," — which combines the readability of areas with the flexibility of lines. The full-bleed technique in ",[35,1196,1198],{"href":1197},"\u002Fmastering-container-queries-responsive-layouts\u002Fviewport-units-and-mobile-layout\u002Ffull-bleed-sections-in-constrained-layouts\u002F","Full-Bleed Sections in Constrained Layouts"," relies on the same implicit naming in the other direction.",[46,1201,1203],{"id":1202},"sizing-the-tracks-behind-the-map","Sizing the tracks behind the map",[20,1205,1206,1207,1211,1212,26,1215,1218,1219,1222],{},"The area map decides ",[1208,1209,1210],"em",{},"where"," regions go; ",[15,1213,1214],{},"grid-template-columns",[15,1216,1217],{},"grid-template-rows"," decide ",[1208,1220,1221],{},"how big"," the tracks under them are. The two are independent, and getting the track sizes right is what keeps a layout robust when content changes.",[20,1224,1225,1226,1229,1230,1233,1234,1237,1238,1233,1241,1244],{},"For columns, prefer bounded flexible sizes over fixed ones. A sidebar column of ",[15,1227,1228],{},"12rem"," is fine until a translated navigation label needs 13; ",[15,1231,1232],{},"minmax(10rem, 14rem)"," or ",[15,1235,1236],{},"clamp(10rem, 22%, 14rem)"," gives it room to adapt. The main column should nearly always be ",[15,1239,1240],{},"1fr",[15,1242,1243],{},"minmax(0, 1fr)",", so it takes the remaining space and can shrink below its content's minimum without forcing overflow.",[20,1246,1247,1248,1251,1252,1254,1255,1259],{},"For rows, leave most tracks at their default ",[15,1249,1250],{},"auto",", which sizes each row to its content. Where a region should fill remaining height — a main area in an app shell — give its row ",[15,1253,1240],{}," and give the grid a height, as in the shell patterns in ",[35,1256,1258],{"href":1257},"\u002Fmastering-container-queries-responsive-layouts\u002Fflexbox-layout-patterns\u002Fsticky-footer-with-flexbox-and-grid\u002F","Sticky Footer With Flexbox or Grid",". Explicit row heights in pixels are rarely right; they break as soon as content grows.",[20,1261,1262,1263,1265,1266,1269],{},"When the number of columns in the map changes between sizes, the track list must change with it: a two-column map needs a two-value ",[15,1264,1214],{},". Declaring both properties together in each container query keeps them in step, and the ",[15,1267,1268],{},"grid-template"," shorthand can express rows, columns and areas in one declaration for compact definitions — at the cost of being harder to read for maps with many rows.",[46,1271,1273],{"id":1272},"accessibility-keep-visual-order-and-dom-order-in-step","Accessibility: keep visual order and DOM order in step",[20,1275,1276,1277,1279,1280,1282,1283,1285,1286,1288],{},"Area maps make it trivially easy to move regions anywhere, including in an order different from the source. A map that puts ",[15,1278,131],{}," above ",[15,1281,59],{}," on narrow screens, or ",[15,1284,115],{}," on the right of ",[15,1287,59],{}," while it comes first in the DOM, looks harmless in a screenshot. For keyboard users, focus then jumps from the top of the page to the bottom and back; for screen-reader users, the content is announced in an order that contradicts what sighted colleagues see. WCAG 1.3.2 Meaningful Sequence and 2.4.3 Focus Order both apply.",[20,1290,1291,1292,1295],{},"Two habits prevent it. Design every map so that reading its cells left to right, top to bottom, gives the same order as the DOM. And when a design genuinely needs a different order at some size — a promotional aside that should appear before long content on phones — change the source order and adjust the maps around it, rather than letting the map contradict the source. The CSS ",[15,1293,1294],{},"reading-flow"," property, which lets reading order follow the grid, is an emerging solution but not yet something to rely on.",[46,1297,1299],{"id":1298},"variation-named-areas-inside-components","Variation: named areas inside components",[20,1301,1302],{},"Areas are not only for page shells. A product card with an image, title, price, rating and button benefits from the same approach, with maps chosen by the card's container.",[220,1304,1308],{"className":1305,"code":1306,"language":1307,"meta":225,"style":225},"language-css shiki shiki-themes github-light-high-contrast github-dark-high-contrast",".product-slot { container-type: inline-size; }\n\n.product {\n  display: grid;\n  gap: 0.5rem 1rem;\n  grid-template-areas:\n    \"image\"\n    \"title\"\n    \"price\"\n    \"cta\";\n}\n\n@container (width > 28rem) {\n  .product {\n    grid-template-columns: 8rem 1fr auto;\n    grid-template-areas:\n      \"image title price\"\n      \"image cta   cta\";\n  }\n}\n\n.product__image { grid-area: image; }\n.product__title { grid-area: title; }\n.product__price { grid-area: price; }\n.product__cta   { grid-area: cta; }\n","css",[15,1309,1310,1321,1325,1332,1343,1361,1368,1373,1378,1383,1390,1395,1399,1407,1414,1434,1440,1445,1452,1456,1460,1464,1476,1488,1500],{"__ignoreMap":225},[229,1311,1312,1315,1317,1319],{"class":231,"line":232},[229,1313,1314],{"class":243},".product-slot",[229,1316,353],{"class":235},[229,1318,413],{"class":243},[229,1320,416],{"class":235},[229,1322,1323],{"class":231,"line":250},[229,1324,402],{"emptyLinePlaceholder":401},[229,1326,1327,1330],{"class":231,"line":270},[229,1328,1329],{"class":243},".product",[229,1331,430],{"class":235},[229,1333,1334,1337,1339,1341],{"class":231,"line":280},[229,1335,1336],{"class":243},"  display",[229,1338,359],{"class":235},[229,1340,441],{"class":243},[229,1342,444],{"class":235},[229,1344,1345,1348,1350,1353,1355,1357,1359],{"class":231,"line":298},[229,1346,1347],{"class":243},"  gap",[229,1349,359],{"class":235},[229,1351,1352],{"class":243},"0.5",[229,1354,458],{"class":376},[229,1356,682],{"class":243},[229,1358,458],{"class":376},[229,1360,444],{"class":235},[229,1362,1363,1366],{"class":231,"line":323},[229,1364,1365],{"class":243},"  grid-template-areas",[229,1367,490],{"class":235},[229,1369,1370],{"class":231,"line":337},[229,1371,1372],{"class":264},"    \"image\"\n",[229,1374,1375],{"class":231,"line":347},[229,1376,1377],{"class":264},"    \"title\"\n",[229,1379,1380],{"class":231,"line":398},[229,1381,1382],{"class":264},"    \"price\"\n",[229,1384,1385,1388],{"class":231,"line":405},[229,1386,1387],{"class":264},"    \"cta\"",[229,1389,444],{"class":235},[229,1391,1392],{"class":231,"line":419},[229,1393,1394],{"class":235},"}\n",[229,1396,1397],{"class":231,"line":424},[229,1398,402],{"emptyLinePlaceholder":401},[229,1400,1401,1404],{"class":231,"line":433},[229,1402,1403],{"class":376},"@container",[229,1405,1406],{"class":235}," (width > 28rem) {\n",[229,1408,1409,1412],{"class":231,"line":447},[229,1410,1411],{"class":243},"  .product",[229,1413,430],{"class":235},[229,1415,1416,1419,1421,1423,1425,1427,1429,1432],{"class":231,"line":463},[229,1417,1418],{"class":243},"    grid-template-columns",[229,1420,359],{"class":235},[229,1422,854],{"class":243},[229,1424,458],{"class":376},[229,1426,682],{"class":243},[229,1428,685],{"class":376},[229,1430,1431],{"class":243}," auto",[229,1433,444],{"class":235},[229,1435,1436,1438],{"class":231,"line":477},[229,1437,487],{"class":243},[229,1439,490],{"class":235},[229,1441,1442],{"class":231,"line":484},[229,1443,1444],{"class":264},"      \"image title price\"\n",[229,1446,1447,1450],{"class":231,"line":493},[229,1448,1449],{"class":264},"      \"image cta   cta\"",[229,1451,444],{"class":235},[229,1453,1454],{"class":231,"line":499},[229,1455,528],{"class":235},[229,1457,1458],{"class":231,"line":505},[229,1459,1394],{"class":235},[229,1461,1462],{"class":231,"line":511},[229,1463,402],{"emptyLinePlaceholder":401},[229,1465,1466,1469,1471,1473],{"class":231,"line":517},[229,1467,1468],{"class":243},".product__image",[229,1470,353],{"class":235},[229,1472,555],{"class":243},[229,1474,1475],{"class":235},": image; }\n",[229,1477,1478,1481,1483,1485],{"class":231,"line":525},[229,1479,1480],{"class":243},".product__title",[229,1482,353],{"class":235},[229,1484,555],{"class":243},[229,1486,1487],{"class":235},": title; }\n",[229,1489,1490,1493,1495,1497],{"class":231,"line":531},[229,1491,1492],{"class":243},".product__price",[229,1494,353],{"class":235},[229,1496,555],{"class":243},[229,1498,1499],{"class":235},": price; }\n",[229,1501,1502,1505,1507,1509],{"class":231,"line":536},[229,1503,1504],{"class":243},".product__cta",[229,1506,589],{"class":235},[229,1508,555],{"class":243},[229,1510,1511],{"class":235},": cta; }\n",[20,1513,1514,1515,1519],{},"If the card animates between layouts when its container crosses the threshold, animate a transform on the children rather than the grid itself, since grid template changes cannot be interpolated between different area maps. ",[35,1516,1518],{"href":1517},"\u002Fcss-only-micro-interactions-animations\u002Fkeyframe-animation-patterns\u002Fcontainer-query-triggered-keyframe-animations\u002F","Container-Query-Triggered Keyframe Animations"," shows how to play a short entrance at the moment of the switch.",[46,1521,1523],{"id":1522},"browser-support","Browser support",[20,1525,1526,1528,1529,1532],{},[15,1527,17],{}," is supported in Chrome 57+, Edge 16+, Firefox 52+ and Safari 10.1+, as are CSS Grid and ",[15,1530,1531],{},"minmax()",". Container queries, used to switch maps by container width, are supported in Chrome and Edge 105+, Firefox 110+ and Safari 16+; with a viewport media query in their place the same maps work in any grid-capable browser.",[46,1534,1536],{"id":1535},"faq","FAQ",[20,1538,1539,1545,1546,1549],{},[1082,1540,1541,1542,1544],{},"What does ",[15,1543,17],{}," do?","\nIt draws a named map of the grid as strings, one string per row, one name per cell. Children placed with ",[15,1547,1548],{},"grid-area: name"," occupy the cells with that name. Changing the map rearranges the layout without touching the children's rules.",[20,1551,1552,1558],{},[1082,1553,1554,1555,1557],{},"Can ",[15,1556,17],{}," reorder content?","\nIt can place any child in any area, so the visual order can differ from the DOM order. That is a common accessibility problem: keyboard focus and screen readers follow the DOM, so keep the visual reading order consistent with source order in every layout.",[20,1560,1561,1567,1568,1570],{},[1082,1562,1563,1564,1566],{},"How do I leave a cell empty in ",[15,1565,17],{},"?","\nUse one or more dots, as in ",[15,1569,1176],{},". A dot or a sequence of dots marks a cell with no named area, which stays empty unless an item is placed there by line numbers.",[20,1572,1573,1579],{},[1082,1574,1575,1576,1578],{},"Why is my ",[15,1577,17],{}," declaration ignored?","\nThe map is invalid. Every row must have the same number of cells, and each named area must form a single rectangle. An L-shaped area or a row with a missing cell invalidates the whole declaration.",[46,1581,1583],{"id":1582},"related","Related",[1585,1586,1587,1592,1599,1606],"ul",{},[1079,1588,1589,1591],{},[35,1590,38],{"href":37}," — the parent guide.",[1079,1593,1594,1598],{},[35,1595,1597],{"href":1596},"\u002Fmastering-container-queries-responsive-layouts\u002Fcss-grid-and-subgrid-layouts\u002Fholy-grail-layout-with-grid\u002F","Holy Grail Layout With Grid"," — the classic page shell built with areas.",[1079,1600,1601,1605],{},[35,1602,1604],{"href":1603},"\u002Fmastering-container-queries-responsive-layouts\u002Fcss-grid-and-subgrid-layouts\u002Foverlapping-elements-with-grid-stacking\u002F","Overlapping Elements With Grid Stacking"," — several items in one area.",[1079,1607,1608,1612],{},[35,1609,1611],{"href":1610},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns\u002Ftabs-that-become-accordions\u002F","Tabs That Become an Accordion"," — grid placement driving a component switch.",[342,1614,1615],{},"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":225,"searchDepth":250,"depth":250,"links":1617},[1618,1619,1620,1621,1622,1623,1624,1625,1626],{"id":48,"depth":250,"text":49},{"id":210,"depth":250,"text":211},{"id":1068,"depth":250,"text":1069},{"id":1202,"depth":250,"text":1203},{"id":1272,"depth":250,"text":1273},{"id":1298,"depth":250,"text":1299},{"id":1522,"depth":250,"text":1523},{"id":1535,"depth":250,"text":1536},{"id":1582,"depth":250,"text":1583},"Name layout regions with grid-template-areas and rearrange them per container size by redefining one property, while keeping reading order and focus aligned.","md",{"pageTitle":1630,"datePublished":1631,"dateModified":1631,"faq":1632},"Responsive Layouts With grid-template-areas","2026-09-18",[1633,1636,1639,1642],{"q":1634,"a":1635},"What does grid-template-areas do?","It draws a named map of the grid as strings, one string per row, one name per cell. Children placed with grid-area: name occupy the cells with that name. Changing the map rearranges the layout without touching the children's rules.",{"q":1637,"a":1638},"Can grid-template-areas reorder content?","It can place any child in any area, so the visual order can differ from the DOM order. That is a common accessibility problem: keyboard focus and screen readers follow the DOM, so keep the visual reading order consistent with source order in every layout.",{"q":1640,"a":1641},"How do I leave a cell empty in grid-template-areas?","Use one or more dots, as in \"header header\" \". main\". A dot or a sequence of dots marks a cell with no named area, which stays empty unless an item is placed there by line numbers.",{"q":1643,"a":1644},"Why is my grid-template-areas declaration ignored?","The map is invalid. Every row must have the same number of cells, and each named area must form a single rectangle. An L-shaped area or a row with a missing cell invalidates the whole declaration.","\u002Fmastering-container-queries-responsive-layouts\u002Fcss-grid-and-subgrid-layouts\u002Fgrid-template-areas-responsive-layouts",{"title":5,"description":1627},"mastering-container-queries-responsive-layouts\u002Fcss-grid-and-subgrid-layouts\u002Fgrid-template-areas-responsive-layouts\u002Findex","rTyHKD56-6nQcuiSzdrwFyIMtrlpSo2RWGPMVbvmpas",[1650,1653,1656,1659,1662,1665,1668,1671,1674,1677,1680,1683,1686,1689,1692,1695,1698,1701,1704,1707,1710,1713,1716,1719,1722,1725,1728,1731,1734,1737,1740,1743,1746,1749,1752,1755,1758,1761,1764,1767,1770,1773,1776,1779,1782,1785,1788,1791,1794,1797,1800,1803,1806,1809,1812,1815,1818,1821,1824,1827,1830,1833,1836,1839,1842,1845,1848,1851,1854,1857,1860,1863,1866,1869,1872,1875,1878,1881,1884,1887,1890,1893,1896,1899,1902,1905,1908,1911,1914,1917,1920,1923,1926,1929,1931,1934,1937,1940,1943,1946,1949,1952,1955,1958,1961,1964,1967,1970,1973,1976,1979,1982,1985,1988,1991,1994,1997,2000,2003,2006,2007,2010,2013,2016,2019,2022,2025,2028,2031,2034,2037,2040,2043,2046,2049,2052,2055,2058,2061,2064,2067,2069,2072,2075,2078,2081,2084,2087,2090,2093,2096,2099,2102,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],{"path":1651,"title":1652},"\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":1654,"title":1655},"\u002Fcss-only-micro-interactions-animations\u002Faccessibility-in-css-animations\u002Fflashing-content-and-seizure-thresholds","Flashing Content and Seizure Thresholds",{"path":1657,"title":1658},"\u002Fcss-only-micro-interactions-animations\u002Faccessibility-in-css-animations\u002Fforced-colors-mode-and-animations","Forced Colors Mode and Animations",{"path":1660,"title":1661},"\u002Fcss-only-micro-interactions-animations\u002Faccessibility-in-css-animations","Accessibility in CSS Animations: Patterns, Specs & Best Practices",{"path":1663,"title":1664},"\u002Fcss-only-micro-interactions-animations\u002Faccessibility-in-css-animations\u002Fpause-controls-for-looping-animations","Pause Controls for Looping CSS Animations: Meeting WCAG 2.2.2",{"path":1666,"title":1667},"\u002Fcss-only-micro-interactions-animations\u002Faccessibility-in-css-animations\u002Fprefers-reduced-motion-recipes","prefers-reduced-motion Recipes: A Reduction for Every Common Effect",{"path":1669,"title":1670},"\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":1672,"title":1673},"\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":1675,"title":1676},"\u002Fcss-only-micro-interactions-animations\u002Faccessibility-in-css-animations\u002Fvestibular-safe-animation-patterns","Vestibular-Safe Animation Patterns: Why Some Motion Makes People Sick",{"path":1678,"title":1679},"\u002Fcss-only-micro-interactions-animations\u002Faccessibility-in-css-animations\u002Fwcag-motion-success-criteria","WCAG Motion Success Criteria: What Each One Actually Requires",{"path":1681,"title":1682},"\u002Fcss-only-micro-interactions-animations\u002Fclip-path-and-mask-animations\u002Fanimated-gradient-borders-with-property","Animated Gradient Borders With @property: A Spinning Highlight Without Extra Elements",{"path":1684,"title":1685},"\u002Fcss-only-micro-interactions-animations\u002Fclip-path-and-mask-animations\u002Fclip-path-reveal-animations","Clip-Path Reveal Animations: Wipes, Irises and Corners Without Extra Markup",{"path":1687,"title":1688},"\u002Fcss-only-micro-interactions-animations\u002Fclip-path-and-mask-animations","Clip-Path & Mask Animations: Animating Visibility Instead of Position",{"path":1690,"title":1691},"\u002Fcss-only-micro-interactions-animations\u002Fclip-path-and-mask-animations\u002Fmask-image-fade-edges","Fading Edges With mask-image: Soft Boundaries That Work on Any Background",{"path":1693,"title":1694},"\u002Fcss-only-micro-interactions-animations\u002Fclip-path-and-mask-animations\u002Fmorphing-shapes-with-clip-path-polygon","Morphing Shapes With clip-path: polygon(): Point-Matched Transitions",{"path":1696,"title":1697},"\u002Fcss-only-micro-interactions-animations\u002Fcolor-and-theme-transitions\u002Fanimating-gradients","Animating CSS Gradients: Smooth Colour Motion Without Jumps",{"path":1699,"title":1700},"\u002Fcss-only-micro-interactions-animations\u002Fcolor-and-theme-transitions\u002Fcolor-mix-hover-states","Hover and Active States With color-mix(): One Token, Every Shade",{"path":1702,"title":1703},"\u002Fcss-only-micro-interactions-animations\u002Fcolor-and-theme-transitions","Color & Theme Transitions: Colour as Part of the Motion System",{"path":1705,"title":1706},"\u002Fcss-only-micro-interactions-animations\u002Fcolor-and-theme-transitions\u002Flight-dark-function-for-themes","Light and Dark Themes With light-dark(): One Declaration per Colour",{"path":1708,"title":1709},"\u002Fcss-only-micro-interactions-animations\u002Fcolor-and-theme-transitions\u002Fsmooth-theme-switching-transitions","Smooth Theme Switching: Crossfades, Circular Reveals and No Flash",{"path":1711,"title":1712},"\u002Fcss-only-micro-interactions-animations\u002Fcontainer-aware-motion\u002Fcontainer-query-hover-affordances","Container Query Hover Affordances: When Narrow Means Persistent, Not Hidden",{"path":1714,"title":1715},"\u002Fcss-only-micro-interactions-animations\u002Fcontainer-aware-motion","Container-Aware Motion: Animation Sized by the Space a Component Actually Has",{"path":1717,"title":1718},"\u002Fcss-only-micro-interactions-animations\u002Fcontainer-aware-motion\u002Flayout-change-animations-at-container-breakpoints","Animating Changes at Container Breakpoints",{"path":1720,"title":1721},"\u002Fcss-only-micro-interactions-animations\u002Fcontainer-aware-motion\u002Fmotion-driven-by-container-style-queries","Motion Driven by Container Style Queries",{"path":1723,"title":1724},"\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":1726,"title":1727},"\u002Fcss-only-micro-interactions-animations\u002Fcontainer-aware-motion\u002Fsuppressing-motion-in-small-containers","Suppressing Motion in Small Containers: Deliberately Animating Nothing",{"path":1729,"title":1730},"\u002Fcss-only-micro-interactions-animations\u002Fcss-animation-vs-web-animations-api\u002Fcontrolling-css-animations-from-javascript","Controlling CSS Animations From JavaScript",{"path":1732,"title":1733},"\u002Fcss-only-micro-interactions-animations\u002Fcss-animation-vs-web-animations-api","CSS Animation vs the Web Animations API: A Decision Guide",{"path":1735,"title":1736},"\u002Fcss-only-micro-interactions-animations\u002Fcss-animation-vs-web-animations-api\u002Fwaapi-vs-css-for-interruptible-ui","Interruptible UI: CSS Transitions vs WAAPI",{"path":1738,"title":1739},"\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":1741,"title":1742},"\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":1744,"title":1745},"\u002Fcss-only-micro-interactions-animations\u002Fcss-custom-properties-architecture\u002Fcustom-property-fallbacks-and-invalid-values","Custom Property Fallbacks and Invalid Values",{"path":1747,"title":1748},"\u002Fcss-only-micro-interactions-animations\u002Fcss-custom-properties-architecture\u002Ffluid-spacing-tokens-driving-transition-durations","Fluid Spacing Tokens That Drive Transition Durations",{"path":1750,"title":1751},"\u002Fcss-only-micro-interactions-animations\u002Fcss-custom-properties-architecture","CSS Custom Properties Architecture: Scalable Design Systems & Dynamic UI",{"path":1753,"title":1754},"\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":1756,"title":1757},"\u002Fcss-only-micro-interactions-animations\u002Fcss-custom-properties-architecture\u002Fscoping-custom-properties-to-components","Scoping Custom Properties to Components",{"path":1759,"title":1760},"\u002Fcss-only-micro-interactions-animations\u002Fcss-transition-fundamentals\u002Fcss-transition-timing-functions","CSS Transition Timing Functions: ease, cubic-bezier(), steps() and linear()",{"path":1762,"title":1763},"\u002Fcss-only-micro-interactions-animations\u002Fcss-transition-fundamentals","CSS Transition Fundamentals: Architecture, Performance & Patterns",{"path":1765,"title":1766},"\u002Fcss-only-micro-interactions-animations\u002Fcss-transition-fundamentals\u002Finterrupted-and-reversing-transitions","Interrupted and Reversing Transitions: What Happens Mid-Flight",{"path":1768,"title":1769},"\u002Fcss-only-micro-interactions-animations\u002Fcss-transition-fundamentals\u002Fstarting-style-entry-animations","@starting-style: Animating an Element's Very First Style Change",{"path":1771,"title":1772},"\u002Fcss-only-micro-interactions-animations\u002Fcss-transition-fundamentals\u002Ftransition-delay-choreography","Choreographing Motion With transition-delay",{"path":1774,"title":1775},"\u002Fcss-only-micro-interactions-animations\u002Fcss-transition-fundamentals\u002Ftransition-shorthand-and-multiple-properties","The transition Shorthand and Multiple Properties",{"path":1777,"title":1778},"\u002Fcss-only-micro-interactions-animations\u002Fcss-transition-fundamentals\u002Ftransitioning-display-with-allow-discrete","Transitioning display with transition-behavior: allow-discrete and @starting-style",{"path":1780,"title":1781},"\u002Fcss-only-micro-interactions-animations\u002Fdialog-and-popover-animations\u002Fanimating-dialog-open-and-close","Animating \u003Cdialog> Open and Close: Both Directions, No Library",{"path":1783,"title":1784},"\u002Fcss-only-micro-interactions-animations\u002Fdialog-and-popover-animations\u002Fbackdrop-animations","Animating ::backdrop: Fades and Blurs Behind Dialogs and Popovers",{"path":1786,"title":1787},"\u002Fcss-only-micro-interactions-animations\u002Fdialog-and-popover-animations","Dialog & Popover Animations: Motion for the Top Layer",{"path":1789,"title":1790},"\u002Fcss-only-micro-interactions-animations\u002Fdialog-and-popover-animations\u002Finterpolate-size-for-height-auto-animation","Animating to height: auto With interpolate-size and calc-size()",{"path":1792,"title":1793},"\u002Fcss-only-micro-interactions-animations\u002Fdialog-and-popover-animations\u002Fpopover-entry-and-exit-transitions","Popover Menus That Animate From Their Anchor",{"path":1795,"title":1796},"\u002Fcss-only-micro-interactions-animations\u002Feasing-and-motion-design\u002Fchoosing-animation-durations","Choosing Animation Durations: How Long Motion Should Last",{"path":1798,"title":1799},"\u002Fcss-only-micro-interactions-animations\u002Feasing-and-motion-design\u002Fcubic-bezier-overshoot-and-anticipation","Overshoot and Anticipation With cubic-bezier(): Motion With Character",{"path":1801,"title":1802},"\u002Fcss-only-micro-interactions-animations\u002Feasing-and-motion-design\u002Fentry-vs-exit-easing","Entry vs Exit Easing: Different Curves for Arriving and Leaving",{"path":1804,"title":1805},"\u002Fcss-only-micro-interactions-animations\u002Feasing-and-motion-design","Easing & Motion Design: Making CSS Motion Feel Intentional",{"path":1807,"title":1808},"\u002Fcss-only-micro-interactions-animations\u002Feasing-and-motion-design\u002Flinear-easing-function-for-springs","Spring and Bounce Easing With linear(): Physical Motion Without JavaScript",{"path":1810,"title":1811},"\u002Fcss-only-micro-interactions-animations\u002Feasing-and-motion-design\u002Fsteps-easing-for-sprite-animations","steps() Easing: Sprite Sheets, Typewriters and Other Frame-by-Frame Effects",{"path":1813,"title":1814},"\u002Fcss-only-micro-interactions-animations\u002Fhover-focus-state-design\u002Faccessible-css-only-tooltips","Accessible CSS-Only Tooltips and Hover Cards With  and ",{"path":1816,"title":1817},"\u002Fcss-only-micro-interactions-animations\u002Fhover-focus-state-design\u002Fbutton-press-and-active-states","Button Press and  States",{"path":1819,"title":1820},"\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":1822,"title":1823},"\u002Fcss-only-micro-interactions-animations\u002Fhover-focus-state-design\u002Ffocus-within-form-patterns"," Form Patterns: Styling a Group From the Field Inside It",{"path":1825,"title":1826},"\u002Fcss-only-micro-interactions-animations\u002Fhover-focus-state-design\u002Fhover-intent-delays-with-transition-delay","Hover Intent Delays With transition-delay: Menus That Don't Flicker",{"path":1828,"title":1829},"\u002Fcss-only-micro-interactions-animations\u002Fhover-focus-state-design","Hover & Focus State Design: Spec-Compliant Patterns for Modern UIs",{"path":1831,"title":1832},"\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":1834,"title":1835},"\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":1837,"title":1838},"\u002Fcss-only-micro-interactions-animations","CSS-Only Micro-Interactions & Animations: Architecture, Performance & Implementation",{"path":1840,"title":1841},"\u002Fcss-only-micro-interactions-animations\u002Fkeyframe-animation-patterns\u002Fanimation-composition-and-stacking","Stacking Animations With animation-composition",{"path":1843,"title":1844},"\u002Fcss-only-micro-interactions-animations\u002Fkeyframe-animation-patterns\u002Fanimation-fill-mode-explained","animation-fill-mode: What an Animation Applies Before and After It Runs",{"path":1846,"title":1847},"\u002Fcss-only-micro-interactions-animations\u002Fkeyframe-animation-patterns\u002Fcontainer-query-triggered-keyframe-animations","Container-Query-Triggered Keyframe Animations: Animate Differently per Available Space",{"path":1849,"title":1850},"\u002Fcss-only-micro-interactions-animations\u002Fkeyframe-animation-patterns\u002Fcss-only-accordions-and-disclosure","CSS-Only Accordions and Disclosure Widgets with details and summary",{"path":1852,"title":1853},"\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":1855,"title":1856},"\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":1858,"title":1859},"\u002Fcss-only-micro-interactions-animations\u002Fkeyframe-animation-patterns","Keyframe Animation Patterns: Spec-Compliant Architectures for Modern UIs",{"path":1861,"title":1862},"\u002Fcss-only-micro-interactions-animations\u002Fkeyframe-animation-patterns\u002Fmulti-step-keyframes-and-per-keyframe-easing","Multi-Step Keyframes and Per-Keyframe Easing",{"path":1864,"title":1865},"\u002Fcss-only-micro-interactions-animations\u002Fkeyframe-animation-patterns\u002Fstaggered-list-animations-with-custom-properties","Staggered List Animations Using --i Index Custom Properties",{"path":1867,"title":1868},"\u002Fcss-only-micro-interactions-animations\u002Fperformance-gpu-acceleration\u002Fanimating-box-shadow-and-filters-cheaply","Animating box-shadow and Filters Cheaply",{"path":1870,"title":1871},"\u002Fcss-only-micro-interactions-animations\u002Fperformance-gpu-acceleration\u002Fcontain-property-for-animation-performance","The contain Property for Animation Performance",{"path":1873,"title":1874},"\u002Fcss-only-micro-interactions-animations\u002Fperformance-gpu-acceleration\u002Fcss-triggers-layout-paint-composite","Layout, Paint and Composite: What Triggers What",{"path":1876,"title":1877},"\u002Fcss-only-micro-interactions-animations\u002Fperformance-gpu-acceleration","Performance & GPU Acceleration in CSS: A Developer’s Blueprint",{"path":1879,"title":1880},"\u002Fcss-only-micro-interactions-animations\u002Fperformance-gpu-acceleration\u002Foptimizing-css-animations-for-60fps","Optimizing CSS Animations for 60fps: Budgeting the Frame",{"path":1882,"title":1883},"\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":1885,"title":1886},"\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":1888,"title":1889},"\u002Fcss-only-micro-interactions-animations\u002Fscroll-driven-animations","Scroll-Driven Animations: Binding Motion to Scroll Position in Pure CSS",{"path":1891,"title":1892},"\u002Fcss-only-micro-interactions-animations\u002Fscroll-driven-animations\u002Fscroll-driven-animation-fallbacks","Shipping Scroll-Driven Animations Without Breaking Anything",{"path":1894,"title":1895},"\u002Fcss-only-micro-interactions-animations\u002Fscroll-driven-animations\u002Fscroll-driven-parallax-effects","Scroll-Driven Parallax Effects in CSS",{"path":1897,"title":1898},"\u002Fcss-only-micro-interactions-animations\u002Fscroll-driven-animations\u002Fscroll-progress-bar-without-javascript","A Reading Progress Bar Driven by scroll(root)",{"path":1900,"title":1901},"\u002Fcss-only-micro-interactions-animations\u002Fscroll-driven-animations\u002Fscroll-triggered-reveal-animations","Reveal-on-Scroll with view() and animation-range",{"path":1903,"title":1904},"\u002Fcss-only-micro-interactions-animations\u002Fscroll-driven-animations\u002Ftimeline-scope-for-cross-element-animations","timeline-scope for Cross-Element Animations",{"path":1906,"title":1907},"\u002Fcss-only-micro-interactions-animations\u002Fscroll-driven-animations\u002Fview-timeline-and-animation-range","View Timelines and animation-range",{"path":1909,"title":1910},"\u002Fcss-only-micro-interactions-animations\u002Fview-transitions-for-css-developers\u002Fcross-document-view-transitions","Cross-Document View Transitions",{"path":1912,"title":1913},"\u002Fcss-only-micro-interactions-animations\u002Fview-transitions-for-css-developers","View Transitions for CSS Developers: the Pseudo-Element Tree, Snapshots, and Named Elements",{"path":1915,"title":1916},"\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":1918,"title":1919},"\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":1921,"title":1922},"\u002Fcss-only-micro-interactions-animations\u002Fview-transitions-for-css-developers\u002Fview-transition-types-and-classes","View Transition Types and Classes",{"path":1924,"title":1925},"\u002Fcss-only-micro-interactions-animations\u002Fview-transitions-for-css-developers\u002Fview-transitions-for-list-reordering","View Transitions for List Reordering",{"path":1927,"title":1928},"\u002Fcss-only-micro-interactions-animations\u002Fview-transitions-for-css-developers\u002Fview-transitions-with-reduced-motion","Honouring prefers-reduced-motion in View Transitions",{"path":380,"title":1930},"Modern CSS Layouts & Micro-Interactions",{"path":1932,"title":1933},"\u002Fmastering-container-queries-responsive-layouts\u002Fanchor-positioning-and-overlays\u002Fanchor-positioned-tooltips","Anchor-Positioned Tooltips: Tethering, Flipping, and Getting the Semantics Right",{"path":1935,"title":1936},"\u002Fmastering-container-queries-responsive-layouts\u002Fanchor-positioning-and-overlays\u002Fanchor-positioning-fallbacks","Anchor Positioning Fallbacks: A Graceful Floor for Older Browser Versions",{"path":1938,"title":1939},"\u002Fmastering-container-queries-responsive-layouts\u002Fanchor-positioning-and-overlays\u002Fanchor-size-for-matching-widths","anchor-size(): Overlays That Match Their Trigger's Size",{"path":1941,"title":1942},"\u002Fmastering-container-queries-responsive-layouts\u002Fanchor-positioning-and-overlays","CSS Anchor Positioning and Overlays: Tethering Elements Without JavaScript",{"path":1944,"title":1945},"\u002Fmastering-container-queries-responsive-layouts\u002Fanchor-positioning-and-overlays\u002Fpopover-attribute-and-css-styling","The popover Attribute: Top-Layer Overlays With No JavaScript",{"path":1947,"title":1948},"\u002Fmastering-container-queries-responsive-layouts\u002Fanchor-positioning-and-overlays\u002Fpopover-light-dismiss-and-stacking","Popover Light Dismiss, Nesting and Stacking",{"path":1950,"title":1951},"\u002Fmastering-container-queries-responsive-layouts\u002Fanchor-positioning-and-overlays\u002Fposition-area-grid-explained","position-area: The Anchor Placement Grid",{"path":1953,"title":1954},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-fallbacks\u002Fcontainer-query-polyfill-tradeoffs","Container Query Polyfills: What They Cost and When to Skip Them",{"path":1956,"title":1957},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-fallbacks\u002Ffeature-detection-with-supports","Feature Detection with @supports: Syntax, Semantics, and the Traps",{"path":1959,"title":1960},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-fallbacks\u002Fhandling-container-query-fallbacks-for-older-browsers","Handling Container Query Fallbacks for Older Browsers",{"path":1962,"title":1963},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-fallbacks","Container Query Fallbacks: Spec-Compliant CSS Strategies for Legacy Browsers",{"path":1965,"title":1966},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-fallbacks\u002Fintrinsic-layout-fallbacks-without-queries","Intrinsic Layout Fallbacks: Baselines That Adapt Without Any Query",{"path":1968,"title":1969},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-fallbacks\u002Ftesting-fallbacks-without-old-browsers","Testing CSS Fallbacks Without an Old Browser",{"path":1971,"title":1972},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-syntax-basics\u002Fcontainer-queries-inside-css-nesting","Container Queries Inside CSS Nesting: Keeping Responses Next to the Styles They Change",{"path":1974,"title":1975},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-syntax-basics\u002Fcontainer-query-range-and-logic-operators","Container Query Range Syntax and Logic Operators",{"path":1977,"title":1978},"\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":1980,"title":1981},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-syntax-basics\u002Fcontainer-type-size-vs-inline-size","Choosing container-type: inline-size, size, or normal",{"path":1983,"title":1984},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-syntax-basics\u002Fcontainer-vs-media-queries-comparison","Container vs Media Queries: Choosing the Right Reference Box",{"path":1986,"title":1987},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-syntax-basics\u002Fdebugging-container-queries-in-devtools","Debugging Container Queries in DevTools: Why a Rule Doesn't Match",{"path":1989,"title":1990},"\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":1992,"title":1993},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-syntax-basics","Container Query Syntax Basics",{"path":1995,"title":1996},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-syntax-basics\u002Fnesting-and-naming-container-queries","Nesting and Naming Container Queries: Targeting the Right Ancestor",{"path":1998,"title":1999},"\u002Fmastering-container-queries-responsive-layouts\u002Fcss-grid-and-subgrid-layouts\u002Fauto-fit-minmax-responsive-grids","Responsive Grids with repeat(auto-fit, minmax())",{"path":2001,"title":2002},"\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":2004,"title":2005},"\u002Fmastering-container-queries-responsive-layouts\u002Fcss-grid-and-subgrid-layouts\u002Fgrid-auto-flow-dense-packing","grid-auto-flow: dense for Packed Layouts",{"path":1645,"title":5},{"path":2008,"title":2009},"\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":2011,"title":2012},"\u002Fmastering-container-queries-responsive-layouts\u002Fcss-grid-and-subgrid-layouts","CSS Grid and Subgrid Layouts for Responsive Interfaces",{"path":2014,"title":2015},"\u002Fmastering-container-queries-responsive-layouts\u002Fcss-grid-and-subgrid-layouts\u002Fmasonry-style-layouts-with-grid","Masonry-Style Layouts With the CSS That Ships Today",{"path":2017,"title":2018},"\u002Fmastering-container-queries-responsive-layouts\u002Fcss-grid-and-subgrid-layouts\u002Foverlapping-elements-with-grid-stacking","Overlapping Elements With Grid Stacking: Layers Without position: absolute",{"path":2020,"title":2021},"\u002Fmastering-container-queries-responsive-layouts\u002Fcss-grid-and-subgrid-layouts\u002Fsubgrid-vs-nested-grid","Subgrid vs an Independently Nested Grid",{"path":2023,"title":2024},"\u002Fmastering-container-queries-responsive-layouts\u002Fflexbox-layout-patterns\u002Fcentering-in-css-every-method","Centering in CSS: Every Modern Method and When Each One Breaks",{"path":2026,"title":2027},"\u002Fmastering-container-queries-responsive-layouts\u002Fflexbox-layout-patterns\u002Fflex-basis-vs-width","flex-basis vs width: Which Size a Flex Item Actually Starts From",{"path":2029,"title":2030},"\u002Fmastering-container-queries-responsive-layouts\u002Fflexbox-layout-patterns\u002Fflex-grow-and-flex-shrink-explained","flex-grow and flex-shrink Explained",{"path":2032,"title":2033},"\u002Fmastering-container-queries-responsive-layouts\u002Fflexbox-layout-patterns\u002Fflex-wrap-intrinsic-responsive-rows","Breakpoint-Free Responsive Rows With flex-wrap and flex-basis",{"path":2035,"title":2036},"\u002Fmastering-container-queries-responsive-layouts\u002Fflexbox-layout-patterns\u002Fflexbox-gap-and-spacing","Flexbox gap vs Margins: Spacing Items Without Edge Hacks",{"path":2038,"title":2039},"\u002Fmastering-container-queries-responsive-layouts\u002Fflexbox-layout-patterns","Flexbox Layout Patterns: One-Dimensional Layout for Real Components",{"path":2041,"title":2042},"\u002Fmastering-container-queries-responsive-layouts\u002Fflexbox-layout-patterns\u002Fsticky-footer-with-flexbox-and-grid","Sticky Footer With Flexbox or Grid: Pinning the Footer on Short Pages",{"path":2044,"title":2045},"\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":2047,"title":2048},"\u002Fmastering-container-queries-responsive-layouts\u002Ffluid-typography-with-clamp\u002Fdebugging-clamp-values","Debugging clamp(): Values That Are Ignored, Stuck or Never Fluid",{"path":2050,"title":2051},"\u002Fmastering-container-queries-responsive-layouts\u002Ffluid-typography-with-clamp\u002Ffluid-line-height-and-measure","Fluid Line Height and Measure: Keeping Text Readable as It Scales",{"path":2053,"title":2054},"\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":2056,"title":2057},"\u002Fmastering-container-queries-responsive-layouts\u002Ffluid-typography-with-clamp\u002Ffluid-type-accessibility-and-zoom","Fluid Type, Accessibility and Zoom: The vw-Only Trap",{"path":2059,"title":2060},"\u002Fmastering-container-queries-responsive-layouts\u002Ffluid-typography-with-clamp\u002Ffluid-typography-without-javascript","Fluid Typography Without JavaScript: A Precision CSS Reference",{"path":2062,"title":2063},"\u002Fmastering-container-queries-responsive-layouts\u002Ffluid-typography-with-clamp","Fluid Typography with clamp(): A Practical Guide for Modern CSS",{"path":2065,"title":2066},"\u002Fmastering-container-queries-responsive-layouts\u002Ffluid-typography-with-clamp\u002Ftext-wrap-balance-and-pretty","text-wrap: balance and pretty: Better Line Breaks Without Manual Breaks",{"path":2068,"title":43},"\u002Fmastering-container-queries-responsive-layouts",{"path":2070,"title":2071},"\u002Fmastering-container-queries-responsive-layouts\u002Fintrinsic-sizing-techniques\u002Faspect-ratio-for-responsive-media","Using aspect-ratio for Responsive Media and Preventing Layout Shift",{"path":2073,"title":2074},"\u002Fmastering-container-queries-responsive-layouts\u002Fintrinsic-sizing-techniques\u002Fcontent-visibility-and-contain-intrinsic-size","content-visibility and contain-intrinsic-size: Rendering Only What Is Near the Screen",{"path":2076,"title":2077},"\u002Fmastering-container-queries-responsive-layouts\u002Fintrinsic-sizing-techniques","Intrinsic Sizing Techniques: Modern CSS Layouts for Responsive UI",{"path":2079,"title":2080},"\u002Fmastering-container-queries-responsive-layouts\u002Fintrinsic-sizing-techniques\u002Flayout-widths-with-min-max-clamp","Layout Widths With min(), max() and clamp(): Sizing Without Breakpoints",{"path":2082,"title":2083},"\u002Fmastering-container-queries-responsive-layouts\u002Fintrinsic-sizing-techniques\u002Fmin-max-fit-content-explained","min-content, max-content, and fit-content() Explained",{"path":2085,"title":2086},"\u002Fmastering-container-queries-responsive-layouts\u002Fintrinsic-sizing-techniques\u002Fobject-fit-and-object-position","object-fit and object-position: Images That Fit Any Box",{"path":2088,"title":2089},"\u002Fmastering-container-queries-responsive-layouts\u002Fintrinsic-sizing-techniques\u002Fpreventing-flex-and-grid-overflow","The min-width: auto Trap in Flex and Grid Layouts",{"path":2091,"title":2092},"\u002Fmastering-container-queries-responsive-layouts\u002Fmodern-css-reset-strategies\u002Fcascade-layers-for-reset-and-tokens","Cascade Layers for Reset and Design Tokens",{"path":2094,"title":2095},"\u002Fmastering-container-queries-responsive-layouts\u002Fmodern-css-reset-strategies\u002Fcascade-layers-vs-specificity-hacks","Cascade Layers vs Specificity Hacks: Ordering Instead of Escalating",{"path":2097,"title":2098},"\u002Fmastering-container-queries-responsive-layouts\u002Fmodern-css-reset-strategies\u002Fcss-scope-for-component-styles","@scope for Component Styles: Short Selectors That Cannot Leak",{"path":2100,"title":2101},"\u002Fmastering-container-queries-responsive-layouts\u002Fmodern-css-reset-strategies","Modern CSS Reset Strategies: A Spec-Compliant Foundation",{"path":2103,"title":2104},"\u002Fmastering-container-queries-responsive-layouts\u002Fmodern-css-reset-strategies\u002Frevert-layer-and-revert-keywords","initial, inherit, unset, revert and revert-layer: Undoing Styles Correctly",{"path":2106,"title":2107},"\u002Fmastering-container-queries-responsive-layouts\u002Fmodern-css-reset-strategies\u002Fwriting-a-minimal-modern-reset","Writing a Minimal Modern CSS Reset: Every Line Justified",{"path":2109,"title":2110},"\u002Fmastering-container-queries-responsive-layouts\u002Fparent-aware-layouts-with-has\u002Fcontent-aware-card-layouts-with-has","Content-Aware Card Layouts With :has(): One Component, Many Shapes",{"path":2112,"title":2113},"\u002Fmastering-container-queries-responsive-layouts\u002Fparent-aware-layouts-with-has\u002Fempty-and-loading-states-with-has","Empty and Loading States With ()",{"path":2115,"title":2116},"\u002Fmastering-container-queries-responsive-layouts\u002Fparent-aware-layouts-with-has\u002Fform-validation-layouts-with-has","Form Validation Layouts With :has(): Styling Groups From Field State",{"path":2118,"title":2119},"\u002Fmastering-container-queries-responsive-layouts\u002Fparent-aware-layouts-with-has\u002Fhas-selector-performance",":has() Selector Performance: What Is Cheap, What Is Not, and How to Measure",{"path":2121,"title":2122},"\u002Fmastering-container-queries-responsive-layouts\u002Fparent-aware-layouts-with-has\u002Fhas-vs-container-style-queries",":has() vs Container Style Queries: Discovered State and Published State",{"path":2124,"title":2125},"\u002Fmastering-container-queries-responsive-layouts\u002Fparent-aware-layouts-with-has","Parent-Aware Layouts With :has(): Letting Containers React to Their Contents",{"path":2127,"title":2128},"\u002Fmastering-container-queries-responsive-layouts\u002Fparent-aware-layouts-with-has\u002Fquantity-queries-with-has","Quantity Queries With :has(): Layouts That Respond to How Many Items There Are",{"path":2130,"title":2131},"\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":2133,"title":2134},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns\u002Fcontainer-query-data-tables","Container Query Data Tables: Reflowing Tables to Cards",{"path":2136,"title":2137},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns\u002Fcontainer-query-sidebar-layouts","Container Query Sidebar Layouts That Travel Between Contexts",{"path":2139,"title":2140},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns","Responsive Component Patterns: Architecture & Implementation",{"path":2142,"title":2143},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns\u002Fresponsive-forms-with-container-queries","Responsive Forms with Container Queries: Reflow Without Losing the Wiring",{"path":2145,"title":2146},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns\u002Fresponsive-hero-sections-with-container-queries","Responsive Hero Sections With Container Queries",{"path":2148,"title":2149},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns\u002Fresponsive-navigation-without-media-queries","Responsive Navigation Without Media Queries Using Container Queries",{"path":2151,"title":2152},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns\u002Fresponsive-pricing-tables","Responsive Pricing Tables: Aligned Features, a Clear Recommendation, Any Width",{"path":2154,"title":2155},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns\u002Ftabs-that-become-accordions","Tabs That Become an Accordion: One Component, Two Layouts",{"path":2157,"title":2158},"\u002Fmastering-container-queries-responsive-layouts\u002Fscroll-snap-and-overflow-layouts\u002Fcss-only-carousel-with-scroll-snap","A CSS-Only Carousel With Scroll Snap",{"path":2160,"title":2161},"\u002Fmastering-container-queries-responsive-layouts\u002Fscroll-snap-and-overflow-layouts\u002Fhorizontal-scrolling-card-rows","Horizontal Scrolling Card Rows: Swipeable Lists That Stay in Their Lane",{"path":2163,"title":2164},"\u002Fmastering-container-queries-responsive-layouts\u002Fscroll-snap-and-overflow-layouts","Scroll Snap & Overflow Layouts: Designing Components That Scroll on Purpose",{"path":2166,"title":2167},"\u002Fmastering-container-queries-responsive-layouts\u002Fscroll-snap-and-overflow-layouts\u002Foverscroll-behavior-for-nested-scrolling","overscroll-behavior: Taming Nested Scrolling, Pull-to-Refresh and Back-Swipe",{"path":2169,"title":2170},"\u002Fmastering-container-queries-responsive-layouts\u002Fscroll-snap-and-overflow-layouts\u002Fscroll-margin-and-scroll-padding-for-sticky-headers","scroll-margin and scroll-padding: Keeping Targets Clear of Sticky Headers",{"path":2172,"title":2173},"\u002Fmastering-container-queries-responsive-layouts\u002Fstyle-queries-and-container-state\u002Fcombining-size-and-style-queries","Combining Size and Style Container Queries",{"path":2175,"title":2176},"\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":2178,"title":2179},"\u002Fmastering-container-queries-responsive-layouts\u002Fstyle-queries-and-container-state","Style Queries and Container State: Token-Driven Component Variants",{"path":2181,"title":2182},"\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":2184,"title":2185},"\u002Fmastering-container-queries-responsive-layouts\u002Fstyle-queries-and-container-state\u002Fstyle-query-component-variants","Component Variants With Style Queries: One Token, Many Looks",{"path":2187,"title":2188},"\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",{"path":2190,"title":2191},"\u002Fmastering-container-queries-responsive-layouts\u002Fviewport-units-and-mobile-layout\u002Fdvh-svh-lvh-mobile-viewport-units","dvh, svh and lvh: Choosing the Right Mobile Viewport Unit",{"path":2193,"title":2194},"\u002Fmastering-container-queries-responsive-layouts\u002Fviewport-units-and-mobile-layout\u002Ffull-bleed-sections-in-constrained-layouts","Full-Bleed Sections in a Constrained Layout: Breaking Out Without Breaking the Page",{"path":2196,"title":2197},"\u002Fmastering-container-queries-responsive-layouts\u002Fviewport-units-and-mobile-layout","Viewport Units & Mobile Layout: Designing for the Screen You Actually Get",{"path":2199,"title":2200},"\u002Fmastering-container-queries-responsive-layouts\u002Fviewport-units-and-mobile-layout\u002Fsafe-area-insets-for-notched-screens","Safe Area Insets: Designing Around Notches, Corners and Home Indicators",{"path":2202,"title":2203},"\u002Fmastering-container-queries-responsive-layouts\u002Fviewport-units-and-mobile-layout\u002Fviewport-units-vs-container-units","Viewport Units vs Container Units: Choosing the Right Reference Box",{"path":2205,"title":2206},"\u002Fmastering-container-queries-responsive-layouts\u002Fviewport-units-and-mobile-layout\u002Fvirtual-keyboard-and-interactive-widget","Layouts That Survive the Virtual Keyboard",{"title":2208,"caption":2209,"height":2210,"resizable":401,"html":2211,"css":2212},"Page shell rearranged by three area maps","Drag the frame: one column when narrow, nav beside main above 40rem, and three columns above 64rem. Source order never changes.",380,"\n\u003Cdiv class=\"shell-host\">\n  \u003Cdiv class=\"shell\">\n    \u003Cheader>Header\u003C\u002Fheader>\n    \u003Cnav aria-label=\"Section\">Navigation\u003C\u002Fnav>\n    \u003Cmain>Main content\u003C\u002Fmain>\n    \u003Caside>Related\u003C\u002Faside>\n    \u003Cfooter>Footer\u003C\u002Ffooter>\n  \u003C\u002Fdiv>\n\u003C\u002Fdiv>","\nbody { display: block; padding: 0; }\n.shell-host { container-type: inline-size; }\n.shell { display: grid; gap: 0.75rem; padding: 1rem; grid-template-areas: \"header\" \"nav\" \"main\" \"aside\" \"footer\"; }\n.shell > header { grid-area: header; }\n.shell > nav { grid-area: nav; }\n.shell > main { grid-area: main; min-width: 0; min-height: 4rem; }\n.shell > aside { grid-area: aside; }\n.shell > footer { grid-area: footer; }\n@container (width > 40rem) {\n  .shell { grid-template-columns: 10rem 1fr; grid-template-areas: \"header header\" \"nav main\" \"aside aside\" \"footer footer\"; }\n}\n@container (width > 64rem) {\n  .shell { grid-template-columns: 10rem 1fr 12rem; grid-template-areas: \"header header header\" \"nav main aside\" \"footer footer footer\"; }\n}\n.shell > * { padding: 0.6rem; border-radius: 8px; background: var(--demo-surface); border: 1px solid var(--demo-border); }",1789717747879]