[{"data":1,"prerenderedAt":1788},["ShallowReactive",2],{"page-\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-syntax-basics\u002Fcontainer-type-size-vs-inline-size\u002F":3,"content-all-pages":1528},{"id":4,"title":5,"body":6,"description":1510,"extension":1511,"meta":1512,"navigation":532,"path":1524,"seo":1525,"stem":1526,"__hash__":1527},"content\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-syntax-basics\u002Fcontainer-type-size-vs-inline-size\u002Findex.md","Choosing container-type: inline-size, size, or normal",{"type":7,"value":8,"toc":1499},"minimark",[9,13,18,45,49,52,67,74,77,81,192,202,212,231,235,249,258,262,265,1110,1114,1117,1160,1176,1178,1182,1193,1388,1395,1399,1419,1423,1432,1438,1450,1456,1460,1496],[10,11,5],"h1",{"id":12},"choosing-container-type-inline-size-size-or-normal",[14,15,17],"h2",{"id":16},"the-narrow-problem","The narrow problem",[19,20,21,22,26,27,30,31,33,34,39,40,44],"p",{},"You added ",[23,24,25],"code",{},"container-type"," to a wrapper, wrote a ",[23,28,29],{},"@container"," block, and something went wrong — either the query silently never matched, or worse, the element you made a container flattened to nothing and its children spilled across the page. Both outcomes trace back to a single decision made in one declaration: which of the three ",[23,32,25],{}," values you picked. The values are not three flavours of the same thing. Each applies a different amount of CSS containment, and containment is a promise to the layout engine that changes how the box is sized. This page explains exactly what each value contains, why one of them can zero out an element's height, and the rule of thumb that keeps you out of trouble. It sits inside ",[35,36,38],"a",{"href":37},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-syntax-basics\u002F","Container Query Syntax Basics",", part of ",[35,41,43],{"href":42},"\u002Fmastering-container-queries-responsive-layouts\u002F","Mastering Container Queries & Responsive Layouts",".",[14,46,48],{"id":47},"why-the-choice-is-forced-on-you-at-all","Why the choice is forced on you at all",[19,50,51],{},"A query container has to answer a question about its own size before its descendants are laid out. That creates a circularity risk: if a descendant's styles can change the container's size, and the container's size decides those styles, the engine could loop forever. CSS resolves this by requiring containment. When you declare a container type, you are promising that the contained axes can be sized without consulting the subtree, which breaks the loop and lets the engine evaluate the query once, cheaply, in a single layout pass.",[19,53,54,55,58,59,62,63,66],{},"That is the whole reason ",[23,56,57],{},"inline-size"," and ",[23,60,61],{},"size"," differ. The inline axis of a block-level box is already independent of its contents in normal flow — a ",[23,64,65],{},"\u003Cdiv>"," is as wide as its parent regardless of the text inside it — so containing that one axis costs nothing and forbids nothing. The block axis is the opposite: a box's height is normally the sum of its children. Containing it means the engine deliberately stops asking the children how tall they are, and you must supply the height some other way.",[19,68,69,70,73],{},"The alternative to all of this is JavaScript with a ",[23,71,72],{},"ResizeObserver",", which does work and predates container queries. It also runs after layout, can produce a visible reflow on first paint, and needs teardown logic per component. The declarative form has none of those costs, so the price of understanding containment is worth paying.",[75,76],"hr",{},[14,78,80],{"id":79},"what-each-value-contains","What each value contains",[82,83,89,90,89,94,89,98,89,105,89,117,89,122,89,125,89,131,89,133,89,136,89,143,89,147,89,151,89,156,89,160,89,164,89,167,89,170,89,173,89,176,89,179,89,182,89,187],"svg",{"viewBox":84,"role":85,"ariaLabel":86,"xmlns":87,"style":88},"0 0 720 320","img","Comparison of the three container-type values and the containment each applies","http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg","width:100%;height:auto;max-width:720px;margin:2rem 0","\n  ",[91,92,93],"title",{},"The three container-type values compared",[95,96,97],"desc",{},"Three panels showing that normal applies no size containment, inline-size contains the inline axis only, and size contains both axes and therefore needs an explicit height.",[99,100,104],"text",{"x":101,"y":102,"style":103},"360","30","text-anchor:middle;fill:currentColor;font:700 17px sans-serif","what each value contains",[106,107],"rect",{"x":108,"y":109,"width":110,"height":111,"rx":112,"fill":113,"stroke":114,"strokeWidth":115,"opacity":116},"24","60","208","180","10","none","currentColor","1.5","0.45",[106,118],{"x":119,"y":109,"width":110,"height":111,"rx":112,"fill":120,"opacity":121},"256","#7aa2ff","0.18",[106,123],{"x":124,"y":109,"width":110,"height":111,"rx":112,"fill":113,"stroke":114,"strokeWidth":115,"opacity":116},"488",[99,126,130],{"x":127,"y":128,"style":129},"128","96","text-anchor:middle;fill:currentColor;font:13px ui-monospace,monospace","normal",[99,132,57],{"x":101,"y":128,"style":129},[99,134,61],{"x":135,"y":128,"style":129},"592",[137,138],"line",{"x1":139,"y1":140,"x2":110,"y2":140,"stroke":114,"strokeWidth":141,"opacity":142},"48","112","1","0.3",[137,144],{"x1":145,"y1":140,"x2":146,"y2":140,"stroke":114,"strokeWidth":141,"opacity":142},"280","440",[137,148],{"x1":149,"y1":140,"x2":150,"y2":140,"stroke":114,"strokeWidth":141,"opacity":142},"512","672",[99,152,155],{"x":127,"y":153,"style":154},"140","text-anchor:middle;fill:currentColor;font:12px sans-serif;opacity:0.85","no size containment",[99,157,159],{"x":127,"y":158,"style":154},"168","size queries never match",[99,161,163],{"x":127,"y":162,"style":154},"196","style queries still work",[99,165,166],{"x":101,"y":153,"style":154},"inline axis contained",[99,168,169],{"x":101,"y":158,"style":154},"height stays content-driven",[99,171,172],{"x":101,"y":162,"style":154},"width queries resolve",[99,174,175],{"x":135,"y":153,"style":154},"both axes contained",[99,177,178],{"x":135,"y":158,"style":154},"height must be given",[99,180,181],{"x":135,"y":162,"style":154},"or it collapses to zero",[99,183,186],{"x":101,"y":184,"style":185},"278","text-anchor:middle;fill:currentColor;font:600 14px sans-serif","pick the middle one unless you truly need height queries",[99,188,191],{"x":101,"y":189,"style":190},"302","text-anchor:middle;fill:currentColor;font:12px sans-serif;opacity:0.6","containment grows left to right",[19,193,194,197,198,201],{},[23,195,196],{},"container-type: normal"," is the initial value. It applies no size containment whatsoever and establishes the element as a query container for style queries only. Size conditions such as ",[23,199,200],{},"(min-width: 30rem)"," will never match against it, because the element has made no promise that would let the engine answer them safely.",[19,203,204,207,208,44],{},[23,205,206],{},"container-type: inline-size"," applies inline-axis size containment plus layout, style, and paint containment. The box's inline size is taken from its own formatting context rather than its contents; its block size continues to be computed from its children exactly as before. Every width-based condition resolves, and so do the inline container units described in ",[35,209,211],{"href":210},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-syntax-basics\u002Fcontainer-query-units-cqi-cqb-explained\u002F","Container Query Units cqi and cqb",[19,213,214,217,218,222,223,226,227,230],{},[23,215,216],{},"container-type: size"," applies size containment on ",[219,220,221],"strong",{},"both"," axes. That unlocks ",[23,224,225],{},"(min-height: …)",", ",[23,228,229],{},"(aspect-ratio: …)"," and block-axis conditions, at the cost of the engine no longer deriving the box's height from its contents at all.",[14,232,234],{"id":233},"the-failure-mode-a-container-that-renders-at-zero-height","The failure mode: a container that renders at zero height",[19,236,237,238,240,241,244,245,248],{},"This is the trap, and it is worth stating plainly. Under ",[23,239,216],{},", an element whose height is ",[23,242,243],{},"auto"," has no source of block size left. The children are excluded by containment, so the used height is ",[23,246,247],{},"0",". The border collapses to a hairline, backgrounds vanish, and the children paint outside the box's own area — usually straight over whatever follows.",[19,250,251,252,254,255,257],{},"The live demo below puts the two side by side. Drag the resize handle and watch the ",[23,253,57],{}," panel behave normally while the ",[23,256,61],{}," panel stays flat no matter how much text is inside it.",[259,260],"live-demo",{"name":261},"lp-container-type-collapse",[19,263,264],{},"Here is the same thing as a self-contained document you can save and open.",[266,267,272],"pre",{"className":268,"code":269,"language":270,"meta":271,"style":271},"language-html shiki shiki-themes github-light-high-contrast github-dark-high-contrast","\u003C!doctype html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n\u003Cmeta charset=\"utf-8\">\n\u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n\u003Ctitle>container-type: size collapse\u003C\u002Ftitle>\n\u003Cstyle>\n  body { font: 16px\u002F1.5 system-ui, sans-serif; margin: 2rem; max-width: 40rem; }\n  .panel { margin-bottom: 2.5rem; }\n  .panel__tag { margin: 0 0 0.4rem; font: 0.75rem ui-monospace, monospace; color: #666; }\n\n  .box {\n    border: 2px dashed #7aa2ff;\n    background: #7aa2ff14;\n    padding: 0.75rem;\n  }\n  .box__text { margin: 0; }\n\n  \u002F* Inline axis contained only. Height is still the sum of the children,\n     so this box looks and behaves like an ordinary div. *\u002F\n  .box--inline { container-type: inline-size; }\n\n  \u002F* Both axes contained. Nothing supplies a block size, so the used\n     height is 0 and .box__text paints outside its own container. *\u002F\n  .box--size { container-type: size; }\n\n  \u002F* This resolves against .box--inline. It cannot resolve against a\n     container whose type is normal. *\u002F\n  @container (max-width: 24rem) {\n    .box__text { font-style: italic; }\n  }\n\n  \u002F* The repair: give the size container a determinate block size. *\u002F\n  .box--size-fixed {\n    container-type: size;\n    block-size: 8rem;          \u002F* any determinate height works *\u002F\n  }\n\u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n  \u003Csection class=\"panel\">\n    \u003Cp class=\"panel__tag\">container-type: inline-size\u003C\u002Fp>\n    \u003Cdiv class=\"box box--inline\">\n      \u003Cp class=\"box__text\">Height still grows with this text, and a width query still fires.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n  \u003C\u002Fsection>\n\n  \u003Csection class=\"panel\">\n    \u003Cp class=\"panel__tag\">container-type: size (no height set)\u003C\u002Fp>\n    \u003Cdiv class=\"box box--size\">\n      \u003Cp class=\"box__text\">Height is now zero, so this text escapes the dashed border entirely.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n  \u003C\u002Fsection>\n\n  \u003Csection class=\"panel\">\n    \u003Cp class=\"panel__tag\">container-type: size with block-size: 8rem\u003C\u002Fp>\n    \u003Cdiv class=\"box box--size-fixed\">\n      \u003Cp class=\"box__text\">A determinate block size restores the box and makes height queries meaningful.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n  \u003C\u002Fsection>\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n","html","",[23,273,274,293,313,323,341,366,380,390,454,474,527,534,543,564,577,591,597,613,618,625,631,644,649,655,661,674,679,685,691,700,718,723,728,734,742,751,770,775,785,794,804,823,845,862,884,894,904,909,924,944,960,980,989,998,1003,1018,1038,1054,1074,1083,1092,1101],{"__ignoreMap":271},[275,276,278,282,286,290],"span",{"class":137,"line":277},1,[275,279,281],{"class":280},"suds8","\u003C!",[275,283,285],{"class":284},"sne4z","doctype",[275,287,289],{"class":288},"s-5SL"," html",[275,291,292],{"class":280},">\n",[275,294,296,299,301,304,307,311],{"class":137,"line":295},2,[275,297,298],{"class":280},"\u003C",[275,300,270],{"class":284},[275,302,303],{"class":288}," lang",[275,305,306],{"class":280},"=",[275,308,310],{"class":309},"sT6z2","\"en\"",[275,312,292],{"class":280},[275,314,316,318,321],{"class":137,"line":315},3,[275,317,298],{"class":280},[275,319,320],{"class":284},"head",[275,322,292],{"class":280},[275,324,326,328,331,334,336,339],{"class":137,"line":325},4,[275,327,298],{"class":280},[275,329,330],{"class":284},"meta",[275,332,333],{"class":288}," charset",[275,335,306],{"class":280},[275,337,338],{"class":309},"\"utf-8\"",[275,340,292],{"class":280},[275,342,344,346,348,351,353,356,359,361,364],{"class":137,"line":343},5,[275,345,298],{"class":280},[275,347,330],{"class":284},[275,349,350],{"class":288}," name",[275,352,306],{"class":280},[275,354,355],{"class":309},"\"viewport\"",[275,357,358],{"class":288}," content",[275,360,306],{"class":280},[275,362,363],{"class":309},"\"width=device-width, initial-scale=1\"",[275,365,292],{"class":280},[275,367,369,371,373,376,378],{"class":137,"line":368},6,[275,370,298],{"class":280},[275,372,91],{"class":284},[275,374,375],{"class":280},">container-type: size collapse\u003C\u002F",[275,377,91],{"class":284},[275,379,292],{"class":280},[275,381,383,385,388],{"class":137,"line":382},7,[275,384,298],{"class":280},[275,386,387],{"class":284},"style",[275,389,292],{"class":280},[275,391,393,396,399,402,405,408,412,415,417,420,422,425,428,431,433,436,439,441,444,446,449,451],{"class":137,"line":392},8,[275,394,395],{"class":284},"  body",[275,397,398],{"class":280}," { ",[275,400,401],{"class":288},"font",[275,403,404],{"class":280},": ",[275,406,407],{"class":288},"16",[275,409,411],{"class":410},"sHUrx","px",[275,413,414],{"class":280},"\u002F",[275,416,115],{"class":288},[275,418,419],{"class":288}," system-ui",[275,421,226],{"class":280},[275,423,424],{"class":288},"sans-serif",[275,426,427],{"class":280},"; ",[275,429,430],{"class":288},"margin",[275,432,404],{"class":280},[275,434,435],{"class":288},"2",[275,437,438],{"class":410},"rem",[275,440,427],{"class":280},[275,442,443],{"class":288},"max-width",[275,445,404],{"class":280},[275,447,448],{"class":288},"40",[275,450,438],{"class":410},[275,452,453],{"class":280},"; }\n",[275,455,457,460,462,465,467,470,472],{"class":137,"line":456},9,[275,458,459],{"class":288},"  .panel",[275,461,398],{"class":280},[275,463,464],{"class":288},"margin-bottom",[275,466,404],{"class":280},[275,468,469],{"class":288},"2.5",[275,471,438],{"class":410},[275,473,453],{"class":280},[275,475,477,480,482,484,486,488,491,494,496,498,500,502,505,507,510,512,515,517,520,522,525],{"class":137,"line":476},10,[275,478,479],{"class":288},"  .panel__tag",[275,481,398],{"class":280},[275,483,430],{"class":288},[275,485,404],{"class":280},[275,487,247],{"class":288},[275,489,490],{"class":288}," 0",[275,492,493],{"class":288}," 0.4",[275,495,438],{"class":410},[275,497,427],{"class":280},[275,499,401],{"class":288},[275,501,404],{"class":280},[275,503,504],{"class":288},"0.75",[275,506,438],{"class":410},[275,508,509],{"class":288}," ui-monospace",[275,511,226],{"class":280},[275,513,514],{"class":288},"monospace",[275,516,427],{"class":280},[275,518,519],{"class":288},"color",[275,521,404],{"class":280},[275,523,524],{"class":288},"#666",[275,526,453],{"class":280},[275,528,530],{"class":137,"line":529},11,[275,531,533],{"emptyLinePlaceholder":532},true,"\n",[275,535,537,540],{"class":137,"line":536},12,[275,538,539],{"class":288},"  .box",[275,541,542],{"class":280}," {\n",[275,544,546,549,551,553,555,558,561],{"class":137,"line":545},13,[275,547,548],{"class":288},"    border",[275,550,404],{"class":280},[275,552,435],{"class":288},[275,554,411],{"class":410},[275,556,557],{"class":288}," dashed",[275,559,560],{"class":288}," #7aa2ff",[275,562,563],{"class":280},";\n",[275,565,567,570,572,575],{"class":137,"line":566},14,[275,568,569],{"class":288},"    background",[275,571,404],{"class":280},[275,573,574],{"class":288},"#7aa2ff14",[275,576,563],{"class":280},[275,578,580,583,585,587,589],{"class":137,"line":579},15,[275,581,582],{"class":288},"    padding",[275,584,404],{"class":280},[275,586,504],{"class":288},[275,588,438],{"class":410},[275,590,563],{"class":280},[275,592,594],{"class":137,"line":593},16,[275,595,596],{"class":280},"  }\n",[275,598,600,603,605,607,609,611],{"class":137,"line":599},17,[275,601,602],{"class":288},"  .box__text",[275,604,398],{"class":280},[275,606,430],{"class":288},[275,608,404],{"class":280},[275,610,247],{"class":288},[275,612,453],{"class":280},[275,614,616],{"class":137,"line":615},18,[275,617,533],{"emptyLinePlaceholder":532},[275,619,621],{"class":137,"line":620},19,[275,622,624],{"class":623},"sLBg1","  \u002F* Inline axis contained only. Height is still the sum of the children,\n",[275,626,628],{"class":137,"line":627},20,[275,629,630],{"class":623},"     so this box looks and behaves like an ordinary div. *\u002F\n",[275,632,634,637,639,641],{"class":137,"line":633},21,[275,635,636],{"class":288},"  .box--inline",[275,638,398],{"class":280},[275,640,25],{"class":288},[275,642,643],{"class":280},": inline-size; }\n",[275,645,647],{"class":137,"line":646},22,[275,648,533],{"emptyLinePlaceholder":532},[275,650,652],{"class":137,"line":651},23,[275,653,654],{"class":623},"  \u002F* Both axes contained. Nothing supplies a block size, so the used\n",[275,656,658],{"class":137,"line":657},24,[275,659,660],{"class":623},"     height is 0 and .box__text paints outside its own container. *\u002F\n",[275,662,664,667,669,671],{"class":137,"line":663},25,[275,665,666],{"class":288},"  .box--size",[275,668,398],{"class":280},[275,670,25],{"class":288},[275,672,673],{"class":280},": size; }\n",[275,675,677],{"class":137,"line":676},26,[275,678,533],{"emptyLinePlaceholder":532},[275,680,682],{"class":137,"line":681},27,[275,683,684],{"class":623},"  \u002F* This resolves against .box--inline. It cannot resolve against a\n",[275,686,688],{"class":137,"line":687},28,[275,689,690],{"class":623},"     container whose type is normal. *\u002F\n",[275,692,694,697],{"class":137,"line":693},29,[275,695,696],{"class":410},"  @container",[275,698,699],{"class":280}," (max-width: 24rem) {\n",[275,701,703,706,708,711,713,716],{"class":137,"line":702},30,[275,704,705],{"class":288},"    .box__text",[275,707,398],{"class":280},[275,709,710],{"class":288},"font-style",[275,712,404],{"class":280},[275,714,715],{"class":288},"italic",[275,717,453],{"class":280},[275,719,721],{"class":137,"line":720},31,[275,722,596],{"class":280},[275,724,726],{"class":137,"line":725},32,[275,727,533],{"emptyLinePlaceholder":532},[275,729,731],{"class":137,"line":730},33,[275,732,733],{"class":623},"  \u002F* The repair: give the size container a determinate block size. *\u002F\n",[275,735,737,740],{"class":137,"line":736},34,[275,738,739],{"class":288},"  .box--size-fixed",[275,741,542],{"class":280},[275,743,745,748],{"class":137,"line":744},35,[275,746,747],{"class":288},"    container-type",[275,749,750],{"class":280},": size;\n",[275,752,754,757,759,762,764,767],{"class":137,"line":753},36,[275,755,756],{"class":288},"    block-size",[275,758,404],{"class":280},[275,760,761],{"class":288},"8",[275,763,438],{"class":410},[275,765,766],{"class":280},";          ",[275,768,769],{"class":623},"\u002F* any determinate height works *\u002F\n",[275,771,773],{"class":137,"line":772},37,[275,774,596],{"class":280},[275,776,778,781,783],{"class":137,"line":777},38,[275,779,780],{"class":280},"\u003C\u002F",[275,782,387],{"class":284},[275,784,292],{"class":280},[275,786,788,790,792],{"class":137,"line":787},39,[275,789,780],{"class":280},[275,791,320],{"class":284},[275,793,292],{"class":280},[275,795,797,799,802],{"class":137,"line":796},40,[275,798,298],{"class":280},[275,800,801],{"class":284},"body",[275,803,292],{"class":280},[275,805,807,810,813,816,818,821],{"class":137,"line":806},41,[275,808,809],{"class":280},"  \u003C",[275,811,812],{"class":284},"section",[275,814,815],{"class":288}," class",[275,817,306],{"class":280},[275,819,820],{"class":309},"\"panel\"",[275,822,292],{"class":280},[275,824,826,829,831,833,835,838,841,843],{"class":137,"line":825},42,[275,827,828],{"class":280},"    \u003C",[275,830,19],{"class":284},[275,832,815],{"class":288},[275,834,306],{"class":280},[275,836,837],{"class":309},"\"panel__tag\"",[275,839,840],{"class":280},">container-type: inline-size\u003C\u002F",[275,842,19],{"class":284},[275,844,292],{"class":280},[275,846,848,850,853,855,857,860],{"class":137,"line":847},43,[275,849,828],{"class":280},[275,851,852],{"class":284},"div",[275,854,815],{"class":288},[275,856,306],{"class":280},[275,858,859],{"class":309},"\"box box--inline\"",[275,861,292],{"class":280},[275,863,865,868,870,872,874,877,880,882],{"class":137,"line":864},44,[275,866,867],{"class":280},"      \u003C",[275,869,19],{"class":284},[275,871,815],{"class":288},[275,873,306],{"class":280},[275,875,876],{"class":309},"\"box__text\"",[275,878,879],{"class":280},">Height still grows with this text, and a width query still fires.\u003C\u002F",[275,881,19],{"class":284},[275,883,292],{"class":280},[275,885,887,890,892],{"class":137,"line":886},45,[275,888,889],{"class":280},"    \u003C\u002F",[275,891,852],{"class":284},[275,893,292],{"class":280},[275,895,897,900,902],{"class":137,"line":896},46,[275,898,899],{"class":280},"  \u003C\u002F",[275,901,812],{"class":284},[275,903,292],{"class":280},[275,905,907],{"class":137,"line":906},47,[275,908,533],{"emptyLinePlaceholder":532},[275,910,912,914,916,918,920,922],{"class":137,"line":911},48,[275,913,809],{"class":280},[275,915,812],{"class":284},[275,917,815],{"class":288},[275,919,306],{"class":280},[275,921,820],{"class":309},[275,923,292],{"class":280},[275,925,927,929,931,933,935,937,940,942],{"class":137,"line":926},49,[275,928,828],{"class":280},[275,930,19],{"class":284},[275,932,815],{"class":288},[275,934,306],{"class":280},[275,936,837],{"class":309},[275,938,939],{"class":280},">container-type: size (no height set)\u003C\u002F",[275,941,19],{"class":284},[275,943,292],{"class":280},[275,945,947,949,951,953,955,958],{"class":137,"line":946},50,[275,948,828],{"class":280},[275,950,852],{"class":284},[275,952,815],{"class":288},[275,954,306],{"class":280},[275,956,957],{"class":309},"\"box box--size\"",[275,959,292],{"class":280},[275,961,963,965,967,969,971,973,976,978],{"class":137,"line":962},51,[275,964,867],{"class":280},[275,966,19],{"class":284},[275,968,815],{"class":288},[275,970,306],{"class":280},[275,972,876],{"class":309},[275,974,975],{"class":280},">Height is now zero, so this text escapes the dashed border entirely.\u003C\u002F",[275,977,19],{"class":284},[275,979,292],{"class":280},[275,981,983,985,987],{"class":137,"line":982},52,[275,984,889],{"class":280},[275,986,852],{"class":284},[275,988,292],{"class":280},[275,990,992,994,996],{"class":137,"line":991},53,[275,993,899],{"class":280},[275,995,812],{"class":284},[275,997,292],{"class":280},[275,999,1001],{"class":137,"line":1000},54,[275,1002,533],{"emptyLinePlaceholder":532},[275,1004,1006,1008,1010,1012,1014,1016],{"class":137,"line":1005},55,[275,1007,809],{"class":280},[275,1009,812],{"class":284},[275,1011,815],{"class":288},[275,1013,306],{"class":280},[275,1015,820],{"class":309},[275,1017,292],{"class":280},[275,1019,1021,1023,1025,1027,1029,1031,1034,1036],{"class":137,"line":1020},56,[275,1022,828],{"class":280},[275,1024,19],{"class":284},[275,1026,815],{"class":288},[275,1028,306],{"class":280},[275,1030,837],{"class":309},[275,1032,1033],{"class":280},">container-type: size with block-size: 8rem\u003C\u002F",[275,1035,19],{"class":284},[275,1037,292],{"class":280},[275,1039,1041,1043,1045,1047,1049,1052],{"class":137,"line":1040},57,[275,1042,828],{"class":280},[275,1044,852],{"class":284},[275,1046,815],{"class":288},[275,1048,306],{"class":280},[275,1050,1051],{"class":309},"\"box box--size-fixed\"",[275,1053,292],{"class":280},[275,1055,1057,1059,1061,1063,1065,1067,1070,1072],{"class":137,"line":1056},58,[275,1058,867],{"class":280},[275,1060,19],{"class":284},[275,1062,815],{"class":288},[275,1064,306],{"class":280},[275,1066,876],{"class":309},[275,1068,1069],{"class":280},">A determinate block size restores the box and makes height queries meaningful.\u003C\u002F",[275,1071,19],{"class":284},[275,1073,292],{"class":280},[275,1075,1077,1079,1081],{"class":137,"line":1076},59,[275,1078,889],{"class":280},[275,1080,852],{"class":284},[275,1082,292],{"class":280},[275,1084,1086,1088,1090],{"class":137,"line":1085},60,[275,1087,899],{"class":280},[275,1089,812],{"class":284},[275,1091,292],{"class":280},[275,1093,1095,1097,1099],{"class":137,"line":1094},61,[275,1096,780],{"class":280},[275,1098,801],{"class":284},[275,1100,292],{"class":280},[275,1102,1104,1106,1108],{"class":137,"line":1103},62,[275,1105,780],{"class":280},[275,1107,270],{"class":284},[275,1109,292],{"class":280},[14,1111,1113],{"id":1112},"key-technique-what-counts-as-a-determinate-block-size","Key technique: what counts as a determinate block size",[19,1115,1116],{},"\"Set a height\" is the short version, but the engine accepts several sources, and knowing them means you rarely need a hardcoded pixel value:",[1118,1119,1120,1132,1143,1150],"ul",{},[1121,1122,1123,1124,1127,1128,1131],"li",{},"An explicit ",[23,1125,1126],{},"height"," or ",[23,1129,1130],{},"block-size"," in any absolute or relative unit.",[1121,1133,1134,1135,1138,1139,44],{},"An ",[23,1136,1137],{},"aspect-ratio"," combined with a resolved inline size — the technique covered in ",[35,1140,1142],{"href":1141},"\u002Fmastering-container-queries-responsive-layouts\u002Fintrinsic-sizing-techniques\u002Faspect-ratio-for-responsive-media\u002F","aspect-ratio for Responsive Media",[1121,1144,1145,1146,1149],{},"Being a grid item stretched into a track whose size the parent grid already knows, or a flex item stretched by ",[23,1147,1148],{},"align-items: stretch"," in a row with a resolved cross size.",[1121,1151,1152,1153,58,1156,1159],{},"Absolute positioning with both ",[23,1154,1155],{},"top",[23,1157,1158],{},"bottom"," set.",[19,1161,1162,1163,1165,1166,1172,1173,1175],{},"If none of these apply, ",[23,1164,61],{}," is the wrong value for that element. The corollary is the rule you should internalise: ",[219,1167,1168,1169,1171],{},"reach for ",[23,1170,61],{}," only when the query you want to write is genuinely about the block axis, and only on an element that already has a height for an independent reason."," A media tile with a fixed aspect ratio, a viewport-height hero, a stretched dashboard cell — those are the legitimate cases. A card, a form section, a sidebar, a list item: ",[23,1174,57],{},", every time.",[75,1177],{},[14,1179,1181],{"id":1180},"variation-scoping-the-choice-with-named-containers","Variation: scoping the choice with named containers",[19,1183,1184,1185,1187,1188,1192],{},"Setting ",[23,1186,25],{}," on a broad selector is convenient and dangerous, because containment applies to every element the selector matched. Pair the type with a name so that queries target the right ancestor, and keep the type as narrow as the query needs. Naming is covered at length in ",[35,1189,1191],{"href":1190},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-syntax-basics\u002Fnesting-and-naming-container-queries\u002F","Nesting and Naming Container Queries","; the point here is that the name and the type are independent decisions.",[266,1194,1198],{"className":1195,"code":1196,"language":1197,"meta":271,"style":271},"language-css shiki shiki-themes github-light-high-contrast github-dark-high-contrast","\u002F* Every card is a width container. *\u002F\n.card {\n  container-type: inline-size;\n  container-name: card;\n}\n\n\u002F* One specific element also needs block-axis queries — and it has a\n   height already, because aspect-ratio gives it one. *\u002F\n.card__media {\n  container-type: size;\n  container-name: media;\n  aspect-ratio: 16 \u002F 9;   \u002F* the determinate block size that makes `size` safe *\u002F\n}\n\n@container card (min-width: 30rem) {\n  .card { grid-template-columns: 12rem 1fr; }\n}\n\n@container media (min-height: 12rem) {\n  .card__caption { display: block; }\n}\n\n\u002F* Opt one variant back out of containment entirely. *\u002F\n.card--bare { container-type: normal; }\n","css",[23,1199,1200,1205,1212,1220,1228,1233,1237,1242,1247,1254,1260,1267,1288,1292,1296,1303,1328,1332,1336,1343,1360,1364,1368,1373],{"__ignoreMap":271},[275,1201,1202],{"class":137,"line":277},[275,1203,1204],{"class":623},"\u002F* Every card is a width container. *\u002F\n",[275,1206,1207,1210],{"class":137,"line":295},[275,1208,1209],{"class":288},".card",[275,1211,542],{"class":280},[275,1213,1214,1217],{"class":137,"line":315},[275,1215,1216],{"class":288},"  container-type",[275,1218,1219],{"class":280},": inline-size;\n",[275,1221,1222,1225],{"class":137,"line":325},[275,1223,1224],{"class":288},"  container-name",[275,1226,1227],{"class":280},": card;\n",[275,1229,1230],{"class":137,"line":343},[275,1231,1232],{"class":280},"}\n",[275,1234,1235],{"class":137,"line":368},[275,1236,533],{"emptyLinePlaceholder":532},[275,1238,1239],{"class":137,"line":382},[275,1240,1241],{"class":623},"\u002F* One specific element also needs block-axis queries — and it has a\n",[275,1243,1244],{"class":137,"line":392},[275,1245,1246],{"class":623},"   height already, because aspect-ratio gives it one. *\u002F\n",[275,1248,1249,1252],{"class":137,"line":456},[275,1250,1251],{"class":288},".card__media",[275,1253,542],{"class":280},[275,1255,1256,1258],{"class":137,"line":476},[275,1257,1216],{"class":288},[275,1259,750],{"class":280},[275,1261,1262,1264],{"class":137,"line":529},[275,1263,1224],{"class":288},[275,1265,1266],{"class":280},": media;\n",[275,1268,1269,1272,1274,1276,1279,1282,1285],{"class":137,"line":536},[275,1270,1271],{"class":288},"  aspect-ratio",[275,1273,404],{"class":280},[275,1275,407],{"class":288},[275,1277,1278],{"class":280}," \u002F ",[275,1280,1281],{"class":288},"9",[275,1283,1284],{"class":280},";   ",[275,1286,1287],{"class":623},"\u002F* the determinate block size that makes `size` safe *\u002F\n",[275,1289,1290],{"class":137,"line":545},[275,1291,1232],{"class":280},[275,1293,1294],{"class":137,"line":566},[275,1295,533],{"emptyLinePlaceholder":532},[275,1297,1298,1300],{"class":137,"line":579},[275,1299,29],{"class":410},[275,1301,1302],{"class":280}," card (min-width: 30rem) {\n",[275,1304,1305,1308,1310,1313,1315,1318,1320,1323,1326],{"class":137,"line":593},[275,1306,1307],{"class":288},"  .card",[275,1309,398],{"class":280},[275,1311,1312],{"class":288},"grid-template-columns",[275,1314,404],{"class":280},[275,1316,1317],{"class":288},"12",[275,1319,438],{"class":410},[275,1321,1322],{"class":288}," 1",[275,1324,1325],{"class":410},"fr",[275,1327,453],{"class":280},[275,1329,1330],{"class":137,"line":599},[275,1331,1232],{"class":280},[275,1333,1334],{"class":137,"line":615},[275,1335,533],{"emptyLinePlaceholder":532},[275,1337,1338,1340],{"class":137,"line":620},[275,1339,29],{"class":410},[275,1341,1342],{"class":280}," media (min-height: 12rem) {\n",[275,1344,1345,1348,1350,1353,1355,1358],{"class":137,"line":627},[275,1346,1347],{"class":288},"  .card__caption",[275,1349,398],{"class":280},[275,1351,1352],{"class":288},"display",[275,1354,404],{"class":280},[275,1356,1357],{"class":288},"block",[275,1359,453],{"class":280},[275,1361,1362],{"class":137,"line":633},[275,1363,1232],{"class":280},[275,1365,1366],{"class":137,"line":646},[275,1367,533],{"emptyLinePlaceholder":532},[275,1369,1370],{"class":137,"line":651},[275,1371,1372],{"class":623},"\u002F* Opt one variant back out of containment entirely. *\u002F\n",[275,1374,1375,1378,1380,1382,1384,1386],{"class":137,"line":657},[275,1376,1377],{"class":288},".card--bare",[275,1379,398],{"class":280},[275,1381,25],{"class":288},[275,1383,404],{"class":280},[275,1385,130],{"class":288},[275,1387,453],{"class":280},[19,1389,1390,1391,1394],{},"The shorthand ",[23,1392,1393],{},"container: card \u002F inline-size"," sets both properties at once and is worth preferring in production for exactly the reason above: it makes it impossible to name a container and forget its type, or vice versa.",[14,1396,1398],{"id":1397},"browser-support-note","Browser support note",[19,1400,1401,1402,1404,1405,1407,1408,1410,1411,1414,1415,44],{},"Size container queries and all three ",[23,1403,25],{}," values shipped together and have been supported since Chrome 105, Edge 105, Safari 16, and Firefox 110, making them baseline across evergreen browsers since 2023. There is no partial-support situation to code around — a browser either understands ",[23,1406,25],{}," or ignores the declaration and the ",[23,1409,29],{}," block along with it. If you must serve older engines, gate the enhancement with ",[23,1412,1413],{},"@supports (container-type: inline-size)"," as described in ",[35,1416,1418],{"href":1417},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-fallbacks\u002Ffeature-detection-with-supports\u002F","Feature Detection with @supports",[14,1420,1422],{"id":1421},"faq","FAQ",[19,1424,1425,1428,1429,1431],{},[219,1426,1427],{},"Which container-type should I use by default?","\nUse ",[23,1430,57],{},". It contains only the inline axis, leaves height driven by content, and supports every width-based query, which covers almost every component layout you will write.",[19,1433,1434,1437],{},[219,1435,1436],{},"Why did my element disappear after I set container-type: size?","\nSize containment tells the engine to size the box without looking at its contents. With no explicit height the block size resolves to zero, so the box renders as a flat line and its children overflow it.",[19,1439,1440,1443,1444,1446,1447,1449],{},[219,1441,1442],{},"Can I query a container's height at all?","\nOnly with ",[23,1445,216],{},", and only when that container has a determinate block size from a height, ",[23,1448,1137],{},", or a stretched grid or flex track. Otherwise a height query has nothing meaningful to resolve against.",[19,1451,1452,1455],{},[219,1453,1454],{},"Does container-type: normal do anything useful?","\nYes. It applies no size containment but still establishes a query container for style queries, and it is the value you set to opt a specific element back out of a container rule inherited from a broad selector.",[14,1457,1459],{"id":1458},"related","Related",[1118,1461,1462,1470,1475,1482,1489],{},[1121,1463,1464,1466,1467,1469],{},[35,1465,38],{"href":37}," — the parent guide to ",[23,1468,29],{}," syntax.",[1121,1471,1472,1474],{},[35,1473,1191],{"href":1190}," — pairing a type with a name and resolving the nearest container.",[1121,1476,1477,1481],{},[35,1478,1480],{"href":1479},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-syntax-basics\u002Fcontainer-vs-media-queries-comparison\u002F","Container vs Media Queries Comparison"," — when the viewport is still the right thing to ask.",[1121,1483,1484,1488],{},[35,1485,1487],{"href":1486},"\u002Fmastering-container-queries-responsive-layouts\u002Fintrinsic-sizing-techniques\u002Fpreventing-flex-and-grid-overflow\u002F","Preventing Flex and Grid Overflow"," — the other sizing rule that silently breaks components.",[1121,1490,1491,1495],{},[35,1492,1494],{"href":1493},"\u002Fcss-only-micro-interactions-animations\u002Fcontainer-aware-motion\u002Fmotion-that-scales-with-container-size\u002F","Motion That Scales with Container Size"," — cross-area: driving animation from the container you just declared.",[387,1497,1498],{},"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":271,"searchDepth":295,"depth":295,"links":1500},[1501,1502,1503,1504,1505,1506,1507,1508,1509],{"id":16,"depth":295,"text":17},{"id":47,"depth":295,"text":48},{"id":79,"depth":295,"text":80},{"id":233,"depth":295,"text":234},{"id":1112,"depth":295,"text":1113},{"id":1180,"depth":295,"text":1181},{"id":1397,"depth":295,"text":1398},{"id":1421,"depth":295,"text":1422},{"id":1458,"depth":295,"text":1459},"How container-type inline-size, size, and normal differ in the containment each applies, why size needs a determinate block size, and its zero-height trap.","md",{"pageTitle":1513,"datePublished":1514,"dateModified":1514,"faq":1515},"container-type: size vs inline-size","2026-07-20",[1516,1518,1520,1522],{"q":1427,"a":1517},"Use inline-size. It contains only the inline axis, leaves height driven by content, and supports every width-based query, which covers almost every component layout you will write.",{"q":1436,"a":1519},"Size containment tells the engine to size the box without looking at its contents. With no explicit height the block size resolves to zero, so the box renders as a flat line and its children overflow it.",{"q":1442,"a":1521},"Only with container-type: size, and only when that container has a determinate block size from a height, aspect-ratio, or a stretched grid or flex track. Otherwise a height query has nothing meaningful to resolve against.",{"q":1454,"a":1523},"Yes. It applies no size containment but still establishes a query container for style queries, and it is the value you set to opt a specific element back out of a container rule inherited from a broad selector.","\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-syntax-basics\u002Fcontainer-type-size-vs-inline-size",{"title":5,"description":1510},"mastering-container-queries-responsive-layouts\u002Fcontainer-query-syntax-basics\u002Fcontainer-type-size-vs-inline-size\u002Findex","4ndS9AuYFBhVI9lkRYnsqmbyszsb4uSs_HxL_VMOUtk",[1529,1532,1535,1538,1541,1544,1547,1550,1553,1556,1559,1562,1565,1568,1571,1574,1577,1580,1583,1586,1589,1592,1595,1598,1601,1604,1607,1610,1613,1616,1619,1622,1625,1628,1631,1634,1637,1640,1643,1646,1649,1652,1655,1658,1661,1664,1667,1669,1672,1675,1678,1681,1684,1687,1690,1693,1694,1697,1700,1702,1705,1708,1711,1714,1717,1720,1723,1726,1729,1732,1735,1737,1740,1743,1746,1749,1752,1755,1758,1761,1764,1767,1770,1773,1776,1779,1782,1785],{"path":1530,"title":1531},"\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":1533,"title":1534},"\u002Fcss-only-micro-interactions-animations\u002Faccessibility-in-css-animations","Accessibility in CSS Animations: Patterns, Specs & Best Practices",{"path":1536,"title":1537},"\u002Fcss-only-micro-interactions-animations\u002Faccessibility-in-css-animations\u002Fprefers-reduced-motion-recipes","prefers-reduced-motion Recipes: A Reduction for Every Common Effect",{"path":1539,"title":1540},"\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":1542,"title":1543},"\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":1545,"title":1546},"\u002Fcss-only-micro-interactions-animations\u002Faccessibility-in-css-animations\u002Fvestibular-safe-animation-patterns","Vestibular-Safe Animation Patterns: Why Some Motion Makes People Sick",{"path":1548,"title":1549},"\u002Fcss-only-micro-interactions-animations\u002Faccessibility-in-css-animations\u002Fwcag-motion-success-criteria","WCAG Motion Success Criteria: What Each One Actually Requires",{"path":1551,"title":1552},"\u002Fcss-only-micro-interactions-animations\u002Fcontainer-aware-motion\u002Fcontainer-query-hover-affordances","Container Query Hover Affordances: When Narrow Means Persistent, Not Hidden",{"path":1554,"title":1555},"\u002Fcss-only-micro-interactions-animations\u002Fcontainer-aware-motion","Container-Aware Motion: Animation Sized by the Space a Component Actually Has",{"path":1557,"title":1558},"\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":1560,"title":1561},"\u002Fcss-only-micro-interactions-animations\u002Fcontainer-aware-motion\u002Fsuppressing-motion-in-small-containers","Suppressing Motion in Small Containers: Deliberately Animating Nothing",{"path":1563,"title":1564},"\u002Fcss-only-micro-interactions-animations\u002Fcss-animation-vs-web-animations-api","CSS Animation vs the Web Animations API: A Decision Guide",{"path":1566,"title":1567},"\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":1569,"title":1570},"\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":1572,"title":1573},"\u002Fcss-only-micro-interactions-animations\u002Fcss-custom-properties-architecture\u002Ffluid-spacing-tokens-driving-transition-durations","Fluid Spacing Tokens That Drive Transition Durations",{"path":1575,"title":1576},"\u002Fcss-only-micro-interactions-animations\u002Fcss-custom-properties-architecture","CSS Custom Properties Architecture: Scalable Design Systems & Dynamic UI",{"path":1578,"title":1579},"\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":1581,"title":1582},"\u002Fcss-only-micro-interactions-animations\u002Fcss-transition-fundamentals\u002Fcss-transition-timing-functions","CSS Transition Timing Functions: ease, cubic-bezier(), steps() and linear()",{"path":1584,"title":1585},"\u002Fcss-only-micro-interactions-animations\u002Fcss-transition-fundamentals","CSS Transition Fundamentals: Architecture, Performance & Patterns",{"path":1587,"title":1588},"\u002Fcss-only-micro-interactions-animations\u002Fcss-transition-fundamentals\u002Fstarting-style-entry-animations","@starting-style: Animating an Element's Very First Style Change",{"path":1590,"title":1591},"\u002Fcss-only-micro-interactions-animations\u002Fcss-transition-fundamentals\u002Ftransitioning-display-with-allow-discrete","Transitioning display with transition-behavior: allow-discrete and @starting-style",{"path":1593,"title":1594},"\u002Fcss-only-micro-interactions-animations\u002Fhover-focus-state-design\u002Faccessible-css-only-tooltips","Accessible CSS-Only Tooltips and Hover Cards With  and ",{"path":1596,"title":1597},"\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":1599,"title":1600},"\u002Fcss-only-micro-interactions-animations\u002Fhover-focus-state-design\u002Ffocus-within-form-patterns"," Form Patterns: Styling a Group From the Field Inside It",{"path":1602,"title":1603},"\u002Fcss-only-micro-interactions-animations\u002Fhover-focus-state-design","Hover & Focus State Design: Spec-Compliant Patterns for Modern UIs",{"path":1605,"title":1606},"\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":1608,"title":1609},"\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":1611,"title":1612},"\u002Fcss-only-micro-interactions-animations","CSS-Only Micro-Interactions & Animations: Architecture, Performance & Implementation",{"path":1614,"title":1615},"\u002Fcss-only-micro-interactions-animations\u002Fkeyframe-animation-patterns\u002Fcontainer-query-triggered-keyframe-animations","Container-Query-Triggered Keyframe Animations: Animate Differently per Available Space",{"path":1617,"title":1618},"\u002Fcss-only-micro-interactions-animations\u002Fkeyframe-animation-patterns\u002Fcss-only-accordions-and-disclosure","CSS-Only Accordions and Disclosure Widgets with details and summary",{"path":1620,"title":1621},"\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":1623,"title":1624},"\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":1626,"title":1627},"\u002Fcss-only-micro-interactions-animations\u002Fkeyframe-animation-patterns","Keyframe Animation Patterns: Spec-Compliant Architectures for Modern UIs",{"path":1629,"title":1630},"\u002Fcss-only-micro-interactions-animations\u002Fkeyframe-animation-patterns\u002Fstaggered-list-animations-with-custom-properties","Staggered List Animations Using --i Index Custom Properties",{"path":1632,"title":1633},"\u002Fcss-only-micro-interactions-animations\u002Fperformance-gpu-acceleration","Performance & GPU Acceleration in CSS: A Developer’s Blueprint",{"path":1635,"title":1636},"\u002Fcss-only-micro-interactions-animations\u002Fperformance-gpu-acceleration\u002Foptimizing-css-animations-for-60fps","Optimizing CSS Animations for 60fps: Budgeting the Frame",{"path":1638,"title":1639},"\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":1641,"title":1642},"\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":1644,"title":1645},"\u002Fcss-only-micro-interactions-animations\u002Fscroll-driven-animations","Scroll-Driven Animations: Binding Motion to Scroll Position in Pure CSS",{"path":1647,"title":1648},"\u002Fcss-only-micro-interactions-animations\u002Fscroll-driven-animations\u002Fscroll-driven-animation-fallbacks","Shipping Scroll-Driven Animations Without Breaking Anything",{"path":1650,"title":1651},"\u002Fcss-only-micro-interactions-animations\u002Fscroll-driven-animations\u002Fscroll-progress-bar-without-javascript","A Reading Progress Bar Driven by scroll(root)",{"path":1653,"title":1654},"\u002Fcss-only-micro-interactions-animations\u002Fscroll-driven-animations\u002Fscroll-triggered-reveal-animations","Reveal-on-Scroll with view() and animation-range",{"path":1656,"title":1657},"\u002Fcss-only-micro-interactions-animations\u002Fview-transitions-for-css-developers","View Transitions for CSS Developers: the Pseudo-Element Tree, Snapshots, and Named Elements",{"path":1659,"title":1660},"\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":1662,"title":1663},"\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":1665,"title":1666},"\u002Fcss-only-micro-interactions-animations\u002Fview-transitions-for-css-developers\u002Fview-transitions-with-reduced-motion","Honouring prefers-reduced-motion in View Transitions",{"path":414,"title":1668},"Modern CSS Layouts & Micro-Interactions",{"path":1670,"title":1671},"\u002Fmastering-container-queries-responsive-layouts\u002Fanchor-positioning-and-overlays\u002Fanchor-positioned-tooltips","Anchor-Positioned Tooltips: Tethering, Flipping, and Getting the Semantics Right",{"path":1673,"title":1674},"\u002Fmastering-container-queries-responsive-layouts\u002Fanchor-positioning-and-overlays\u002Fanchor-positioning-fallbacks","Anchor Positioning Fallbacks: A Graceful Floor for Older Browser Versions",{"path":1676,"title":1677},"\u002Fmastering-container-queries-responsive-layouts\u002Fanchor-positioning-and-overlays","CSS Anchor Positioning and Overlays: Tethering Elements Without JavaScript",{"path":1679,"title":1680},"\u002Fmastering-container-queries-responsive-layouts\u002Fanchor-positioning-and-overlays\u002Fpopover-attribute-and-css-styling","The popover Attribute: Top-Layer Overlays With No JavaScript",{"path":1682,"title":1683},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-fallbacks\u002Ffeature-detection-with-supports","Feature Detection with @supports: Syntax, Semantics, and the Traps",{"path":1685,"title":1686},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-fallbacks\u002Fhandling-container-query-fallbacks-for-older-browsers","Handling Container Query Fallbacks for Older Browsers",{"path":1688,"title":1689},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-fallbacks","Container Query Fallbacks: Spec-Compliant CSS Strategies for Legacy Browsers",{"path":1691,"title":1692},"\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":1524,"title":5},{"path":1695,"title":1696},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-syntax-basics\u002Fcontainer-vs-media-queries-comparison","Container vs Media Queries: Choosing the Right Reference Box",{"path":1698,"title":1699},"\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":1701,"title":38},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-syntax-basics",{"path":1703,"title":1704},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-syntax-basics\u002Fnesting-and-naming-container-queries","Nesting and Naming Container Queries: Targeting the Right Ancestor",{"path":1706,"title":1707},"\u002Fmastering-container-queries-responsive-layouts\u002Fcss-grid-and-subgrid-layouts\u002Fauto-fit-minmax-responsive-grids","Responsive Grids with repeat(auto-fit, minmax())",{"path":1709,"title":1710},"\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":1712,"title":1713},"\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":1715,"title":1716},"\u002Fmastering-container-queries-responsive-layouts\u002Fcss-grid-and-subgrid-layouts","CSS Grid and Subgrid Layouts for Responsive Interfaces",{"path":1718,"title":1719},"\u002Fmastering-container-queries-responsive-layouts\u002Fcss-grid-and-subgrid-layouts\u002Fsubgrid-vs-nested-grid","Subgrid vs an Independently Nested Grid",{"path":1721,"title":1722},"\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":1724,"title":1725},"\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":1727,"title":1728},"\u002Fmastering-container-queries-responsive-layouts\u002Ffluid-typography-with-clamp\u002Ffluid-type-accessibility-and-zoom","Fluid Type, Accessibility and Zoom: The vw-Only Trap",{"path":1730,"title":1731},"\u002Fmastering-container-queries-responsive-layouts\u002Ffluid-typography-with-clamp\u002Ffluid-typography-without-javascript","Fluid Typography Without JavaScript: A Precision CSS Reference",{"path":1733,"title":1734},"\u002Fmastering-container-queries-responsive-layouts\u002Ffluid-typography-with-clamp","Fluid Typography with clamp(): A Practical Guide for Modern CSS",{"path":1736,"title":43},"\u002Fmastering-container-queries-responsive-layouts",{"path":1738,"title":1739},"\u002Fmastering-container-queries-responsive-layouts\u002Fintrinsic-sizing-techniques\u002Faspect-ratio-for-responsive-media","Using aspect-ratio for Responsive Media and Preventing Layout Shift",{"path":1741,"title":1742},"\u002Fmastering-container-queries-responsive-layouts\u002Fintrinsic-sizing-techniques","Intrinsic Sizing Techniques: Modern CSS Layouts for Responsive UI",{"path":1744,"title":1745},"\u002Fmastering-container-queries-responsive-layouts\u002Fintrinsic-sizing-techniques\u002Fmin-max-fit-content-explained","min-content, max-content, and fit-content() Explained",{"path":1747,"title":1748},"\u002Fmastering-container-queries-responsive-layouts\u002Fintrinsic-sizing-techniques\u002Fpreventing-flex-and-grid-overflow","The min-width: auto Trap in Flex and Grid Layouts",{"path":1750,"title":1751},"\u002Fmastering-container-queries-responsive-layouts\u002Fmodern-css-reset-strategies\u002Fcascade-layers-for-reset-and-tokens","Cascade Layers for Reset and Design Tokens",{"path":1753,"title":1754},"\u002Fmastering-container-queries-responsive-layouts\u002Fmodern-css-reset-strategies\u002Fcascade-layers-vs-specificity-hacks","Cascade Layers vs Specificity Hacks: Ordering Instead of Escalating",{"path":1756,"title":1757},"\u002Fmastering-container-queries-responsive-layouts\u002Fmodern-css-reset-strategies","Modern CSS Reset Strategies: A Spec-Compliant Foundation",{"path":1759,"title":1760},"\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":1762,"title":1763},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns\u002Fcontainer-query-data-tables","Container Query Data Tables: Reflowing Tables to Cards",{"path":1765,"title":1766},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns\u002Fcontainer-query-sidebar-layouts","Container Query Sidebar Layouts That Travel Between Contexts",{"path":1768,"title":1769},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns","Responsive Component Patterns: Architecture & Implementation",{"path":1771,"title":1772},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns\u002Fresponsive-forms-with-container-queries","Responsive Forms with Container Queries: Reflow Without Losing the Wiring",{"path":1774,"title":1775},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns\u002Fresponsive-navigation-without-media-queries","Responsive Navigation Without Media Queries Using Container Queries",{"path":1777,"title":1778},"\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":1780,"title":1781},"\u002Fmastering-container-queries-responsive-layouts\u002Fstyle-queries-and-container-state","Style Queries and Container State: Token-Driven Component Variants",{"path":1783,"title":1784},"\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":1786,"title":1787},"\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",1784566156607]