[{"data":1,"prerenderedAt":2224},["ShallowReactive",2],{"page-\u002Fmastering-container-queries-responsive-layouts\u002Fviewport-units-and-mobile-layout\u002Ffull-bleed-sections-in-constrained-layouts\u002F":3,"content-all-pages":1660,"live-demo:vp-full-bleed-grid":2218},{"id":4,"title":5,"body":6,"description":1641,"extension":1642,"meta":1643,"navigation":384,"path":1656,"seo":1657,"stem":1658,"__hash__":1659},"content\u002Fmastering-container-queries-responsive-layouts\u002Fviewport-units-and-mobile-layout\u002Ffull-bleed-sections-in-constrained-layouts\u002Findex.md","Full-Bleed Sections in a Constrained Layout: Breaking Out Without Breaking the Page",{"type":7,"value":8,"toc":1631},"minimark",[9,13,37,42,52,73,158,180,184,187,191,1195,1213,1217,1244,1329,1336,1340,1343,1365,1371,1385,1388,1392,1399,1469,1488,1514,1525,1529,1545,1549,1563,1584,1590,1596,1600,1628],[10,11,5],"h1",{"id":12},"full-bleed-sections-in-a-constrained-layout-breaking-out-without-breaking-the-page",[14,15,16,17,21,22,25,26,31,32,36],"p",{},"Long-form pages keep text in a comfortable measure — 60 to 75 characters — centred in the viewport. Then design asks for a photo that runs edge to edge, a coloured quote band, or a wide data table that needs more room than the text column. The obvious fix, ",[18,19,20],"code",{},"width: 100vw"," with a negative margin, works until a Windows user with classic scrollbars opens the page and finds a horizontal scrollbar the width of the vertical one. This page shows the grid-based alternative that needs no viewport units at all, explains exactly why ",[18,23,24],{},"100vw"," misbehaves, and covers a middle \"breakout\" width for content that should be wider than text but not full-bleed. It sits in ",[27,28,30],"a",{"href":29},"\u002Fmastering-container-queries-responsive-layouts\u002Fviewport-units-and-mobile-layout\u002F","Viewport Units & Mobile Layout"," within the ",[27,33,35],{"href":34},"\u002Fmastering-container-queries-responsive-layouts\u002F","Mastering Container Queries & Responsive Layouts"," guide.",[38,39,41],"h2",{"id":40},"why-the-obvious-approach-leaks","Why the obvious approach leaks",[14,43,44,45,47,48,51],{},"The negative-margin technique is clever. A child of a centred column sets ",[18,46,20],{}," and ",[18,49,50],{},"margin-inline: calc(50% - 50vw)",". The margin is negative by half the difference between the viewport and the column, so the child extends equally past both edges of the column to the viewport's edges.",[14,53,54,55,58,59,61,62,66,67,69,70,72],{},"The flaw is in ",[18,56,57],{},"vw",". One ",[18,60,57],{}," is one percent of the ",[63,64,65],"em",{},"initial containing block"," width, which on desktop platforms with space-taking scrollbars includes the scrollbar gutter. The page's content area is narrower than ",[18,68,24],{}," by the scrollbar's width, typically 15 to 17 pixels. A ",[18,71,24],{}," element therefore overhangs the right edge by that amount, and the document gains a horizontal scrollbar. On macOS and mobile, where scrollbars overlay content, the bug is invisible — which is why it ships so often.",[74,75,81,82,81,86,81,90,81,98,81,106,81,114,81,122,81,131,81,136,81,140,81,145,81,148,81,151],"svg",{"viewBox":76,"role":77,"ariaLabel":78,"xmlns":79,"style":80},"0 0 720 280","img","Browser window with a vertical scrollbar where a 100vw element overhangs the content area by the scrollbar width","http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg","width:100%;height:auto;max-width:720px;margin:2rem 0","\n  ",[83,84,85],"title",{},"100vw includes the scrollbar",[87,88,89],"desc",{},"A window frame whose content area stops at a vertical scrollbar. A band sized to 100vw extends underneath the scrollbar and past the content edge, causing a horizontal scrollbar at the bottom.",[91,92,97],"text",{"textAnchor":93,"x":94,"y":95,"style":96},"middle","360","26","text-anchor:middle;fill:currentColor;font:700 17px sans-serif","The overhang is exactly one scrollbar wide",[99,100],"path",{"d":101,"fill":102,"stroke":103,"strokeWidth":104,"opacity":105},"M60 50 H660 V250 H60 Z","none","currentColor","2","0.7",[107,108],"rect",{"x":109,"y":110,"width":111,"height":112,"fill":103,"opacity":113},"640","52","18","196","0.25",[107,115],{"x":116,"y":117,"width":118,"height":119,"rx":120,"fill":103,"opacity":121},"646","70","6","60","3","0.6",[107,123],{"x":124,"y":125,"width":126,"height":127,"rx":128,"fill":129,"opacity":130},"220","66","280","40","4","#7aa2ff","0.2",[91,132,135],{"textAnchor":93,"x":94,"y":133,"style":134},"91","text-anchor:middle;fill:currentColor;font:12px sans-serif","text column",[99,137],{"d":138,"fill":129,"opacity":139},"M62 122 H658 V178 H62 Z","0.4",[91,141,20],{"textAnchor":93,"x":142,"y":143,"style":144},"340","155","text-anchor:middle;fill:currentColor;font:600 13px ui-monospace,monospace",[107,146],{"x":124,"y":147,"width":126,"height":127,"rx":128,"fill":129,"opacity":130},"194",[91,149,135],{"textAnchor":93,"x":94,"y":150,"style":134},"219",[91,152,157],{"textAnchor":153,"x":154,"y":155,"style":156},"end","600","274","text-anchor:end;fill:currentColor;font:12px sans-serif","band runs under the scrollbar → horizontal scroll",[14,159,160,161,164,165,168,169,172,173,176,177,179],{},"The usual patch — ",[18,162,163],{},"overflow-x: hidden"," on ",[18,166,167],{},"body"," — hides the symptom and introduces two new problems: it clips anything legitimately overflowing, and it breaks ",[18,170,171],{},"position: sticky"," for descendants, because sticky positioning is relative to the nearest scrolling ancestor and ",[18,174,175],{},"overflow: hidden"," makes ",[18,178,167],{}," that ancestor.",[38,181,183],{"id":182},"the-complete-implementation","The complete implementation",[14,185,186],{},"The grid method turns the article into a three-column grid. The side columns are flexible gutters; the middle column is the reading measure. Every child goes into the middle column by default, and a child that should bleed simply spans all three.",[188,189],"live-demo",{"name":190},"vp-full-bleed-grid",[192,193,198],"pre",{"className":194,"code":195,"language":196,"meta":197,"style":197},"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>Full-bleed grid\u003C\u002Ftitle>\n\u003Cstyle>\n  html, body { margin: 0; }\n  body { font: 17px\u002F1.65 Georgia, serif; }\n\n  .article {\n    display: grid;\n    \u002F* Five columns with named lines:\n       [full] gutter [breakout] extra [content] measure [content] extra [breakout] gutter [full]\n       The gutters never shrink below 1rem, so text never touches the edge. *\u002F\n    --gutter: 1rem;\n    --measure: 65ch;\n    --breakout-extra: 8rem;\n    grid-template-columns:\n      [full-start] minmax(var(--gutter), 1fr)\n      [breakout-start] minmax(0, var(--breakout-extra))\n      [content-start] min(var(--measure), 100% - 2 * var(--gutter))\n      [content-end] minmax(0, var(--breakout-extra))\n      [breakout-end] minmax(var(--gutter), 1fr)\n      [full-end];\n  }\n\n  \u002F* Default placement: every child sits in the reading column. *\u002F\n  .article > * { grid-column: content; }\n\n  \u002F* Wider than text, narrower than the page: tables, code, figures. *\u002F\n  .article > .breakout { grid-column: breakout; }\n\n  \u002F* Edge to edge. No viewport units, so no scrollbar overhang. *\u002F\n  .article > .full-bleed { grid-column: full; }\n\n  .full-bleed img { display: block; width: 100%; height: auto; }\n\n  \u002F* A band whose background bleeds but whose text lines up with the\n     column above: it re-declares the same grid for its own children. *\u002F\n  .band {\n    grid-column: full;\n    display: grid;\n    grid-template-columns: inherit;\n    padding-block: 2rem;\n    background: #1e293b;\n    color: #f1f5f9;\n  }\n  .band > * { grid-column: content; }\n\u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n  \u003Carticle class=\"article\">\n    \u003Ch1>Crossing the Plateau\u003C\u002Fh1>\n    \u003Cp>Reading text stays in a comfortable measure.\u003C\u002Fp>\n    \u003Cfigure class=\"full-bleed\">\n      \u003Cimg src=\"\u002Fimg\u002Fplateau.jpg\" alt=\"Wide view of a grassy plateau under storm clouds\" width=\"1600\" height=\"700\">\n    \u003C\u002Ffigure>\n    \u003Cp>More reading text, back in the column.\u003C\u002Fp>\n    \u003Ctable class=\"breakout\">\u003Ctr>\u003Cth>Day\u003C\u002Fth>\u003Cth>Distance\u003C\u002Fth>\u003C\u002Ftr>\u003Ctr>\u003Ctd>1\u003C\u002Ftd>\u003Ctd>18 km\u003C\u002Ftd>\u003C\u002Ftr>\u003C\u002Ftable>\n    \u003Caside class=\"band\">\u003Cp>A pull quote whose background runs edge to edge.\u003C\u002Fp>\u003C\u002Faside>\n  \u003C\u002Farticle>\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n","html","",[18,199,200,220,240,250,268,293,307,317,343,379,386,395,409,416,422,428,445,461,476,485,516,540,584,606,630,636,642,647,653,675,680,686,703,708,714,731,736,779,784,790,796,804,813,824,836,850,863,876,881,900,910,919,928,947,962,976,993,1035,1045,1059,1137,1167,1177,1186],{"__ignoreMap":197},[201,202,205,209,213,217],"span",{"class":203,"line":204},"line",1,[201,206,208],{"class":207},"suds8","\u003C!",[201,210,212],{"class":211},"sne4z","doctype",[201,214,216],{"class":215},"s-5SL"," html",[201,218,219],{"class":207},">\n",[201,221,223,226,228,231,234,238],{"class":203,"line":222},2,[201,224,225],{"class":207},"\u003C",[201,227,196],{"class":211},[201,229,230],{"class":215}," lang",[201,232,233],{"class":207},"=",[201,235,237],{"class":236},"sT6z2","\"en\"",[201,239,219],{"class":207},[201,241,243,245,248],{"class":203,"line":242},3,[201,244,225],{"class":207},[201,246,247],{"class":211},"head",[201,249,219],{"class":207},[201,251,253,255,258,261,263,266],{"class":203,"line":252},4,[201,254,225],{"class":207},[201,256,257],{"class":211},"meta",[201,259,260],{"class":215}," charset",[201,262,233],{"class":207},[201,264,265],{"class":236},"\"utf-8\"",[201,267,219],{"class":207},[201,269,271,273,275,278,280,283,286,288,291],{"class":203,"line":270},5,[201,272,225],{"class":207},[201,274,257],{"class":211},[201,276,277],{"class":215}," name",[201,279,233],{"class":207},[201,281,282],{"class":236},"\"viewport\"",[201,284,285],{"class":215}," content",[201,287,233],{"class":207},[201,289,290],{"class":236},"\"width=device-width, initial-scale=1\"",[201,292,219],{"class":207},[201,294,296,298,300,303,305],{"class":203,"line":295},6,[201,297,225],{"class":207},[201,299,83],{"class":211},[201,301,302],{"class":207},">Full-bleed grid\u003C\u002F",[201,304,83],{"class":211},[201,306,219],{"class":207},[201,308,310,312,315],{"class":203,"line":309},7,[201,311,225],{"class":207},[201,313,314],{"class":211},"style",[201,316,219],{"class":207},[201,318,320,323,326,328,331,334,337,340],{"class":203,"line":319},8,[201,321,322],{"class":211},"  html",[201,324,325],{"class":207},", ",[201,327,167],{"class":211},[201,329,330],{"class":207}," { ",[201,332,333],{"class":215},"margin",[201,335,336],{"class":207},": ",[201,338,339],{"class":215},"0",[201,341,342],{"class":207},"; }\n",[201,344,346,349,351,354,356,359,363,366,369,372,374,377],{"class":203,"line":345},9,[201,347,348],{"class":211},"  body",[201,350,330],{"class":207},[201,352,353],{"class":215},"font",[201,355,336],{"class":207},[201,357,358],{"class":215},"17",[201,360,362],{"class":361},"sHUrx","px",[201,364,365],{"class":207},"\u002F",[201,367,368],{"class":215},"1.65",[201,370,371],{"class":215}," Georgia",[201,373,325],{"class":207},[201,375,376],{"class":215},"serif",[201,378,342],{"class":207},[201,380,382],{"class":203,"line":381},10,[201,383,385],{"emptyLinePlaceholder":384},true,"\n",[201,387,389,392],{"class":203,"line":388},11,[201,390,391],{"class":215},"  .article",[201,393,394],{"class":207}," {\n",[201,396,398,401,403,406],{"class":203,"line":397},12,[201,399,400],{"class":215},"    display",[201,402,336],{"class":207},[201,404,405],{"class":215},"grid",[201,407,408],{"class":207},";\n",[201,410,412],{"class":203,"line":411},13,[201,413,415],{"class":414},"sLBg1","    \u002F* Five columns with named lines:\n",[201,417,419],{"class":203,"line":418},14,[201,420,421],{"class":414},"       [full] gutter [breakout] extra [content] measure [content] extra [breakout] gutter [full]\n",[201,423,425],{"class":203,"line":424},15,[201,426,427],{"class":414},"       The gutters never shrink below 1rem, so text never touches the edge. *\u002F\n",[201,429,431,435,437,440,443],{"class":203,"line":430},16,[201,432,434],{"class":433},"soyes","    --gutter",[201,436,336],{"class":207},[201,438,439],{"class":215},"1",[201,441,442],{"class":361},"rem",[201,444,408],{"class":207},[201,446,448,451,453,456,459],{"class":203,"line":447},17,[201,449,450],{"class":433},"    --measure",[201,452,336],{"class":207},[201,454,455],{"class":215},"65",[201,457,458],{"class":361},"ch",[201,460,408],{"class":207},[201,462,464,467,469,472,474],{"class":203,"line":463},18,[201,465,466],{"class":433},"    --breakout-extra",[201,468,336],{"class":207},[201,470,471],{"class":215},"8",[201,473,442],{"class":361},[201,475,408],{"class":207},[201,477,479,482],{"class":203,"line":478},19,[201,480,481],{"class":215},"    grid-template-columns",[201,483,484],{"class":207},":\n",[201,486,488,491,494,497,500,502,505,508,510,513],{"class":203,"line":487},20,[201,489,490],{"class":207},"      [full-start] ",[201,492,493],{"class":215},"minmax",[201,495,496],{"class":207},"(",[201,498,499],{"class":215},"var",[201,501,496],{"class":207},[201,503,504],{"class":433},"--gutter",[201,506,507],{"class":207},"), ",[201,509,439],{"class":215},[201,511,512],{"class":361},"fr",[201,514,515],{"class":207},")\n",[201,517,519,522,524,526,528,530,532,534,537],{"class":203,"line":518},21,[201,520,521],{"class":207},"      [breakout-start] ",[201,523,493],{"class":215},[201,525,496],{"class":207},[201,527,339],{"class":215},[201,529,325],{"class":207},[201,531,499],{"class":215},[201,533,496],{"class":207},[201,535,536],{"class":433},"--breakout-extra",[201,538,539],{"class":207},"))\n",[201,541,543,546,549,551,553,555,558,560,563,566,569,572,575,578,580,582],{"class":203,"line":542},22,[201,544,545],{"class":207},"      [content-start] ",[201,547,548],{"class":215},"min",[201,550,496],{"class":207},[201,552,499],{"class":215},[201,554,496],{"class":207},[201,556,557],{"class":433},"--measure",[201,559,507],{"class":207},[201,561,562],{"class":215},"100",[201,564,565],{"class":361},"%",[201,567,568],{"class":433}," -",[201,570,571],{"class":215}," 2",[201,573,574],{"class":433}," *",[201,576,577],{"class":215}," var",[201,579,496],{"class":207},[201,581,504],{"class":433},[201,583,539],{"class":207},[201,585,587,590,592,594,596,598,600,602,604],{"class":203,"line":586},23,[201,588,589],{"class":207},"      [content-end] ",[201,591,493],{"class":215},[201,593,496],{"class":207},[201,595,339],{"class":215},[201,597,325],{"class":207},[201,599,499],{"class":215},[201,601,496],{"class":207},[201,603,536],{"class":433},[201,605,539],{"class":207},[201,607,609,612,614,616,618,620,622,624,626,628],{"class":203,"line":608},24,[201,610,611],{"class":207},"      [breakout-end] ",[201,613,493],{"class":215},[201,615,496],{"class":207},[201,617,499],{"class":215},[201,619,496],{"class":207},[201,621,504],{"class":433},[201,623,507],{"class":207},[201,625,439],{"class":215},[201,627,512],{"class":361},[201,629,515],{"class":207},[201,631,633],{"class":203,"line":632},25,[201,634,635],{"class":207},"      [full-end];\n",[201,637,639],{"class":203,"line":638},26,[201,640,641],{"class":207},"  }\n",[201,643,645],{"class":203,"line":644},27,[201,646,385],{"emptyLinePlaceholder":384},[201,648,650],{"class":203,"line":649},28,[201,651,652],{"class":414},"  \u002F* Default placement: every child sits in the reading column. *\u002F\n",[201,654,656,658,661,663,665,668,670,673],{"class":203,"line":655},29,[201,657,391],{"class":215},[201,659,660],{"class":361}," >",[201,662,574],{"class":211},[201,664,330],{"class":207},[201,666,667],{"class":215},"grid-column",[201,669,336],{"class":207},[201,671,672],{"class":215},"content",[201,674,342],{"class":207},[201,676,678],{"class":203,"line":677},30,[201,679,385],{"emptyLinePlaceholder":384},[201,681,683],{"class":203,"line":682},31,[201,684,685],{"class":414},"  \u002F* Wider than text, narrower than the page: tables, code, figures. *\u002F\n",[201,687,689,691,693,696,698,700],{"class":203,"line":688},32,[201,690,391],{"class":215},[201,692,660],{"class":361},[201,694,695],{"class":215}," .breakout",[201,697,330],{"class":207},[201,699,667],{"class":215},[201,701,702],{"class":207},": breakout; }\n",[201,704,706],{"class":203,"line":705},33,[201,707,385],{"emptyLinePlaceholder":384},[201,709,711],{"class":203,"line":710},34,[201,712,713],{"class":414},"  \u002F* Edge to edge. No viewport units, so no scrollbar overhang. *\u002F\n",[201,715,717,719,721,724,726,728],{"class":203,"line":716},35,[201,718,391],{"class":215},[201,720,660],{"class":361},[201,722,723],{"class":215}," .full-bleed",[201,725,330],{"class":207},[201,727,667],{"class":215},[201,729,730],{"class":207},": full; }\n",[201,732,734],{"class":203,"line":733},36,[201,735,385],{"emptyLinePlaceholder":384},[201,737,739,742,745,747,750,752,755,758,761,763,765,767,769,772,774,777],{"class":203,"line":738},37,[201,740,741],{"class":215},"  .full-bleed",[201,743,744],{"class":211}," img",[201,746,330],{"class":207},[201,748,749],{"class":215},"display",[201,751,336],{"class":207},[201,753,754],{"class":215},"block",[201,756,757],{"class":207},"; ",[201,759,760],{"class":215},"width",[201,762,336],{"class":207},[201,764,562],{"class":215},[201,766,565],{"class":361},[201,768,757],{"class":207},[201,770,771],{"class":215},"height",[201,773,336],{"class":207},[201,775,776],{"class":215},"auto",[201,778,342],{"class":207},[201,780,782],{"class":203,"line":781},38,[201,783,385],{"emptyLinePlaceholder":384},[201,785,787],{"class":203,"line":786},39,[201,788,789],{"class":414},"  \u002F* A band whose background bleeds but whose text lines up with the\n",[201,791,793],{"class":203,"line":792},40,[201,794,795],{"class":414},"     column above: it re-declares the same grid for its own children. *\u002F\n",[201,797,799,802],{"class":203,"line":798},41,[201,800,801],{"class":215},"  .band",[201,803,394],{"class":207},[201,805,807,810],{"class":203,"line":806},42,[201,808,809],{"class":215},"    grid-column",[201,811,812],{"class":207},": full;\n",[201,814,816,818,820,822],{"class":203,"line":815},43,[201,817,400],{"class":215},[201,819,336],{"class":207},[201,821,405],{"class":215},[201,823,408],{"class":207},[201,825,827,829,831,834],{"class":203,"line":826},44,[201,828,481],{"class":215},[201,830,336],{"class":207},[201,832,833],{"class":215},"inherit",[201,835,408],{"class":207},[201,837,839,842,844,846,848],{"class":203,"line":838},45,[201,840,841],{"class":215},"    padding-block",[201,843,336],{"class":207},[201,845,104],{"class":215},[201,847,442],{"class":361},[201,849,408],{"class":207},[201,851,853,856,858,861],{"class":203,"line":852},46,[201,854,855],{"class":215},"    background",[201,857,336],{"class":207},[201,859,860],{"class":215},"#1e293b",[201,862,408],{"class":207},[201,864,866,869,871,874],{"class":203,"line":865},47,[201,867,868],{"class":215},"    color",[201,870,336],{"class":207},[201,872,873],{"class":215},"#f1f5f9",[201,875,408],{"class":207},[201,877,879],{"class":203,"line":878},48,[201,880,641],{"class":207},[201,882,884,886,888,890,892,894,896,898],{"class":203,"line":883},49,[201,885,801],{"class":215},[201,887,660],{"class":361},[201,889,574],{"class":211},[201,891,330],{"class":207},[201,893,667],{"class":215},[201,895,336],{"class":207},[201,897,672],{"class":215},[201,899,342],{"class":207},[201,901,903,906,908],{"class":203,"line":902},50,[201,904,905],{"class":207},"\u003C\u002F",[201,907,314],{"class":211},[201,909,219],{"class":207},[201,911,913,915,917],{"class":203,"line":912},51,[201,914,905],{"class":207},[201,916,247],{"class":211},[201,918,219],{"class":207},[201,920,922,924,926],{"class":203,"line":921},52,[201,923,225],{"class":207},[201,925,167],{"class":211},[201,927,219],{"class":207},[201,929,931,934,937,940,942,945],{"class":203,"line":930},53,[201,932,933],{"class":207},"  \u003C",[201,935,936],{"class":211},"article",[201,938,939],{"class":215}," class",[201,941,233],{"class":207},[201,943,944],{"class":236},"\"article\"",[201,946,219],{"class":207},[201,948,950,953,955,958,960],{"class":203,"line":949},54,[201,951,952],{"class":207},"    \u003C",[201,954,10],{"class":211},[201,956,957],{"class":207},">Crossing the Plateau\u003C\u002F",[201,959,10],{"class":211},[201,961,219],{"class":207},[201,963,965,967,969,972,974],{"class":203,"line":964},55,[201,966,952],{"class":207},[201,968,14],{"class":211},[201,970,971],{"class":207},">Reading text stays in a comfortable measure.\u003C\u002F",[201,973,14],{"class":211},[201,975,219],{"class":207},[201,977,979,981,984,986,988,991],{"class":203,"line":978},56,[201,980,952],{"class":207},[201,982,983],{"class":211},"figure",[201,985,939],{"class":215},[201,987,233],{"class":207},[201,989,990],{"class":236},"\"full-bleed\"",[201,992,219],{"class":207},[201,994,996,999,1001,1004,1006,1009,1012,1014,1017,1020,1022,1025,1028,1030,1033],{"class":203,"line":995},57,[201,997,998],{"class":207},"      \u003C",[201,1000,77],{"class":211},[201,1002,1003],{"class":215}," src",[201,1005,233],{"class":207},[201,1007,1008],{"class":236},"\"\u002Fimg\u002Fplateau.jpg\"",[201,1010,1011],{"class":215}," alt",[201,1013,233],{"class":207},[201,1015,1016],{"class":236},"\"Wide view of a grassy plateau under storm clouds\"",[201,1018,1019],{"class":215}," width",[201,1021,233],{"class":207},[201,1023,1024],{"class":236},"\"1600\"",[201,1026,1027],{"class":215}," height",[201,1029,233],{"class":207},[201,1031,1032],{"class":236},"\"700\"",[201,1034,219],{"class":207},[201,1036,1038,1041,1043],{"class":203,"line":1037},58,[201,1039,1040],{"class":207},"    \u003C\u002F",[201,1042,983],{"class":211},[201,1044,219],{"class":207},[201,1046,1048,1050,1052,1055,1057],{"class":203,"line":1047},59,[201,1049,952],{"class":207},[201,1051,14],{"class":211},[201,1053,1054],{"class":207},">More reading text, back in the column.\u003C\u002F",[201,1056,14],{"class":211},[201,1058,219],{"class":207},[201,1060,1062,1064,1067,1069,1071,1074,1077,1080,1082,1085,1088,1090,1092,1094,1097,1099,1102,1104,1106,1108,1110,1113,1116,1118,1120,1122,1125,1127,1129,1131,1133,1135],{"class":203,"line":1061},60,[201,1063,952],{"class":207},[201,1065,1066],{"class":211},"table",[201,1068,939],{"class":215},[201,1070,233],{"class":207},[201,1072,1073],{"class":236},"\"breakout\"",[201,1075,1076],{"class":207},">\u003C",[201,1078,1079],{"class":211},"tr",[201,1081,1076],{"class":207},[201,1083,1084],{"class":211},"th",[201,1086,1087],{"class":207},">Day\u003C\u002F",[201,1089,1084],{"class":211},[201,1091,1076],{"class":207},[201,1093,1084],{"class":211},[201,1095,1096],{"class":207},">Distance\u003C\u002F",[201,1098,1084],{"class":211},[201,1100,1101],{"class":207},">\u003C\u002F",[201,1103,1079],{"class":211},[201,1105,1076],{"class":207},[201,1107,1079],{"class":211},[201,1109,1076],{"class":207},[201,1111,1112],{"class":211},"td",[201,1114,1115],{"class":207},">1\u003C\u002F",[201,1117,1112],{"class":211},[201,1119,1076],{"class":207},[201,1121,1112],{"class":211},[201,1123,1124],{"class":207},">18 km\u003C\u002F",[201,1126,1112],{"class":211},[201,1128,1101],{"class":207},[201,1130,1079],{"class":211},[201,1132,1101],{"class":207},[201,1134,1066],{"class":211},[201,1136,219],{"class":207},[201,1138,1140,1142,1145,1147,1149,1152,1154,1156,1159,1161,1163,1165],{"class":203,"line":1139},61,[201,1141,952],{"class":207},[201,1143,1144],{"class":211},"aside",[201,1146,939],{"class":215},[201,1148,233],{"class":207},[201,1150,1151],{"class":236},"\"band\"",[201,1153,1076],{"class":207},[201,1155,14],{"class":211},[201,1157,1158],{"class":207},">A pull quote whose background runs edge to edge.\u003C\u002F",[201,1160,14],{"class":211},[201,1162,1101],{"class":207},[201,1164,1144],{"class":211},[201,1166,219],{"class":207},[201,1168,1170,1173,1175],{"class":203,"line":1169},62,[201,1171,1172],{"class":207},"  \u003C\u002F",[201,1174,936],{"class":211},[201,1176,219],{"class":207},[201,1178,1180,1182,1184],{"class":203,"line":1179},63,[201,1181,905],{"class":207},[201,1183,167],{"class":211},[201,1185,219],{"class":207},[201,1187,1189,1191,1193],{"class":203,"line":1188},64,[201,1190,905],{"class":207},[201,1192,196],{"class":211},[201,1194,219],{"class":207},[14,1196,1197,1198,1201,1202,1204,1205,325,1209,1212],{},"The ",[18,1199,1200],{},"grid-template-columns: inherit"," in the band is the tidy trick. The band spans the full width, becomes a grid itself, copies its parent's column template, and places its own children in the same ",[18,1203,672],{}," column — so the quote text lines up exactly with the paragraphs above and below while the dark background runs to both edges. In engines with ",[27,1206,1208],{"href":1207},"\u002Fmastering-container-queries-responsive-layouts\u002Fcss-grid-and-subgrid-layouts\u002Fsubgrid-vs-nested-grid\u002F","subgrid",[18,1210,1211],{},"grid-template-columns: subgrid"," achieves the same with a live link to the parent's tracks rather than a copy.",[38,1214,1216],{"id":1215},"the-key-technique-named-line-pairs","The key technique: named line pairs",[14,1218,1219,1220,47,1223,1226,1227,1230,1231,1233,1234,1237,1238,1240,1241,1243],{},"The whole approach rests on a grid feature that is easy to overlook. When you name lines ",[18,1221,1222],{},"content-start",[18,1224,1225],{},"content-end",", the grid automatically creates an implicit ",[63,1228,1229],{},"named area"," called ",[18,1232,672],{},", and ",[18,1235,1236],{},"grid-column: content"," means \"from ",[18,1239,1222],{}," to ",[18,1242,1225],{},"\". Naming three nested pairs creates three nested areas, and choosing a width for a child becomes choosing a name.",[74,1245,81,1248,81,1251,81,1254,81,1257,81,1263,81,1266,81,1268,81,1271,81,1274,81,1277,81,1282,81,1286,81,1289,81,1292,81,1295,81,1302,81,1306,81,1311,81,1315,81,1321,81,1325],{"viewBox":1246,"role":77,"ariaLabel":1247,"xmlns":79,"style":80},"0 0 720 300","Five grid columns with nested named line pairs full, breakout and content",[83,1249,1250],{},"Three nested areas from named lines",[87,1252,1253],{},"Five columns across the page. Content spans the middle column, breakout spans the middle three, and full spans all five. Each area is created implicitly from a start and end line pair.",[91,1255,1256],{"textAnchor":93,"x":94,"y":95,"style":96},"grid-column: full | breakout | content",[203,1258],{"x1":127,"y1":1259,"x2":127,"y2":1260,"stroke":103,"strokeWidth":1261,"opacity":1262},"46","250","1.5","0.5",[203,1264],{"x1":1265,"y1":1259,"x2":1265,"y2":1260,"stroke":103,"strokeWidth":1261,"opacity":1262},"130",[203,1267],{"x1":124,"y1":1259,"x2":124,"y2":1260,"stroke":103,"strokeWidth":1261,"opacity":1262},[203,1269],{"x1":1270,"y1":1259,"x2":1270,"y2":1260,"stroke":103,"strokeWidth":1261,"opacity":1262},"500",[203,1272],{"x1":1273,"y1":1259,"x2":1273,"y2":1260,"stroke":103,"strokeWidth":1261,"opacity":1262},"590",[203,1275],{"x1":1276,"y1":1259,"x2":1276,"y2":1260,"stroke":103,"strokeWidth":1261,"opacity":1262},"680",[91,1278,1281],{"textAnchor":93,"x":1279,"y":125,"style":1280},"85","text-anchor:middle;fill:currentColor;font:11px sans-serif","gutter",[91,1283,1285],{"textAnchor":93,"x":1284,"y":125,"style":1280},"175","extra",[91,1287,1288],{"textAnchor":93,"x":94,"y":125,"style":1280},"measure",[91,1290,1285],{"textAnchor":93,"x":1291,"y":125,"style":1280},"545",[91,1293,1281],{"textAnchor":93,"x":1294,"y":125,"style":1280},"635",[107,1296],{"x":1297,"y":1298,"width":1299,"height":127,"rx":1300,"fill":129,"opacity":1301},"222","82","276","5","0.3",[91,1303,672],{"textAnchor":93,"x":94,"y":1304,"style":1305},"107","text-anchor:middle;fill:currentColor;font:12px ui-monospace,monospace",[107,1307],{"x":1308,"y":1309,"width":1310,"height":127,"rx":1300,"fill":129,"opacity":1301},"132","136","456",[91,1312,1314],{"textAnchor":93,"x":94,"y":1313,"style":1305},"161","breakout",[107,1316],{"x":1317,"y":1318,"width":1319,"height":127,"rx":1300,"fill":129,"opacity":1320},"42","190","636","0.45",[91,1322,1324],{"textAnchor":93,"x":94,"y":1323,"style":1305},"215","full",[91,1326,1328],{"textAnchor":93,"x":94,"y":126,"style":1327},"text-anchor:middle;fill:currentColor;font:12px sans-serif;opacity:0.75","Naming x-start and x-end lines creates an area called x automatically.",[14,1330,1331,1332,1335],{},"The column sizes are chosen so the layout degrades gracefully. On a wide screen, the measure is 65ch, the breakout columns reach their 8rem maximum, and the gutters absorb the remaining width. As the viewport narrows, the gutters shrink first, then the breakout columns shrink toward zero, and finally the measure itself shrinks — ",[18,1333,1334],{},"min(var(--measure), 100% - 2 * var(--gutter))"," keeps it from ever exceeding the space left after two minimum gutters. On a phone, content, breakout and full-bleed text all end up the same width with 1rem gutters, while full-bleed images still reach both edges.",[38,1337,1339],{"id":1338},"choosing-the-three-widths","Choosing the three widths",[14,1341,1342],{},"The custom properties at the top of the grid are design decisions, and they are worth making deliberately rather than copying.",[14,1344,1345,1349,1350,1352,1353,1356,1357,1359,1360,1364],{},[1346,1347,1348],"strong",{},"The measure"," controls readability. The ",[18,1351,458],{}," unit is the width of the \"0\" glyph in the current font, so ",[18,1354,1355],{},"65ch"," is roughly 65 characters of body text — the middle of the range typographers recommend for comfortable reading. Because it is font-relative, the column widens automatically if the reader increases their default font size, which keeps the character count per line stable under zoom. A measure in pixels or ",[18,1358,442],{}," does not have that property. If body text is set with ",[27,1361,1363],{"href":1362},"\u002Fmastering-container-queries-responsive-layouts\u002Ffluid-typography-with-clamp\u002F","fluid typography",", the measure follows the fluid size too.",[14,1366,1367,1370],{},[1346,1368,1369],{},"The breakout extra"," should be large enough that breakout content looks intentionally wider, not accidentally misaligned. Somewhere between 4rem and 10rem per side works for most layouts. Code blocks are the usual beneficiary: a 65ch prose column is too narrow for an 80-column code sample, while a breakout of 65ch plus 16rem fits one comfortably.",[14,1372,1373,1376,1377,1380,1381,1384],{},[1346,1374,1375],{},"The gutter"," is the minimum distance from the viewport edge to any text. It should match your mobile page padding — commonly 1rem to 1.5rem — so that on a phone the article has the same edge spacing as every other page. Since it is a ",[18,1378,1379],{},"minmax()"," floor, it has no effect on wide screens, where the flexible ",[18,1382,1383],{},"1fr"," tracks take over.",[14,1386,1387],{},"Keeping these as custom properties on the article means a single page type — a photo essay, say — can widen its measure or breakout with one override instead of a new grid definition.",[38,1389,1391],{"id":1390},"variation-full-bleed-inside-a-nested-container","Variation: full-bleed inside a nested container",[14,1393,1394,1395,1398],{},"Real pages rarely put every block directly inside the article grid. A CMS wraps content in a ",[18,1396,1397],{},"\u003Cdiv class=\"prose\">",", or a component library wraps a figure in its own element. The grid method only works for direct children of the grid, so nested full-bleed needs one of two approaches.",[74,1400,81,1403,81,1406,81,1409,81,1412,81,1418,81,1422,81,1428,81,1433,81,1438,81,1442,81,1446,81,1449,81,1453,81,1457,81,1460,81,1463,81,1466],{"viewBox":1401,"role":77,"ariaLabel":1402,"xmlns":79,"style":80},"0 0 720 260","Nested full-bleed: subgrid passing lines through a wrapper versus negative margins relative to a centered wrapper",[83,1404,1405],{},"Two ways to bleed from inside a wrapper",[87,1407,1408],{},"Left, the wrapper uses subgrid so the nested figure can still address the full line names. Right, the nested figure uses a negative margin calculated from the wrapper's width, which only works if the wrapper is centred.",[91,1410,1411],{"textAnchor":93,"x":94,"y":95,"style":96},"When the full-bleed child is not a direct child",[107,1413],{"x":1414,"y":1259,"width":1415,"height":1416,"rx":1417,"fill":102,"stroke":103,"strokeWidth":1261,"opacity":1262},"30","320","170","10",[91,1419,1421],{"textAnchor":93,"x":1318,"y":117,"style":1420},"text-anchor:middle;fill:currentColor;font:600 13px sans-serif","Subgrid wrapper",[107,1423],{"x":1424,"y":1425,"width":126,"height":1426,"rx":471,"fill":129,"opacity":1427},"50","84","110","0.14",[91,1429,1432],{"textAnchor":93,"x":1318,"y":1430,"style":1431},"104","text-anchor:middle;fill:currentColor;font:11px ui-monospace,monospace",".prose { grid-template-columns: subgrid }",[107,1434],{"x":119,"y":1435,"width":1436,"height":1437,"rx":118,"fill":129,"opacity":139},"120","260","56",[91,1439,1441],{"textAnchor":93,"x":1318,"y":1440,"style":1305},"152","grid-column: full",[91,1443,1445],{"textAnchor":93,"x":1318,"y":1444,"style":134},"240","lines pass through; no maths",[107,1447],{"x":1448,"y":1259,"width":1415,"height":1416,"rx":1417,"fill":102,"stroke":103,"strokeWidth":1261,"opacity":1262},"370",[91,1450,1452],{"textAnchor":93,"x":1451,"y":117,"style":1420},"530","Negative margins",[107,1454],{"x":1455,"y":1425,"width":1456,"height":1426,"rx":471,"fill":129,"opacity":1427},"440","180",[91,1458,1459],{"textAnchor":93,"x":1451,"y":1430,"style":1280},"centred wrapper",[99,1461],{"d":1462,"fill":129,"opacity":139},"M380 120 H680 V176 H380 Z",[91,1464,1465],{"textAnchor":93,"x":1451,"y":1440,"style":1431},"calc(50% - 50cqi)",[91,1467,1468],{"textAnchor":93,"x":1451,"y":1444,"style":134},"works only if wrapper is centred",[14,1470,1471,1472,1474,1475,1477,1478,1481,1482,1484,1485,1487],{},"With subgrid, the wrapper spans ",[18,1473,1324],{}," itself and declares ",[18,1476,1211],{},", which adopts the parent's tracks ",[63,1479,1480],{},"and"," their line names. Its children can then use ",[18,1483,1236],{}," or ",[18,1486,1324],{}," exactly as if they were direct children. This is the cleanest option when you control the wrapper's CSS.",[14,1489,1490,1491,1493,1494,1497,1498,1501,1502,1505,1506,1508,1509,1513],{},"When you do not, the negative-margin method can be rescued from the scrollbar bug by replacing ",[18,1492,57],{}," with a container unit. Make the page's scrolling root a size container (",[18,1495,1496],{},"body { container-type: inline-size; }","), and use ",[18,1499,1500],{},"margin-inline: calc(50% - 50cqi)"," with ",[18,1503,1504],{},"width: 100cqi",". Container query units measure the container's content box, which excludes the scrollbar, so the overhang disappears. The trade-offs of that switch — including why a size container on ",[18,1507,167],{}," is safe here but not everywhere — are laid out in ",[27,1510,1512],{"href":1511},"\u002Fmastering-container-queries-responsive-layouts\u002Fviewport-units-and-mobile-layout\u002Fviewport-units-vs-container-units\u002F","Viewport Units vs Container Units",".",[14,1515,1516,1517,1520,1521,1513],{},"On phones with notches, full-bleed images should run under the safe areas while the band text should not; add ",[18,1518,1519],{},"padding-inline: max(1rem, env(safe-area-inset-left)) max(1rem, env(safe-area-inset-right))"," to text inside full-bleed bands, as described in ",[27,1522,1524],{"href":1523},"\u002Fmastering-container-queries-responsive-layouts\u002Fviewport-units-and-mobile-layout\u002Fsafe-area-insets-for-notched-screens\u002F","Safe Area Insets for Notched Screens",[38,1526,1528],{"id":1527},"browser-support","Browser support",[14,1530,1531,1532,1534,1535,1538,1539,1541,1542,1544],{},"CSS Grid with named lines and ",[18,1533,1379],{}," is supported in Chrome 57+, Edge 16+, Firefox 52+ and Safari 10.1+, and ",[18,1536,1537],{},"min()"," inside a track size in Chrome and Edge 79+, Firefox 75+ and Safari 13.1+. ",[18,1540,1208],{}," is supported in Chrome and Edge 117+, Firefox 71+ and Safari 16+ — Firefox shipped it years before the others. Container query units, used in the rescued negative-margin variant, are supported in Chrome and Edge 105+, Firefox 110+ and Safari 16+. Without subgrid, the ",[18,1543,1200],{}," copy shown in the band works in every grid-capable browser.",[38,1546,1548],{"id":1547},"faq","FAQ",[14,1550,1551,1557,1559,1560,1562],{},[1346,1552,1553,1554,1556],{},"Why does ",[18,1555,20],{}," cause a horizontal scrollbar?",[18,1558,57],{}," units include the vertical scrollbar's width on platforms where scrollbars take up space. An element ",[18,1561,24],{}," wide is therefore wider than the area inside the scrollbar, and the page gains a horizontal scrollbar a few pixels wide. The grid method avoids viewport units entirely.",[14,1564,1565,1568,1569,325,1572,325,1574,47,1576,1579,1580,1240,1582,1513],{},[1346,1566,1567],{},"What is the named-lines grid technique for full-bleed layouts?","\nThe article becomes a three-column grid: flexible gutters on both sides and a content column in the middle, with line names such as ",[18,1570,1571],{},"full-start",[18,1573,1222],{},[18,1575,1225],{},[18,1577,1578],{},"full-end",". Normal children go in the content column; full-bleed children span from ",[18,1581,1571],{},[18,1583,1578],{},[14,1585,1586,1589],{},[1346,1587,1588],{},"Can a full-bleed element be nested inside another container?","\nWith the grid method, only if every ancestor between it and the full-width grid passes the lines down, which subgrid can do. With the negative-margin method it can break out of any centred ancestor, but it depends on that ancestor being centred in the viewport.",[14,1591,1592,1595],{},[1346,1593,1594],{},"How do I keep text inside a full-bleed section aligned with the text column?","\nMake the full-bleed section itself a grid with the same column template, or give it subgrid columns. Its inner content then sits in the same content column as the surrounding prose, while its background runs edge to edge.",[38,1597,1599],{"id":1598},"related","Related",[1601,1602,1603,1609,1616,1621],"ul",{},[1604,1605,1606,1608],"li",{},[27,1607,30],{"href":29}," — the parent guide to viewport-relative layout.",[1604,1610,1611,1615],{},[27,1612,1614],{"href":1613},"\u002Fmastering-container-queries-responsive-layouts\u002Fcss-grid-and-subgrid-layouts\u002Fholy-grail-layout-with-grid\u002F","Holy Grail Layout With Grid"," — named areas used for a full page shell.",[1604,1617,1618,1620],{},[27,1619,1512],{"href":1511}," — why cqi fixes the negative-margin method.",[1604,1622,1623,1627],{},[27,1624,1626],{"href":1625},"\u002Fcss-only-micro-interactions-animations\u002Fscroll-driven-animations\u002Fscroll-triggered-reveal-animations\u002F","Scroll-Triggered Reveal Animations"," — revealing full-bleed images as they scroll in.",[314,1629,1630],{},"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 pre.shiki code .soyes, html code.shiki .soyes{--shiki-default:#702C00;--shiki-dark:#FFB757}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":197,"searchDepth":222,"depth":222,"links":1632},[1633,1634,1635,1636,1637,1638,1639,1640],{"id":40,"depth":222,"text":41},{"id":182,"depth":222,"text":183},{"id":1215,"depth":222,"text":1216},{"id":1338,"depth":222,"text":1339},{"id":1390,"depth":222,"text":1391},{"id":1527,"depth":222,"text":1528},{"id":1547,"depth":222,"text":1548},{"id":1598,"depth":222,"text":1599},"Break images and bands out of a centered text column without 100vw scrollbars: named grid lines, the breakout column, and the negative-margin method compared.","md",{"pageTitle":1644,"datePublished":1645,"dateModified":1645,"faq":1646},"Full-Bleed Sections in a Centered Layout","2026-09-18",[1647,1650,1652,1654],{"q":1648,"a":1649},"Why does width: 100vw cause a horizontal scrollbar?","vw units include the vertical scrollbar's width on platforms where scrollbars take up space. An element 100vw wide is therefore wider than the area inside the scrollbar, and the page gains a horizontal scrollbar a few pixels wide. The grid method avoids viewport units entirely.",{"q":1567,"a":1651},"The article becomes a three-column grid: flexible gutters on both sides and a content column in the middle, with line names such as full-start, content-start, content-end and full-end. Normal children go in the content column; full-bleed children span from full-start to full-end.",{"q":1588,"a":1653},"With the grid method, only if every ancestor between it and the full-width grid passes the lines down, which subgrid can do. With the negative-margin method it can break out of any centred ancestor, but it depends on that ancestor being centred in the viewport.",{"q":1594,"a":1655},"Make the full-bleed section itself a grid with the same column template, or give it subgrid columns. Its inner content then sits in the same content column as the surrounding prose, while its background runs edge to edge.","\u002Fmastering-container-queries-responsive-layouts\u002Fviewport-units-and-mobile-layout\u002Ffull-bleed-sections-in-constrained-layouts",{"title":5,"description":1641},"mastering-container-queries-responsive-layouts\u002Fviewport-units-and-mobile-layout\u002Ffull-bleed-sections-in-constrained-layouts\u002Findex","9Ld-3uGD9VV4khIYbGCK5VzQfR-XjMd8tEwRjpYttW8",[1661,1664,1667,1670,1673,1676,1679,1682,1685,1688,1691,1694,1697,1700,1703,1706,1709,1712,1715,1718,1721,1724,1727,1730,1733,1736,1739,1742,1745,1748,1751,1754,1757,1760,1763,1766,1769,1772,1775,1778,1781,1784,1787,1790,1793,1796,1799,1802,1805,1808,1811,1814,1817,1820,1823,1826,1829,1832,1835,1838,1841,1844,1847,1850,1853,1856,1859,1862,1865,1868,1871,1874,1877,1880,1883,1886,1889,1892,1895,1898,1901,1904,1907,1910,1913,1916,1919,1922,1925,1928,1931,1934,1937,1940,1942,1945,1948,1951,1954,1957,1960,1963,1966,1969,1972,1975,1978,1981,1984,1987,1990,1993,1996,1999,2002,2005,2008,2011,2014,2017,2020,2023,2026,2029,2032,2035,2038,2041,2044,2047,2050,2053,2056,2059,2062,2065,2068,2071,2074,2077,2080,2082,2085,2088,2091,2094,2097,2100,2103,2106,2109,2112,2115,2118,2121,2124,2127,2130,2133,2136,2139,2142,2145,2148,2151,2154,2157,2160,2163,2166,2169,2172,2175,2178,2181,2184,2187,2190,2193,2196,2199,2202,2205,2206,2209,2212,2215],{"path":1662,"title":1663},"\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":1665,"title":1666},"\u002Fcss-only-micro-interactions-animations\u002Faccessibility-in-css-animations\u002Fflashing-content-and-seizure-thresholds","Flashing Content and Seizure Thresholds",{"path":1668,"title":1669},"\u002Fcss-only-micro-interactions-animations\u002Faccessibility-in-css-animations\u002Fforced-colors-mode-and-animations","Forced Colors Mode and Animations",{"path":1671,"title":1672},"\u002Fcss-only-micro-interactions-animations\u002Faccessibility-in-css-animations","Accessibility in CSS Animations: Patterns, Specs & Best Practices",{"path":1674,"title":1675},"\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":1677,"title":1678},"\u002Fcss-only-micro-interactions-animations\u002Faccessibility-in-css-animations\u002Fprefers-reduced-motion-recipes","prefers-reduced-motion Recipes: A Reduction for Every Common Effect",{"path":1680,"title":1681},"\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":1683,"title":1684},"\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":1686,"title":1687},"\u002Fcss-only-micro-interactions-animations\u002Faccessibility-in-css-animations\u002Fvestibular-safe-animation-patterns","Vestibular-Safe Animation Patterns: Why Some Motion Makes People Sick",{"path":1689,"title":1690},"\u002Fcss-only-micro-interactions-animations\u002Faccessibility-in-css-animations\u002Fwcag-motion-success-criteria","WCAG Motion Success Criteria: What Each One Actually Requires",{"path":1692,"title":1693},"\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":1695,"title":1696},"\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":1698,"title":1699},"\u002Fcss-only-micro-interactions-animations\u002Fclip-path-and-mask-animations","Clip-Path & Mask Animations: Animating Visibility Instead of Position",{"path":1701,"title":1702},"\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":1704,"title":1705},"\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":1707,"title":1708},"\u002Fcss-only-micro-interactions-animations\u002Fcolor-and-theme-transitions\u002Fanimating-gradients","Animating CSS Gradients: Smooth Colour Motion Without Jumps",{"path":1710,"title":1711},"\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":1713,"title":1714},"\u002Fcss-only-micro-interactions-animations\u002Fcolor-and-theme-transitions","Color & Theme Transitions: Colour as Part of the Motion System",{"path":1716,"title":1717},"\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":1719,"title":1720},"\u002Fcss-only-micro-interactions-animations\u002Fcolor-and-theme-transitions\u002Fsmooth-theme-switching-transitions","Smooth Theme Switching: Crossfades, Circular Reveals and No Flash",{"path":1722,"title":1723},"\u002Fcss-only-micro-interactions-animations\u002Fcontainer-aware-motion\u002Fcontainer-query-hover-affordances","Container Query Hover Affordances: When Narrow Means Persistent, Not Hidden",{"path":1725,"title":1726},"\u002Fcss-only-micro-interactions-animations\u002Fcontainer-aware-motion","Container-Aware Motion: Animation Sized by the Space a Component Actually Has",{"path":1728,"title":1729},"\u002Fcss-only-micro-interactions-animations\u002Fcontainer-aware-motion\u002Flayout-change-animations-at-container-breakpoints","Animating Changes at Container Breakpoints",{"path":1731,"title":1732},"\u002Fcss-only-micro-interactions-animations\u002Fcontainer-aware-motion\u002Fmotion-driven-by-container-style-queries","Motion Driven by Container Style Queries",{"path":1734,"title":1735},"\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":1737,"title":1738},"\u002Fcss-only-micro-interactions-animations\u002Fcontainer-aware-motion\u002Fsuppressing-motion-in-small-containers","Suppressing Motion in Small Containers: Deliberately Animating Nothing",{"path":1740,"title":1741},"\u002Fcss-only-micro-interactions-animations\u002Fcss-animation-vs-web-animations-api\u002Fcontrolling-css-animations-from-javascript","Controlling CSS Animations From JavaScript",{"path":1743,"title":1744},"\u002Fcss-only-micro-interactions-animations\u002Fcss-animation-vs-web-animations-api","CSS Animation vs the Web Animations API: A Decision Guide",{"path":1746,"title":1747},"\u002Fcss-only-micro-interactions-animations\u002Fcss-animation-vs-web-animations-api\u002Fwaapi-vs-css-for-interruptible-ui","Interruptible UI: CSS Transitions vs WAAPI",{"path":1749,"title":1750},"\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":1752,"title":1753},"\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":1755,"title":1756},"\u002Fcss-only-micro-interactions-animations\u002Fcss-custom-properties-architecture\u002Fcustom-property-fallbacks-and-invalid-values","Custom Property Fallbacks and Invalid Values",{"path":1758,"title":1759},"\u002Fcss-only-micro-interactions-animations\u002Fcss-custom-properties-architecture\u002Ffluid-spacing-tokens-driving-transition-durations","Fluid Spacing Tokens That Drive Transition Durations",{"path":1761,"title":1762},"\u002Fcss-only-micro-interactions-animations\u002Fcss-custom-properties-architecture","CSS Custom Properties Architecture: Scalable Design Systems & Dynamic UI",{"path":1764,"title":1765},"\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":1767,"title":1768},"\u002Fcss-only-micro-interactions-animations\u002Fcss-custom-properties-architecture\u002Fscoping-custom-properties-to-components","Scoping Custom Properties to Components",{"path":1770,"title":1771},"\u002Fcss-only-micro-interactions-animations\u002Fcss-transition-fundamentals\u002Fcss-transition-timing-functions","CSS Transition Timing Functions: ease, cubic-bezier(), steps() and linear()",{"path":1773,"title":1774},"\u002Fcss-only-micro-interactions-animations\u002Fcss-transition-fundamentals","CSS Transition Fundamentals: Architecture, Performance & Patterns",{"path":1776,"title":1777},"\u002Fcss-only-micro-interactions-animations\u002Fcss-transition-fundamentals\u002Finterrupted-and-reversing-transitions","Interrupted and Reversing Transitions: What Happens Mid-Flight",{"path":1779,"title":1780},"\u002Fcss-only-micro-interactions-animations\u002Fcss-transition-fundamentals\u002Fstarting-style-entry-animations","@starting-style: Animating an Element's Very First Style Change",{"path":1782,"title":1783},"\u002Fcss-only-micro-interactions-animations\u002Fcss-transition-fundamentals\u002Ftransition-delay-choreography","Choreographing Motion With transition-delay",{"path":1785,"title":1786},"\u002Fcss-only-micro-interactions-animations\u002Fcss-transition-fundamentals\u002Ftransition-shorthand-and-multiple-properties","The transition Shorthand and Multiple Properties",{"path":1788,"title":1789},"\u002Fcss-only-micro-interactions-animations\u002Fcss-transition-fundamentals\u002Ftransitioning-display-with-allow-discrete","Transitioning display with transition-behavior: allow-discrete and @starting-style",{"path":1791,"title":1792},"\u002Fcss-only-micro-interactions-animations\u002Fdialog-and-popover-animations\u002Fanimating-dialog-open-and-close","Animating \u003Cdialog> Open and Close: Both Directions, No Library",{"path":1794,"title":1795},"\u002Fcss-only-micro-interactions-animations\u002Fdialog-and-popover-animations\u002Fbackdrop-animations","Animating ::backdrop: Fades and Blurs Behind Dialogs and Popovers",{"path":1797,"title":1798},"\u002Fcss-only-micro-interactions-animations\u002Fdialog-and-popover-animations","Dialog & Popover Animations: Motion for the Top Layer",{"path":1800,"title":1801},"\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":1803,"title":1804},"\u002Fcss-only-micro-interactions-animations\u002Fdialog-and-popover-animations\u002Fpopover-entry-and-exit-transitions","Popover Menus That Animate From Their Anchor",{"path":1806,"title":1807},"\u002Fcss-only-micro-interactions-animations\u002Feasing-and-motion-design\u002Fchoosing-animation-durations","Choosing Animation Durations: How Long Motion Should Last",{"path":1809,"title":1810},"\u002Fcss-only-micro-interactions-animations\u002Feasing-and-motion-design\u002Fcubic-bezier-overshoot-and-anticipation","Overshoot and Anticipation With cubic-bezier(): Motion With Character",{"path":1812,"title":1813},"\u002Fcss-only-micro-interactions-animations\u002Feasing-and-motion-design\u002Fentry-vs-exit-easing","Entry vs Exit Easing: Different Curves for Arriving and Leaving",{"path":1815,"title":1816},"\u002Fcss-only-micro-interactions-animations\u002Feasing-and-motion-design","Easing & Motion Design: Making CSS Motion Feel Intentional",{"path":1818,"title":1819},"\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":1821,"title":1822},"\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":1824,"title":1825},"\u002Fcss-only-micro-interactions-animations\u002Fhover-focus-state-design\u002Faccessible-css-only-tooltips","Accessible CSS-Only Tooltips and Hover Cards With  and ",{"path":1827,"title":1828},"\u002Fcss-only-micro-interactions-animations\u002Fhover-focus-state-design\u002Fbutton-press-and-active-states","Button Press and  States",{"path":1830,"title":1831},"\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":1833,"title":1834},"\u002Fcss-only-micro-interactions-animations\u002Fhover-focus-state-design\u002Ffocus-within-form-patterns"," Form Patterns: Styling a Group From the Field Inside It",{"path":1836,"title":1837},"\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":1839,"title":1840},"\u002Fcss-only-micro-interactions-animations\u002Fhover-focus-state-design","Hover & Focus State Design: Spec-Compliant Patterns for Modern UIs",{"path":1842,"title":1843},"\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":1845,"title":1846},"\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":1848,"title":1849},"\u002Fcss-only-micro-interactions-animations","CSS-Only Micro-Interactions & Animations: Architecture, Performance & Implementation",{"path":1851,"title":1852},"\u002Fcss-only-micro-interactions-animations\u002Fkeyframe-animation-patterns\u002Fanimation-composition-and-stacking","Stacking Animations With animation-composition",{"path":1854,"title":1855},"\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":1857,"title":1858},"\u002Fcss-only-micro-interactions-animations\u002Fkeyframe-animation-patterns\u002Fcontainer-query-triggered-keyframe-animations","Container-Query-Triggered Keyframe Animations: Animate Differently per Available Space",{"path":1860,"title":1861},"\u002Fcss-only-micro-interactions-animations\u002Fkeyframe-animation-patterns\u002Fcss-only-accordions-and-disclosure","CSS-Only Accordions and Disclosure Widgets with details and summary",{"path":1863,"title":1864},"\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":1866,"title":1867},"\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":1869,"title":1870},"\u002Fcss-only-micro-interactions-animations\u002Fkeyframe-animation-patterns","Keyframe Animation Patterns: Spec-Compliant Architectures for Modern UIs",{"path":1872,"title":1873},"\u002Fcss-only-micro-interactions-animations\u002Fkeyframe-animation-patterns\u002Fmulti-step-keyframes-and-per-keyframe-easing","Multi-Step Keyframes and Per-Keyframe Easing",{"path":1875,"title":1876},"\u002Fcss-only-micro-interactions-animations\u002Fkeyframe-animation-patterns\u002Fstaggered-list-animations-with-custom-properties","Staggered List Animations Using --i Index Custom Properties",{"path":1878,"title":1879},"\u002Fcss-only-micro-interactions-animations\u002Fperformance-gpu-acceleration\u002Fanimating-box-shadow-and-filters-cheaply","Animating box-shadow and Filters Cheaply",{"path":1881,"title":1882},"\u002Fcss-only-micro-interactions-animations\u002Fperformance-gpu-acceleration\u002Fcontain-property-for-animation-performance","The contain Property for Animation Performance",{"path":1884,"title":1885},"\u002Fcss-only-micro-interactions-animations\u002Fperformance-gpu-acceleration\u002Fcss-triggers-layout-paint-composite","Layout, Paint and Composite: What Triggers What",{"path":1887,"title":1888},"\u002Fcss-only-micro-interactions-animations\u002Fperformance-gpu-acceleration","Performance & GPU Acceleration in CSS: A Developer’s Blueprint",{"path":1890,"title":1891},"\u002Fcss-only-micro-interactions-animations\u002Fperformance-gpu-acceleration\u002Foptimizing-css-animations-for-60fps","Optimizing CSS Animations for 60fps: Budgeting the Frame",{"path":1893,"title":1894},"\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":1896,"title":1897},"\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":1899,"title":1900},"\u002Fcss-only-micro-interactions-animations\u002Fscroll-driven-animations","Scroll-Driven Animations: Binding Motion to Scroll Position in Pure CSS",{"path":1902,"title":1903},"\u002Fcss-only-micro-interactions-animations\u002Fscroll-driven-animations\u002Fscroll-driven-animation-fallbacks","Shipping Scroll-Driven Animations Without Breaking Anything",{"path":1905,"title":1906},"\u002Fcss-only-micro-interactions-animations\u002Fscroll-driven-animations\u002Fscroll-driven-parallax-effects","Scroll-Driven Parallax Effects in CSS",{"path":1908,"title":1909},"\u002Fcss-only-micro-interactions-animations\u002Fscroll-driven-animations\u002Fscroll-progress-bar-without-javascript","A Reading Progress Bar Driven by scroll(root)",{"path":1911,"title":1912},"\u002Fcss-only-micro-interactions-animations\u002Fscroll-driven-animations\u002Fscroll-triggered-reveal-animations","Reveal-on-Scroll with view() and animation-range",{"path":1914,"title":1915},"\u002Fcss-only-micro-interactions-animations\u002Fscroll-driven-animations\u002Ftimeline-scope-for-cross-element-animations","timeline-scope for Cross-Element Animations",{"path":1917,"title":1918},"\u002Fcss-only-micro-interactions-animations\u002Fscroll-driven-animations\u002Fview-timeline-and-animation-range","View Timelines and animation-range",{"path":1920,"title":1921},"\u002Fcss-only-micro-interactions-animations\u002Fview-transitions-for-css-developers\u002Fcross-document-view-transitions","Cross-Document View Transitions",{"path":1923,"title":1924},"\u002Fcss-only-micro-interactions-animations\u002Fview-transitions-for-css-developers","View Transitions for CSS Developers: the Pseudo-Element Tree, Snapshots, and Named Elements",{"path":1926,"title":1927},"\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":1929,"title":1930},"\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":1932,"title":1933},"\u002Fcss-only-micro-interactions-animations\u002Fview-transitions-for-css-developers\u002Fview-transition-types-and-classes","View Transition Types and Classes",{"path":1935,"title":1936},"\u002Fcss-only-micro-interactions-animations\u002Fview-transitions-for-css-developers\u002Fview-transitions-for-list-reordering","View Transitions for List Reordering",{"path":1938,"title":1939},"\u002Fcss-only-micro-interactions-animations\u002Fview-transitions-for-css-developers\u002Fview-transitions-with-reduced-motion","Honouring prefers-reduced-motion in View Transitions",{"path":365,"title":1941},"Modern CSS Layouts & Micro-Interactions",{"path":1943,"title":1944},"\u002Fmastering-container-queries-responsive-layouts\u002Fanchor-positioning-and-overlays\u002Fanchor-positioned-tooltips","Anchor-Positioned Tooltips: Tethering, Flipping, and Getting the Semantics Right",{"path":1946,"title":1947},"\u002Fmastering-container-queries-responsive-layouts\u002Fanchor-positioning-and-overlays\u002Fanchor-positioning-fallbacks","Anchor Positioning Fallbacks: A Graceful Floor for Older Browser Versions",{"path":1949,"title":1950},"\u002Fmastering-container-queries-responsive-layouts\u002Fanchor-positioning-and-overlays\u002Fanchor-size-for-matching-widths","anchor-size(): Overlays That Match Their Trigger's Size",{"path":1952,"title":1953},"\u002Fmastering-container-queries-responsive-layouts\u002Fanchor-positioning-and-overlays","CSS Anchor Positioning and Overlays: Tethering Elements Without JavaScript",{"path":1955,"title":1956},"\u002Fmastering-container-queries-responsive-layouts\u002Fanchor-positioning-and-overlays\u002Fpopover-attribute-and-css-styling","The popover Attribute: Top-Layer Overlays With No JavaScript",{"path":1958,"title":1959},"\u002Fmastering-container-queries-responsive-layouts\u002Fanchor-positioning-and-overlays\u002Fpopover-light-dismiss-and-stacking","Popover Light Dismiss, Nesting and Stacking",{"path":1961,"title":1962},"\u002Fmastering-container-queries-responsive-layouts\u002Fanchor-positioning-and-overlays\u002Fposition-area-grid-explained","position-area: The Anchor Placement Grid",{"path":1964,"title":1965},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-fallbacks\u002Fcontainer-query-polyfill-tradeoffs","Container Query Polyfills: What They Cost and When to Skip Them",{"path":1967,"title":1968},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-fallbacks\u002Ffeature-detection-with-supports","Feature Detection with @supports: Syntax, Semantics, and the Traps",{"path":1970,"title":1971},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-fallbacks\u002Fhandling-container-query-fallbacks-for-older-browsers","Handling Container Query Fallbacks for Older Browsers",{"path":1973,"title":1974},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-fallbacks","Container Query Fallbacks: Spec-Compliant CSS Strategies for Legacy Browsers",{"path":1976,"title":1977},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-fallbacks\u002Fintrinsic-layout-fallbacks-without-queries","Intrinsic Layout Fallbacks: Baselines That Adapt Without Any Query",{"path":1979,"title":1980},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-fallbacks\u002Ftesting-fallbacks-without-old-browsers","Testing CSS Fallbacks Without an Old Browser",{"path":1982,"title":1983},"\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":1985,"title":1986},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-syntax-basics\u002Fcontainer-query-range-and-logic-operators","Container Query Range Syntax and Logic Operators",{"path":1988,"title":1989},"\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":1991,"title":1992},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-syntax-basics\u002Fcontainer-type-size-vs-inline-size","Choosing container-type: inline-size, size, or normal",{"path":1994,"title":1995},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-syntax-basics\u002Fcontainer-vs-media-queries-comparison","Container vs Media Queries: Choosing the Right Reference Box",{"path":1997,"title":1998},"\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":2000,"title":2001},"\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":2003,"title":2004},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-syntax-basics","Container Query Syntax Basics",{"path":2006,"title":2007},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-syntax-basics\u002Fnesting-and-naming-container-queries","Nesting and Naming Container Queries: Targeting the Right Ancestor",{"path":2009,"title":2010},"\u002Fmastering-container-queries-responsive-layouts\u002Fcss-grid-and-subgrid-layouts\u002Fauto-fit-minmax-responsive-grids","Responsive Grids with repeat(auto-fit, minmax())",{"path":2012,"title":2013},"\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":2015,"title":2016},"\u002Fmastering-container-queries-responsive-layouts\u002Fcss-grid-and-subgrid-layouts\u002Fgrid-auto-flow-dense-packing","grid-auto-flow: dense for Packed Layouts",{"path":2018,"title":2019},"\u002Fmastering-container-queries-responsive-layouts\u002Fcss-grid-and-subgrid-layouts\u002Fgrid-template-areas-responsive-layouts","Responsive Layouts With grid-template-areas: Rearranging Regions by Name",{"path":2021,"title":2022},"\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":2024,"title":2025},"\u002Fmastering-container-queries-responsive-layouts\u002Fcss-grid-and-subgrid-layouts","CSS Grid and Subgrid Layouts for Responsive Interfaces",{"path":2027,"title":2028},"\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":2030,"title":2031},"\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":2033,"title":2034},"\u002Fmastering-container-queries-responsive-layouts\u002Fcss-grid-and-subgrid-layouts\u002Fsubgrid-vs-nested-grid","Subgrid vs an Independently Nested Grid",{"path":2036,"title":2037},"\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":2039,"title":2040},"\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":2042,"title":2043},"\u002Fmastering-container-queries-responsive-layouts\u002Fflexbox-layout-patterns\u002Fflex-grow-and-flex-shrink-explained","flex-grow and flex-shrink Explained",{"path":2045,"title":2046},"\u002Fmastering-container-queries-responsive-layouts\u002Fflexbox-layout-patterns\u002Fflex-wrap-intrinsic-responsive-rows","Breakpoint-Free Responsive Rows With flex-wrap and flex-basis",{"path":2048,"title":2049},"\u002Fmastering-container-queries-responsive-layouts\u002Fflexbox-layout-patterns\u002Fflexbox-gap-and-spacing","Flexbox gap vs Margins: Spacing Items Without Edge Hacks",{"path":2051,"title":2052},"\u002Fmastering-container-queries-responsive-layouts\u002Fflexbox-layout-patterns","Flexbox Layout Patterns: One-Dimensional Layout for Real Components",{"path":2054,"title":2055},"\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":2057,"title":2058},"\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":2060,"title":2061},"\u002Fmastering-container-queries-responsive-layouts\u002Ffluid-typography-with-clamp\u002Fdebugging-clamp-values","Debugging clamp(): Values That Are Ignored, Stuck or Never Fluid",{"path":2063,"title":2064},"\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":2066,"title":2067},"\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":2069,"title":2070},"\u002Fmastering-container-queries-responsive-layouts\u002Ffluid-typography-with-clamp\u002Ffluid-type-accessibility-and-zoom","Fluid Type, Accessibility and Zoom: The vw-Only Trap",{"path":2072,"title":2073},"\u002Fmastering-container-queries-responsive-layouts\u002Ffluid-typography-with-clamp\u002Ffluid-typography-without-javascript","Fluid Typography Without JavaScript: A Precision CSS Reference",{"path":2075,"title":2076},"\u002Fmastering-container-queries-responsive-layouts\u002Ffluid-typography-with-clamp","Fluid Typography with clamp(): A Practical Guide for Modern CSS",{"path":2078,"title":2079},"\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":2081,"title":35},"\u002Fmastering-container-queries-responsive-layouts",{"path":2083,"title":2084},"\u002Fmastering-container-queries-responsive-layouts\u002Fintrinsic-sizing-techniques\u002Faspect-ratio-for-responsive-media","Using aspect-ratio for Responsive Media and Preventing Layout Shift",{"path":2086,"title":2087},"\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":2089,"title":2090},"\u002Fmastering-container-queries-responsive-layouts\u002Fintrinsic-sizing-techniques","Intrinsic Sizing Techniques: Modern CSS Layouts for Responsive UI",{"path":2092,"title":2093},"\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":2095,"title":2096},"\u002Fmastering-container-queries-responsive-layouts\u002Fintrinsic-sizing-techniques\u002Fmin-max-fit-content-explained","min-content, max-content, and fit-content() Explained",{"path":2098,"title":2099},"\u002Fmastering-container-queries-responsive-layouts\u002Fintrinsic-sizing-techniques\u002Fobject-fit-and-object-position","object-fit and object-position: Images That Fit Any Box",{"path":2101,"title":2102},"\u002Fmastering-container-queries-responsive-layouts\u002Fintrinsic-sizing-techniques\u002Fpreventing-flex-and-grid-overflow","The min-width: auto Trap in Flex and Grid Layouts",{"path":2104,"title":2105},"\u002Fmastering-container-queries-responsive-layouts\u002Fmodern-css-reset-strategies\u002Fcascade-layers-for-reset-and-tokens","Cascade Layers for Reset and Design Tokens",{"path":2107,"title":2108},"\u002Fmastering-container-queries-responsive-layouts\u002Fmodern-css-reset-strategies\u002Fcascade-layers-vs-specificity-hacks","Cascade Layers vs Specificity Hacks: Ordering Instead of Escalating",{"path":2110,"title":2111},"\u002Fmastering-container-queries-responsive-layouts\u002Fmodern-css-reset-strategies\u002Fcss-scope-for-component-styles","@scope for Component Styles: Short Selectors That Cannot Leak",{"path":2113,"title":2114},"\u002Fmastering-container-queries-responsive-layouts\u002Fmodern-css-reset-strategies","Modern CSS Reset Strategies: A Spec-Compliant Foundation",{"path":2116,"title":2117},"\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":2119,"title":2120},"\u002Fmastering-container-queries-responsive-layouts\u002Fmodern-css-reset-strategies\u002Fwriting-a-minimal-modern-reset","Writing a Minimal Modern CSS Reset: Every Line Justified",{"path":2122,"title":2123},"\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":2125,"title":2126},"\u002Fmastering-container-queries-responsive-layouts\u002Fparent-aware-layouts-with-has\u002Fempty-and-loading-states-with-has","Empty and Loading States With ()",{"path":2128,"title":2129},"\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":2131,"title":2132},"\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":2134,"title":2135},"\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":2137,"title":2138},"\u002Fmastering-container-queries-responsive-layouts\u002Fparent-aware-layouts-with-has","Parent-Aware Layouts With :has(): Letting Containers React to Their Contents",{"path":2140,"title":2141},"\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":2143,"title":2144},"\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":2146,"title":2147},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns\u002Fcontainer-query-data-tables","Container Query Data Tables: Reflowing Tables to Cards",{"path":2149,"title":2150},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns\u002Fcontainer-query-sidebar-layouts","Container Query Sidebar Layouts That Travel Between Contexts",{"path":2152,"title":2153},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns","Responsive Component Patterns: Architecture & Implementation",{"path":2155,"title":2156},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns\u002Fresponsive-forms-with-container-queries","Responsive Forms with Container Queries: Reflow Without Losing the Wiring",{"path":2158,"title":2159},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns\u002Fresponsive-hero-sections-with-container-queries","Responsive Hero Sections With Container Queries",{"path":2161,"title":2162},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns\u002Fresponsive-navigation-without-media-queries","Responsive Navigation Without Media Queries Using Container Queries",{"path":2164,"title":2165},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns\u002Fresponsive-pricing-tables","Responsive Pricing Tables: Aligned Features, a Clear Recommendation, Any Width",{"path":2167,"title":2168},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns\u002Ftabs-that-become-accordions","Tabs That Become an Accordion: One Component, Two Layouts",{"path":2170,"title":2171},"\u002Fmastering-container-queries-responsive-layouts\u002Fscroll-snap-and-overflow-layouts\u002Fcss-only-carousel-with-scroll-snap","A CSS-Only Carousel With Scroll Snap",{"path":2173,"title":2174},"\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":2176,"title":2177},"\u002Fmastering-container-queries-responsive-layouts\u002Fscroll-snap-and-overflow-layouts","Scroll Snap & Overflow Layouts: Designing Components That Scroll on Purpose",{"path":2179,"title":2180},"\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":2182,"title":2183},"\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":2185,"title":2186},"\u002Fmastering-container-queries-responsive-layouts\u002Fstyle-queries-and-container-state\u002Fcombining-size-and-style-queries","Combining Size and Style Container Queries",{"path":2188,"title":2189},"\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":2191,"title":2192},"\u002Fmastering-container-queries-responsive-layouts\u002Fstyle-queries-and-container-state","Style Queries and Container State: Token-Driven Component Variants",{"path":2194,"title":2195},"\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":2197,"title":2198},"\u002Fmastering-container-queries-responsive-layouts\u002Fstyle-queries-and-container-state\u002Fstyle-query-component-variants","Component Variants With Style Queries: One Token, Many Looks",{"path":2200,"title":2201},"\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":2203,"title":2204},"\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":1656,"title":5},{"path":2207,"title":2208},"\u002Fmastering-container-queries-responsive-layouts\u002Fviewport-units-and-mobile-layout","Viewport Units & Mobile Layout: Designing for the Screen You Actually Get",{"path":2210,"title":2211},"\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":2213,"title":2214},"\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":2216,"title":2217},"\u002Fmastering-container-queries-responsive-layouts\u002Fviewport-units-and-mobile-layout\u002Fvirtual-keyboard-and-interactive-widget","Layouts That Survive the Virtual Keyboard",{"title":2219,"caption":2220,"height":2221,"resizable":384,"html":2222,"css":2223},"Full-bleed, breakout and content columns from named lines","Narrow the frame: gutters shrink first, then the breakout columns, and the full-bleed band always reaches both edges with no horizontal scroll.",460,"\n\u003Carticle class=\"article\">\n  \u003Ch1>Crossing the Plateau\u003C\u002Fh1>\n  \u003Cp>Reading text stays in a comfortable measure.\u003C\u002Fp>\n  \u003Cfigure class=\"full-bleed\">\u003Cdiv class=\"photo\" role=\"img\" aria-label=\"Wide landscape placeholder\">\u003C\u002Fdiv>\u003C\u002Ffigure>\n  \u003Cp>More reading text, back in the column.\u003C\u002Fp>\n  \u003Ctable class=\"breakout\">\u003Ctr>\u003Cth>Day\u003C\u002Fth>\u003Cth>Distance\u003C\u002Fth>\u003C\u002Ftr>\u003Ctr>\u003Ctd>1\u003C\u002Ftd>\u003Ctd>18 km\u003C\u002Ftd>\u003C\u002Ftr>\u003C\u002Ftable>\n  \u003Caside class=\"band\">\u003Cp>A pull quote whose background runs edge to edge.\u003C\u002Fp>\u003C\u002Faside>\n\u003C\u002Farticle>","\nbody { display: block; padding: 0; font: 16px\u002F1.6 Georgia, serif; }\n.article {\n  display: grid;\n  --gutter: 1rem;\n  --measure: 38ch;\n  --breakout-extra: 5rem;\n  grid-template-columns:\n    [full-start] minmax(var(--gutter), 1fr)\n    [breakout-start] minmax(0, var(--breakout-extra))\n    [content-start] min(var(--measure), 100% - 2 * var(--gutter))\n    [content-end] minmax(0, var(--breakout-extra))\n    [breakout-end] minmax(var(--gutter), 1fr)\n    [full-end];\n}\n.article > * { grid-column: content; }\n.article > .breakout { grid-column: breakout; }\n.article > .full-bleed { grid-column: full; margin: 0; }\n.article h1 { font-size: 1.4rem; margin: 1rem 0 0; }\n.photo { height: 90px; background: linear-gradient(120deg, #93c5fd, #6366f1 60%, #312e81); }\n.breakout { border-collapse: collapse; width: 100%; background: var(--demo-surface); }\n.breakout th, .breakout td { border: 1px solid var(--demo-border); padding: 0.25rem 0.5rem; text-align: left; }\n.band {\n  grid-column: full;\n  display: grid;\n  grid-template-columns: inherit;\n  margin-top: 1rem;\n  padding-block: 1rem;\n  background: #1e293b;\n  color: #f1f5f9;\n}\n.band > * { grid-column: content; margin: 0; }",1789717748016]