[{"data":1,"prerenderedAt":2093},["ShallowReactive",2],{"page-\u002Fmastering-container-queries-responsive-layouts\u002Fcss-grid-and-subgrid-layouts\u002Fauto-fit-minmax-responsive-grids":3,"content-all-pages":1833},{"id":4,"title":5,"body":6,"description":1815,"extension":1816,"meta":1817,"navigation":467,"path":1829,"seo":1830,"stem":1831,"__hash__":1832},"content\u002Fmastering-container-queries-responsive-layouts\u002Fcss-grid-and-subgrid-layouts\u002Fauto-fit-minmax-responsive-grids\u002Findex.md","Responsive Grids with repeat(auto-fit, minmax())",{"type":7,"value":8,"toc":1804},"minimark",[9,13,18,46,50,53,61,69,72,76,102,142,259,262,265,269,273,1397,1401,1408,1421,1448,1450,1454,1465,1667,1679,1683,1711,1715,1728,1741,1747,1760,1764,1801],[10,11,5],"h1",{"id":12},"responsive-grids-with-repeatauto-fit-minmax",[14,15,17],"h2",{"id":16},"the-narrow-problem","The narrow problem",[19,20,21,22,26,27,30,31,34,35,40,41,45],"p",{},"You need a grid of cards that shows four across on a wide desktop, three on a laptop, two on a tablet, and one on a phone — and you would like to write that without four media queries, without picking arbitrary pixel thresholds, and without the layout breaking the day someone drops the grid into a narrow sidebar where the viewport width is a lie. One line of ",[23,24,25],"code",{},"grid-template-columns"," does the whole job. The catch is that the line has four moving parts, two of them look almost identical (",[23,28,29],{},"auto-fit"," and ",[23,32,33],{},"auto-fill","), and the naive version overflows its parent on small screens. This page pins down each part. It is part of ",[36,37,39],"a",{"href":38},"\u002Fmastering-container-queries-responsive-layouts\u002Fcss-grid-and-subgrid-layouts\u002F","CSS Grid and Subgrid Layouts"," within ",[36,42,44],{"href":43},"\u002Fmastering-container-queries-responsive-layouts\u002F","Mastering Container Queries & Responsive Layouts",".",[14,47,49],{"id":48},"why-track-counting-beats-breakpoints","Why track counting beats breakpoints",[19,51,52],{},"A media query breakpoint encodes an assumption: at this viewport width, this many columns look right. The assumption is wrong the moment the component moves. Put a three-column card grid in a sidebar and the viewport is still 1400px wide while the grid has 320px to work with, so it renders three squashed columns. Breakpoints also multiply — every new column count is another rule, and the set has to be re-tuned whenever the card's minimum comfortable width changes.",[19,54,55,56,60],{},"The repeat-auto form inverts the relationship. You declare the smallest width at which a card is still readable, and the grid derives the column count from the space actually available to it. There is exactly one number to tune, it has a real design meaning, and the result is correct in any container because the algorithm measures the container, not the window. This is intrinsically responsive layout in the sense used throughout ",[36,57,59],{"href":58},"\u002Fmastering-container-queries-responsive-layouts\u002Fintrinsic-sizing-techniques\u002F","Intrinsic Sizing Techniques",": the sizes come from constraints and content rather than from a table of magic numbers.",[19,62,63,64,68],{},"It does not replace ",[36,65,67],{"href":66},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-syntax-basics\u002F","container queries"," — those remain the tool for changes the track algorithm cannot express, such as flipping a card's internal arrangement. The division of labour is clean: track counting decides how many cards share a row, a container query decides what a card looks like at its resulting width.",[70,71],"hr",{},[14,73,75],{"id":74},"reading-the-declaration-part-by-part","Reading the declaration part by part",[77,78,83],"pre",{"className":79,"code":80,"language":81,"meta":82,"style":82},"language-css shiki shiki-themes github-light-high-contrast github-dark-high-contrast","grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));\n","css","",[23,84,85],{"__ignoreMap":82},[86,87,90,93,97,99],"span",{"class":88,"line":89},"line",1,[86,91,25],{"class":92},"sne4z",[86,94,96],{"class":95},"suds8",": repeat(",[86,98,29],{"class":92},[86,100,101],{"class":95},", minmax(min(100%, 20rem), 1fr));\n",[103,104,105,112,125,136],"ul",{},[106,107,108,111],"li",{},[23,109,110],{},"repeat(auto-fit, …)"," — generate an unspecified number of tracks, as many as the container can hold given the gaps, then collapse any that ended up with no items in them.",[106,113,114,117,118,120,121,124],{},[23,115,116],{},"minmax(a, b)"," — each track has floor ",[23,119,36],{}," and ceiling ",[23,122,123],{},"b",". The floor drives how many tracks fit; the ceiling drives how leftover space is shared.",[106,126,127,130,131,135],{},[23,128,129],{},"min(100%, 20rem)"," — the floor is 20rem, ",[132,133,134],"em",{},"except"," in a container narrower than 20rem, where it becomes the full container width. This is the guard, discussed below.",[106,137,138,141],{},[23,139,140],{},"1fr"," — the ceiling. Every track gets an equal share of the free space left after the floors are satisfied, so the row always fills edge to edge with equal columns.",[143,144,150,151,150,155,150,159,150,166,150,171,150,180,150,183,150,186,150,189,150,195,150,199,150,203,150,207,150,210,150,214,150,216,150,219,150,222,150,232,150,236,150,239,150,241,150,244,150,249,150,254],"svg",{"viewBox":145,"role":146,"ariaLabel":147,"xmlns":148,"style":149},"0 0 720 310","img","A wide container laid out with auto-fit stretching four items and with auto-fill leaving an empty track","http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg","width:100%;height:auto;max-width:720px;margin:2rem 0","\n  ",[152,153,154],"title",{},"auto-fit versus auto-fill in the same container",[156,157,158],"desc",{},"With four items in a container wide enough for five tracks, auto-fit collapses the fifth track so the items stretch, while auto-fill preserves it as reserved empty space.",[160,161,165],"text",{"x":162,"y":163,"style":164},"360","28","text-anchor:middle;fill:currentColor;font:700 17px sans-serif","four items, room for five tracks",[160,167,29],{"x":168,"y":169,"style":170},"40","64","text-anchor:start;fill:currentColor;font:13px ui-monospace,monospace",[172,173],"rect",{"x":168,"y":174,"width":175,"height":176,"rx":177,"fill":178,"opacity":179},"76","152","56","7","#7aa2ff","0.22",[172,181],{"x":182,"y":174,"width":175,"height":176,"rx":177,"fill":178,"opacity":179},"202",[172,184],{"x":185,"y":174,"width":175,"height":176,"rx":177,"fill":178,"opacity":179},"364",[172,187],{"x":188,"y":174,"width":175,"height":176,"rx":177,"fill":178,"opacity":179},"526",[160,190,194],{"x":191,"y":192,"style":193},"116","110","text-anchor:middle;fill:currentColor;font:12px sans-serif","item 1",[160,196,198],{"x":197,"y":192,"style":193},"278","item 2",[160,200,202],{"x":201,"y":192,"style":193},"440","item 3",[160,204,206],{"x":205,"y":192,"style":193},"602","item 4",[160,208,33],{"x":168,"y":209,"style":170},"170",[172,211],{"x":168,"y":212,"width":213,"height":176,"rx":177,"fill":178,"opacity":179},"182","120",[172,215],{"x":209,"y":212,"width":213,"height":176,"rx":177,"fill":178,"opacity":179},[172,217],{"x":218,"y":212,"width":213,"height":176,"rx":177,"fill":178,"opacity":179},"300",[172,220],{"x":221,"y":212,"width":213,"height":176,"rx":177,"fill":178,"opacity":179},"430",[172,223],{"x":224,"y":212,"width":213,"height":176,"rx":177,"fill":225,"stroke":226,"strokeWidth":227,"strokeDashArray":228,"opacity":231},"560","none","currentColor","1.5",[229,230],"5","4","0.6",[160,233,194],{"x":234,"y":235,"style":193},"100","216",[160,237,198],{"x":238,"y":235,"style":193},"230",[160,240,202],{"x":162,"y":235,"style":193},[160,242,206],{"x":243,"y":235,"style":193},"490",[160,245,248],{"x":246,"y":235,"style":247},"620","text-anchor:middle;fill:currentColor;font:11px sans-serif;opacity:0.7","empty track",[160,250,253],{"x":162,"y":251,"style":252},"272","text-anchor:middle;fill:currentColor;font:600 14px sans-serif","collapsed vs preserved empty tracks",[160,255,258],{"x":162,"y":256,"style":257},"296","text-anchor:middle;fill:currentColor;font:12px sans-serif;opacity:0.6","identical minmax, different result at the row end",[19,260,261],{},"The two keywords only diverge when the container is wide enough for more tracks than you have items. Below that point they are indistinguishable, which is why the difference goes unnoticed on the desktop layout you developed against and shows up as a strange gap on an ultrawide monitor or in a nearly-empty filtered list.",[19,263,264],{},"Drag the demo frame wide to reproduce it, then narrow to watch both rows reflow identically.",[266,267],"live-demo",{"name":268},"lp-auto-fit-vs-auto-fill",[14,270,272],{"id":271},"complete-working-implementation","Complete working implementation",[77,274,278],{"className":275,"code":276,"language":277,"meta":82,"style":82},"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>Breakpoint-free card grid\u003C\u002Ftitle>\n\u003Cstyle>\n  body { font: 16px\u002F1.5 system-ui, sans-serif; margin: 0; color: #1c2430; background: #f4f6fb; }\n\n  .wrap { max-width: 72rem; margin-inline: auto; padding: 2rem 1rem; }\n\n  .grid {\n    display: grid;\n    \u002F* The only responsive rule in this document.\n       min(100%, 18rem) keeps the floor from exceeding the container,\n       1fr shares the remainder equally, auto-fit removes empty tracks. *\u002F\n    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));\n    gap: 1rem;\n  }\n\n  .card {\n    display: grid;\n    grid-template-rows: auto 1fr auto;\n    gap: 0.5rem;\n    padding: 1rem;\n    background: #fff;\n    border: 1px solid #d4dbe8;\n    border-radius: 0.75rem;\n    \u002F* Grid items default to a min-width of auto; releasing it lets a card\n       shrink below its longest word instead of overflowing the track. *\u002F\n    min-width: 0;\n  }\n\n  .card h3 { margin: 0; font-size: 1rem; }\n  .card p  { margin: 0; font-size: 0.9rem; color: #5a6472; }\n  .card a  { font-size: 0.85rem; }\n\n  \u002F* A card that ends up alone on a wide row would stretch very wide.\n     Cap it so the grid never produces an unreadable line length. *\u002F\n  .grid { justify-content: start; }\n  .card { max-width: 34rem; }\n\u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n  \u003Cdiv class=\"wrap\">\n    \u003Cdiv class=\"grid\">\n      \u003Carticle class=\"card\">\n        \u003Ch3>Track sizing\u003C\u002Fh3>\n        \u003Cp>How the grid algorithm resolves a minmax floor before distributing free space.\u003C\u002Fp>\n        \u003Ca href=\"#\">Read\u003C\u002Fa>\n      \u003C\u002Farticle>\n      \u003Carticle class=\"card\">\n        \u003Ch3>Gap accounting\u003C\u002Fh3>\n        \u003Cp>Gaps are subtracted from the container before the track count is computed.\u003C\u002Fp>\n        \u003Ca href=\"#\">Read\u003C\u002Fa>\n      \u003C\u002Farticle>\n      \u003Carticle class=\"card\">\n        \u003Ch3>Collapsed tracks\u003C\u002Fh3>\n        \u003Cp>An empty auto-fit track resolves to zero width, and its two gaps collapse with it.\u003C\u002Fp>\n        \u003Ca href=\"#\">Read\u003C\u002Fa>\n      \u003C\u002Farticle>\n      \u003Carticle class=\"card\">\n        \u003Ch3>Intrinsic floors\u003C\u002Fh3>\n        \u003Cp>A percentage or min() floor is resolved against the grid container's inline size.\u003C\u002Fp>\n        \u003Ca href=\"#\">Read\u003C\u002Fa>\n      \u003C\u002Farticle>\n      \u003Carticle class=\"card\">\n        \u003Ch3>Ordering\u003C\u002Fh3>\n        \u003Cp>Auto-placement fills rows in document order, so reading order stays intact.\u003C\u002Fp>\n        \u003Ca href=\"#\">Read\u003C\u002Fa>\n      \u003C\u002Farticle>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n","html",[23,279,280,295,315,325,343,368,382,392,462,469,517,522,531,545,552,558,564,616,630,636,641,649,660,679,693,707,720,740,755,761,767,779,784,789,818,857,878,883,889,895,912,930,940,949,959,978,995,1013,1029,1043,1065,1075,1090,1104,1118,1137,1146,1161,1175,1189,1208,1217,1232,1246,1260,1279,1288,1303,1317,1331,1350,1359,1369,1379,1388],{"__ignoreMap":82},[86,281,282,285,288,292],{"class":88,"line":89},[86,283,284],{"class":95},"\u003C!",[86,286,287],{"class":92},"doctype",[86,289,291],{"class":290},"s-5SL"," html",[86,293,294],{"class":95},">\n",[86,296,298,301,303,306,309,313],{"class":88,"line":297},2,[86,299,300],{"class":95},"\u003C",[86,302,277],{"class":92},[86,304,305],{"class":290}," lang",[86,307,308],{"class":95},"=",[86,310,312],{"class":311},"sT6z2","\"en\"",[86,314,294],{"class":95},[86,316,318,320,323],{"class":88,"line":317},3,[86,319,300],{"class":95},[86,321,322],{"class":92},"head",[86,324,294],{"class":95},[86,326,328,330,333,336,338,341],{"class":88,"line":327},4,[86,329,300],{"class":95},[86,331,332],{"class":92},"meta",[86,334,335],{"class":290}," charset",[86,337,308],{"class":95},[86,339,340],{"class":311},"\"utf-8\"",[86,342,294],{"class":95},[86,344,346,348,350,353,355,358,361,363,366],{"class":88,"line":345},5,[86,347,300],{"class":95},[86,349,332],{"class":92},[86,351,352],{"class":290}," name",[86,354,308],{"class":95},[86,356,357],{"class":311},"\"viewport\"",[86,359,360],{"class":290}," content",[86,362,308],{"class":95},[86,364,365],{"class":311},"\"width=device-width, initial-scale=1\"",[86,367,294],{"class":95},[86,369,371,373,375,378,380],{"class":88,"line":370},6,[86,372,300],{"class":95},[86,374,152],{"class":92},[86,376,377],{"class":95},">Breakpoint-free card grid\u003C\u002F",[86,379,152],{"class":92},[86,381,294],{"class":95},[86,383,385,387,390],{"class":88,"line":384},7,[86,386,300],{"class":95},[86,388,389],{"class":92},"style",[86,391,294],{"class":95},[86,393,395,398,401,404,407,410,414,417,419,422,425,428,431,434,436,439,441,444,446,449,451,454,456,459],{"class":88,"line":394},8,[86,396,397],{"class":92},"  body",[86,399,400],{"class":95}," { ",[86,402,403],{"class":290},"font",[86,405,406],{"class":95},": ",[86,408,409],{"class":290},"16",[86,411,413],{"class":412},"sHUrx","px",[86,415,416],{"class":95},"\u002F",[86,418,227],{"class":290},[86,420,421],{"class":290}," system-ui",[86,423,424],{"class":95},", ",[86,426,427],{"class":290},"sans-serif",[86,429,430],{"class":95},"; ",[86,432,433],{"class":290},"margin",[86,435,406],{"class":95},[86,437,438],{"class":290},"0",[86,440,430],{"class":95},[86,442,443],{"class":290},"color",[86,445,406],{"class":95},[86,447,448],{"class":290},"#1c2430",[86,450,430],{"class":95},[86,452,453],{"class":290},"background",[86,455,406],{"class":95},[86,457,458],{"class":290},"#f4f6fb",[86,460,461],{"class":95},"; }\n",[86,463,465],{"class":88,"line":464},9,[86,466,468],{"emptyLinePlaceholder":467},true,"\n",[86,470,472,475,477,480,482,485,488,490,493,495,498,500,503,505,508,510,513,515],{"class":88,"line":471},10,[86,473,474],{"class":290},"  .wrap",[86,476,400],{"class":95},[86,478,479],{"class":290},"max-width",[86,481,406],{"class":95},[86,483,484],{"class":290},"72",[86,486,487],{"class":412},"rem",[86,489,430],{"class":95},[86,491,492],{"class":290},"margin-inline",[86,494,406],{"class":95},[86,496,497],{"class":290},"auto",[86,499,430],{"class":95},[86,501,502],{"class":290},"padding",[86,504,406],{"class":95},[86,506,507],{"class":290},"2",[86,509,487],{"class":412},[86,511,512],{"class":290}," 1",[86,514,487],{"class":412},[86,516,461],{"class":95},[86,518,520],{"class":88,"line":519},11,[86,521,468],{"emptyLinePlaceholder":467},[86,523,525,528],{"class":88,"line":524},12,[86,526,527],{"class":290},"  .grid",[86,529,530],{"class":95}," {\n",[86,532,534,537,539,542],{"class":88,"line":533},13,[86,535,536],{"class":290},"    display",[86,538,406],{"class":95},[86,540,541],{"class":290},"grid",[86,543,544],{"class":95},";\n",[86,546,548],{"class":88,"line":547},14,[86,549,551],{"class":550},"sLBg1","    \u002F* The only responsive rule in this document.\n",[86,553,555],{"class":88,"line":554},15,[86,556,557],{"class":550},"       min(100%, 18rem) keeps the floor from exceeding the container,\n",[86,559,561],{"class":88,"line":560},16,[86,562,563],{"class":550},"       1fr shares the remainder equally, auto-fit removes empty tracks. *\u002F\n",[86,565,567,570,572,575,578,580,582,585,587,590,592,594,597,599,602,604,607,610,613],{"class":88,"line":566},17,[86,568,569],{"class":290},"    grid-template-columns",[86,571,406],{"class":95},[86,573,574],{"class":290},"repeat",[86,576,577],{"class":95},"(",[86,579,29],{"class":290},[86,581,424],{"class":95},[86,583,584],{"class":290},"minmax",[86,586,577],{"class":95},[86,588,589],{"class":290},"min",[86,591,577],{"class":95},[86,593,234],{"class":290},[86,595,596],{"class":412},"%",[86,598,424],{"class":95},[86,600,601],{"class":290},"18",[86,603,487],{"class":412},[86,605,606],{"class":95},"), ",[86,608,609],{"class":290},"1",[86,611,612],{"class":412},"fr",[86,614,615],{"class":95},"));\n",[86,617,619,622,624,626,628],{"class":88,"line":618},18,[86,620,621],{"class":290},"    gap",[86,623,406],{"class":95},[86,625,609],{"class":290},[86,627,487],{"class":412},[86,629,544],{"class":95},[86,631,633],{"class":88,"line":632},19,[86,634,635],{"class":95},"  }\n",[86,637,639],{"class":88,"line":638},20,[86,640,468],{"emptyLinePlaceholder":467},[86,642,644,647],{"class":88,"line":643},21,[86,645,646],{"class":290},"  .card",[86,648,530],{"class":95},[86,650,652,654,656,658],{"class":88,"line":651},22,[86,653,536],{"class":290},[86,655,406],{"class":95},[86,657,541],{"class":290},[86,659,544],{"class":95},[86,661,663,666,668,670,672,674,677],{"class":88,"line":662},23,[86,664,665],{"class":290},"    grid-template-rows",[86,667,406],{"class":95},[86,669,497],{"class":290},[86,671,512],{"class":290},[86,673,612],{"class":412},[86,675,676],{"class":290}," auto",[86,678,544],{"class":95},[86,680,682,684,686,689,691],{"class":88,"line":681},24,[86,683,621],{"class":290},[86,685,406],{"class":95},[86,687,688],{"class":290},"0.5",[86,690,487],{"class":412},[86,692,544],{"class":95},[86,694,696,699,701,703,705],{"class":88,"line":695},25,[86,697,698],{"class":290},"    padding",[86,700,406],{"class":95},[86,702,609],{"class":290},[86,704,487],{"class":412},[86,706,544],{"class":95},[86,708,710,713,715,718],{"class":88,"line":709},26,[86,711,712],{"class":290},"    background",[86,714,406],{"class":95},[86,716,717],{"class":290},"#fff",[86,719,544],{"class":95},[86,721,723,726,728,730,732,735,738],{"class":88,"line":722},27,[86,724,725],{"class":290},"    border",[86,727,406],{"class":95},[86,729,609],{"class":290},[86,731,413],{"class":412},[86,733,734],{"class":290}," solid",[86,736,737],{"class":290}," #d4dbe8",[86,739,544],{"class":95},[86,741,743,746,748,751,753],{"class":88,"line":742},28,[86,744,745],{"class":290},"    border-radius",[86,747,406],{"class":95},[86,749,750],{"class":290},"0.75",[86,752,487],{"class":412},[86,754,544],{"class":95},[86,756,758],{"class":88,"line":757},29,[86,759,760],{"class":550},"    \u002F* Grid items default to a min-width of auto; releasing it lets a card\n",[86,762,764],{"class":88,"line":763},30,[86,765,766],{"class":550},"       shrink below its longest word instead of overflowing the track. *\u002F\n",[86,768,770,773,775,777],{"class":88,"line":769},31,[86,771,772],{"class":290},"    min-width",[86,774,406],{"class":95},[86,776,438],{"class":290},[86,778,544],{"class":95},[86,780,782],{"class":88,"line":781},32,[86,783,635],{"class":95},[86,785,787],{"class":88,"line":786},33,[86,788,468],{"emptyLinePlaceholder":467},[86,790,792,794,797,799,801,803,805,807,810,812,814,816],{"class":88,"line":791},34,[86,793,646],{"class":290},[86,795,796],{"class":92}," h3",[86,798,400],{"class":95},[86,800,433],{"class":290},[86,802,406],{"class":95},[86,804,438],{"class":290},[86,806,430],{"class":95},[86,808,809],{"class":290},"font-size",[86,811,406],{"class":95},[86,813,609],{"class":290},[86,815,487],{"class":412},[86,817,461],{"class":95},[86,819,821,823,826,829,831,833,835,837,839,841,844,846,848,850,852,855],{"class":88,"line":820},35,[86,822,646],{"class":290},[86,824,825],{"class":92}," p",[86,827,828],{"class":95},"  { ",[86,830,433],{"class":290},[86,832,406],{"class":95},[86,834,438],{"class":290},[86,836,430],{"class":95},[86,838,809],{"class":290},[86,840,406],{"class":95},[86,842,843],{"class":290},"0.9",[86,845,487],{"class":412},[86,847,430],{"class":95},[86,849,443],{"class":290},[86,851,406],{"class":95},[86,853,854],{"class":290},"#5a6472",[86,856,461],{"class":95},[86,858,860,862,865,867,869,871,874,876],{"class":88,"line":859},36,[86,861,646],{"class":290},[86,863,864],{"class":92}," a",[86,866,828],{"class":95},[86,868,809],{"class":290},[86,870,406],{"class":95},[86,872,873],{"class":290},"0.85",[86,875,487],{"class":412},[86,877,461],{"class":95},[86,879,881],{"class":88,"line":880},37,[86,882,468],{"emptyLinePlaceholder":467},[86,884,886],{"class":88,"line":885},38,[86,887,888],{"class":550},"  \u002F* A card that ends up alone on a wide row would stretch very wide.\n",[86,890,892],{"class":88,"line":891},39,[86,893,894],{"class":550},"     Cap it so the grid never produces an unreadable line length. *\u002F\n",[86,896,898,900,902,905,907,910],{"class":88,"line":897},40,[86,899,527],{"class":290},[86,901,400],{"class":95},[86,903,904],{"class":290},"justify-content",[86,906,406],{"class":95},[86,908,909],{"class":290},"start",[86,911,461],{"class":95},[86,913,915,917,919,921,923,926,928],{"class":88,"line":914},41,[86,916,646],{"class":290},[86,918,400],{"class":95},[86,920,479],{"class":290},[86,922,406],{"class":95},[86,924,925],{"class":290},"34",[86,927,487],{"class":412},[86,929,461],{"class":95},[86,931,933,936,938],{"class":88,"line":932},42,[86,934,935],{"class":95},"\u003C\u002F",[86,937,389],{"class":92},[86,939,294],{"class":95},[86,941,943,945,947],{"class":88,"line":942},43,[86,944,935],{"class":95},[86,946,322],{"class":92},[86,948,294],{"class":95},[86,950,952,954,957],{"class":88,"line":951},44,[86,953,300],{"class":95},[86,955,956],{"class":92},"body",[86,958,294],{"class":95},[86,960,962,965,968,971,973,976],{"class":88,"line":961},45,[86,963,964],{"class":95},"  \u003C",[86,966,967],{"class":92},"div",[86,969,970],{"class":290}," class",[86,972,308],{"class":95},[86,974,975],{"class":311},"\"wrap\"",[86,977,294],{"class":95},[86,979,981,984,986,988,990,993],{"class":88,"line":980},46,[86,982,983],{"class":95},"    \u003C",[86,985,967],{"class":92},[86,987,970],{"class":290},[86,989,308],{"class":95},[86,991,992],{"class":311},"\"grid\"",[86,994,294],{"class":95},[86,996,998,1001,1004,1006,1008,1011],{"class":88,"line":997},47,[86,999,1000],{"class":95},"      \u003C",[86,1002,1003],{"class":92},"article",[86,1005,970],{"class":290},[86,1007,308],{"class":95},[86,1009,1010],{"class":311},"\"card\"",[86,1012,294],{"class":95},[86,1014,1016,1019,1022,1025,1027],{"class":88,"line":1015},48,[86,1017,1018],{"class":95},"        \u003C",[86,1020,1021],{"class":92},"h3",[86,1023,1024],{"class":95},">Track sizing\u003C\u002F",[86,1026,1021],{"class":92},[86,1028,294],{"class":95},[86,1030,1032,1034,1036,1039,1041],{"class":88,"line":1031},49,[86,1033,1018],{"class":95},[86,1035,19],{"class":92},[86,1037,1038],{"class":95},">How the grid algorithm resolves a minmax floor before distributing free space.\u003C\u002F",[86,1040,19],{"class":92},[86,1042,294],{"class":95},[86,1044,1046,1048,1050,1053,1055,1058,1061,1063],{"class":88,"line":1045},50,[86,1047,1018],{"class":95},[86,1049,36],{"class":92},[86,1051,1052],{"class":290}," href",[86,1054,308],{"class":95},[86,1056,1057],{"class":311},"\"#\"",[86,1059,1060],{"class":95},">Read\u003C\u002F",[86,1062,36],{"class":92},[86,1064,294],{"class":95},[86,1066,1068,1071,1073],{"class":88,"line":1067},51,[86,1069,1070],{"class":95},"      \u003C\u002F",[86,1072,1003],{"class":92},[86,1074,294],{"class":95},[86,1076,1078,1080,1082,1084,1086,1088],{"class":88,"line":1077},52,[86,1079,1000],{"class":95},[86,1081,1003],{"class":92},[86,1083,970],{"class":290},[86,1085,308],{"class":95},[86,1087,1010],{"class":311},[86,1089,294],{"class":95},[86,1091,1093,1095,1097,1100,1102],{"class":88,"line":1092},53,[86,1094,1018],{"class":95},[86,1096,1021],{"class":92},[86,1098,1099],{"class":95},">Gap accounting\u003C\u002F",[86,1101,1021],{"class":92},[86,1103,294],{"class":95},[86,1105,1107,1109,1111,1114,1116],{"class":88,"line":1106},54,[86,1108,1018],{"class":95},[86,1110,19],{"class":92},[86,1112,1113],{"class":95},">Gaps are subtracted from the container before the track count is computed.\u003C\u002F",[86,1115,19],{"class":92},[86,1117,294],{"class":95},[86,1119,1121,1123,1125,1127,1129,1131,1133,1135],{"class":88,"line":1120},55,[86,1122,1018],{"class":95},[86,1124,36],{"class":92},[86,1126,1052],{"class":290},[86,1128,308],{"class":95},[86,1130,1057],{"class":311},[86,1132,1060],{"class":95},[86,1134,36],{"class":92},[86,1136,294],{"class":95},[86,1138,1140,1142,1144],{"class":88,"line":1139},56,[86,1141,1070],{"class":95},[86,1143,1003],{"class":92},[86,1145,294],{"class":95},[86,1147,1149,1151,1153,1155,1157,1159],{"class":88,"line":1148},57,[86,1150,1000],{"class":95},[86,1152,1003],{"class":92},[86,1154,970],{"class":290},[86,1156,308],{"class":95},[86,1158,1010],{"class":311},[86,1160,294],{"class":95},[86,1162,1164,1166,1168,1171,1173],{"class":88,"line":1163},58,[86,1165,1018],{"class":95},[86,1167,1021],{"class":92},[86,1169,1170],{"class":95},">Collapsed tracks\u003C\u002F",[86,1172,1021],{"class":92},[86,1174,294],{"class":95},[86,1176,1178,1180,1182,1185,1187],{"class":88,"line":1177},59,[86,1179,1018],{"class":95},[86,1181,19],{"class":92},[86,1183,1184],{"class":95},">An empty auto-fit track resolves to zero width, and its two gaps collapse with it.\u003C\u002F",[86,1186,19],{"class":92},[86,1188,294],{"class":95},[86,1190,1192,1194,1196,1198,1200,1202,1204,1206],{"class":88,"line":1191},60,[86,1193,1018],{"class":95},[86,1195,36],{"class":92},[86,1197,1052],{"class":290},[86,1199,308],{"class":95},[86,1201,1057],{"class":311},[86,1203,1060],{"class":95},[86,1205,36],{"class":92},[86,1207,294],{"class":95},[86,1209,1211,1213,1215],{"class":88,"line":1210},61,[86,1212,1070],{"class":95},[86,1214,1003],{"class":92},[86,1216,294],{"class":95},[86,1218,1220,1222,1224,1226,1228,1230],{"class":88,"line":1219},62,[86,1221,1000],{"class":95},[86,1223,1003],{"class":92},[86,1225,970],{"class":290},[86,1227,308],{"class":95},[86,1229,1010],{"class":311},[86,1231,294],{"class":95},[86,1233,1235,1237,1239,1242,1244],{"class":88,"line":1234},63,[86,1236,1018],{"class":95},[86,1238,1021],{"class":92},[86,1240,1241],{"class":95},">Intrinsic floors\u003C\u002F",[86,1243,1021],{"class":92},[86,1245,294],{"class":95},[86,1247,1249,1251,1253,1256,1258],{"class":88,"line":1248},64,[86,1250,1018],{"class":95},[86,1252,19],{"class":92},[86,1254,1255],{"class":95},">A percentage or min() floor is resolved against the grid container's inline size.\u003C\u002F",[86,1257,19],{"class":92},[86,1259,294],{"class":95},[86,1261,1263,1265,1267,1269,1271,1273,1275,1277],{"class":88,"line":1262},65,[86,1264,1018],{"class":95},[86,1266,36],{"class":92},[86,1268,1052],{"class":290},[86,1270,308],{"class":95},[86,1272,1057],{"class":311},[86,1274,1060],{"class":95},[86,1276,36],{"class":92},[86,1278,294],{"class":95},[86,1280,1282,1284,1286],{"class":88,"line":1281},66,[86,1283,1070],{"class":95},[86,1285,1003],{"class":92},[86,1287,294],{"class":95},[86,1289,1291,1293,1295,1297,1299,1301],{"class":88,"line":1290},67,[86,1292,1000],{"class":95},[86,1294,1003],{"class":92},[86,1296,970],{"class":290},[86,1298,308],{"class":95},[86,1300,1010],{"class":311},[86,1302,294],{"class":95},[86,1304,1306,1308,1310,1313,1315],{"class":88,"line":1305},68,[86,1307,1018],{"class":95},[86,1309,1021],{"class":92},[86,1311,1312],{"class":95},">Ordering\u003C\u002F",[86,1314,1021],{"class":92},[86,1316,294],{"class":95},[86,1318,1320,1322,1324,1327,1329],{"class":88,"line":1319},69,[86,1321,1018],{"class":95},[86,1323,19],{"class":92},[86,1325,1326],{"class":95},">Auto-placement fills rows in document order, so reading order stays intact.\u003C\u002F",[86,1328,19],{"class":92},[86,1330,294],{"class":95},[86,1332,1334,1336,1338,1340,1342,1344,1346,1348],{"class":88,"line":1333},70,[86,1335,1018],{"class":95},[86,1337,36],{"class":92},[86,1339,1052],{"class":290},[86,1341,308],{"class":95},[86,1343,1057],{"class":311},[86,1345,1060],{"class":95},[86,1347,36],{"class":92},[86,1349,294],{"class":95},[86,1351,1353,1355,1357],{"class":88,"line":1352},71,[86,1354,1070],{"class":95},[86,1356,1003],{"class":92},[86,1358,294],{"class":95},[86,1360,1362,1365,1367],{"class":88,"line":1361},72,[86,1363,1364],{"class":95},"    \u003C\u002F",[86,1366,967],{"class":92},[86,1368,294],{"class":95},[86,1370,1372,1375,1377],{"class":88,"line":1371},73,[86,1373,1374],{"class":95},"  \u003C\u002F",[86,1376,967],{"class":92},[86,1378,294],{"class":95},[86,1380,1382,1384,1386],{"class":88,"line":1381},74,[86,1383,935],{"class":95},[86,1385,956],{"class":92},[86,1387,294],{"class":95},[86,1389,1391,1393,1395],{"class":88,"line":1390},75,[86,1392,935],{"class":95},[86,1394,277],{"class":92},[86,1396,294],{"class":95},[14,1398,1400],{"id":1399},"key-technique-the-min-guard","Key technique: the min() guard",[19,1402,1403,1404,1407],{},"Write ",[23,1405,1406],{},"minmax(20rem, 1fr)"," and you have declared that every track is at least 20rem — a hard floor the algorithm has no permission to violate. Put that grid in a 17rem container and it does not fall back to one small column; it produces one 20rem column that sticks 3rem out of its parent, and you get a horizontal scrollbar on the whole page.",[19,1409,1410,1412,1413,1416,1417,1420],{},[23,1411,129],{}," fixes it by making the floor conditional. The ",[23,1414,1415],{},"100%"," resolves against the grid container's inline size, so in any container wider than 20rem the ",[23,1418,1419],{},"20rem"," wins and behaviour is unchanged, while in a narrower container the percentage wins and the floor becomes exactly the space available. One column, no overflow, no media query.",[19,1422,1423,1424,1426,1427,1430,1431,1434,1435,1439,1440,1443,1444,1447],{},"Two details worth knowing. First, ",[23,1425,1415],{}," here does not account for ",[23,1428,1429],{},"gap","; with a single track there is no gap to subtract, so it is exact, and with more than one track the 20rem branch is already in effect. Second, this is a floor guard, not a general overflow cure — a track sized correctly can still be overflowed by its ",[132,1432,1433],{},"contents",", which is a separate problem covered in ",[36,1436,1438],{"href":1437},"\u002Fmastering-container-queries-responsive-layouts\u002Fintrinsic-sizing-techniques\u002Fpreventing-flex-and-grid-overflow\u002F","Preventing Flex and Grid Overflow",". The ",[23,1441,1442],{},"min-width: 0"," on ",[23,1445,1446],{},".card"," above is there for precisely that reason.",[70,1449],{},[14,1451,1453],{"id":1452},"variation-rows-and-a-dense-masonry-ish-gallery","Variation: rows, and a dense masonry-ish gallery",[19,1455,1456,1457,1460,1461,1464],{},"The same machinery works on rows via ",[23,1458,1459],{},"grid-auto-rows",", and pairs well with ",[23,1462,1463],{},"grid-auto-flow: dense"," for a gallery where some items span two tracks. Dense packing backfills holes left by wide items, at the cost of visual order diverging from DOM order.",[77,1466,1468],{"className":79,"code":1467,"language":81,"meta":82,"style":82},".gallery {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));\n  grid-auto-rows: 10rem;\n  grid-auto-flow: dense;   \u002F* backfill gaps left by spanning items *\u002F\n  gap: 0.75rem;\n}\n\n\u002F* Feature tiles take two tracks in each axis where there is room. *\u002F\n.gallery__item--feature {\n  grid-column: span 2;\n  grid-row: span 2;\n}\n\n\u002F* Never let a span exceed the available track count in a narrow container. *\u002F\n@container (max-width: 30rem) {\n  .gallery__item--feature { grid-column: span 1; grid-row: span 1; }\n}\n",[23,1469,1470,1477,1488,1530,1544,1560,1573,1578,1582,1587,1594,1606,1617,1621,1625,1630,1638,1663],{"__ignoreMap":82},[86,1471,1472,1475],{"class":88,"line":89},[86,1473,1474],{"class":290},".gallery",[86,1476,530],{"class":95},[86,1478,1479,1482,1484,1486],{"class":88,"line":297},[86,1480,1481],{"class":290},"  display",[86,1483,406],{"class":95},[86,1485,541],{"class":290},[86,1487,544],{"class":95},[86,1489,1490,1493,1495,1497,1499,1501,1503,1505,1507,1509,1511,1513,1515,1517,1520,1522,1524,1526,1528],{"class":88,"line":317},[86,1491,1492],{"class":290},"  grid-template-columns",[86,1494,406],{"class":95},[86,1496,574],{"class":290},[86,1498,577],{"class":95},[86,1500,33],{"class":290},[86,1502,424],{"class":95},[86,1504,584],{"class":290},[86,1506,577],{"class":95},[86,1508,589],{"class":290},[86,1510,577],{"class":95},[86,1512,234],{"class":290},[86,1514,596],{"class":412},[86,1516,424],{"class":95},[86,1518,1519],{"class":290},"14",[86,1521,487],{"class":412},[86,1523,606],{"class":95},[86,1525,609],{"class":290},[86,1527,612],{"class":412},[86,1529,615],{"class":95},[86,1531,1532,1535,1537,1540,1542],{"class":88,"line":327},[86,1533,1534],{"class":290},"  grid-auto-rows",[86,1536,406],{"class":95},[86,1538,1539],{"class":290},"10",[86,1541,487],{"class":412},[86,1543,544],{"class":95},[86,1545,1546,1549,1551,1554,1557],{"class":88,"line":345},[86,1547,1548],{"class":290},"  grid-auto-flow",[86,1550,406],{"class":95},[86,1552,1553],{"class":290},"dense",[86,1555,1556],{"class":95},";   ",[86,1558,1559],{"class":550},"\u002F* backfill gaps left by spanning items *\u002F\n",[86,1561,1562,1565,1567,1569,1571],{"class":88,"line":370},[86,1563,1564],{"class":290},"  gap",[86,1566,406],{"class":95},[86,1568,750],{"class":290},[86,1570,487],{"class":412},[86,1572,544],{"class":95},[86,1574,1575],{"class":88,"line":384},[86,1576,1577],{"class":95},"}\n",[86,1579,1580],{"class":88,"line":394},[86,1581,468],{"emptyLinePlaceholder":467},[86,1583,1584],{"class":88,"line":464},[86,1585,1586],{"class":550},"\u002F* Feature tiles take two tracks in each axis where there is room. *\u002F\n",[86,1588,1589,1592],{"class":88,"line":471},[86,1590,1591],{"class":290},".gallery__item--feature",[86,1593,530],{"class":95},[86,1595,1596,1599,1602,1604],{"class":88,"line":519},[86,1597,1598],{"class":290},"  grid-column",[86,1600,1601],{"class":95},": span ",[86,1603,507],{"class":290},[86,1605,544],{"class":95},[86,1607,1608,1611,1613,1615],{"class":88,"line":524},[86,1609,1610],{"class":290},"  grid-row",[86,1612,1601],{"class":95},[86,1614,507],{"class":290},[86,1616,544],{"class":95},[86,1618,1619],{"class":88,"line":533},[86,1620,1577],{"class":95},[86,1622,1623],{"class":88,"line":547},[86,1624,468],{"emptyLinePlaceholder":467},[86,1626,1627],{"class":88,"line":554},[86,1628,1629],{"class":550},"\u002F* Never let a span exceed the available track count in a narrow container. *\u002F\n",[86,1631,1632,1635],{"class":88,"line":560},[86,1633,1634],{"class":412},"@container",[86,1636,1637],{"class":95}," (max-width: 30rem) {\n",[86,1639,1640,1643,1645,1648,1650,1652,1654,1657,1659,1661],{"class":88,"line":566},[86,1641,1642],{"class":290},"  .gallery__item--feature",[86,1644,400],{"class":95},[86,1646,1647],{"class":290},"grid-column",[86,1649,1601],{"class":95},[86,1651,609],{"class":290},[86,1653,430],{"class":95},[86,1655,1656],{"class":290},"grid-row",[86,1658,1601],{"class":95},[86,1660,609],{"class":290},[86,1662,461],{"class":95},[86,1664,1665],{"class":88,"line":618},[86,1666,1577],{"class":95},[19,1668,1669,1670,1672,1673,1675,1676,1678],{},"Note the deliberate ",[23,1671,33],{}," here: in a gallery, a preserved trailing track keeps tile sizes constant across pages with different item counts, which reads as more consistent than tiles that resize when the last row is short. That consistency is the one clear argument for ",[23,1674,33],{}," over ",[23,1677,29],{},". Because dense flow reorders items visually but not in the accessibility tree, keep it to decorative galleries where sequence carries no meaning — a keyboard user tabbing through will otherwise jump around the screen.",[14,1680,1682],{"id":1681},"browser-support-note","Browser support note",[19,1684,1685,1688,1689,30,1691,1693,1694,1697,1698,1701,1702,424,1704,1706,1707,1710],{},[23,1686,1687],{},"repeat()"," with ",[23,1690,29],{},[23,1692,33],{},", and ",[23,1695,1696],{},"minmax()",", are part of the original CSS Grid Level 1 implementation and shipped in every engine years ago — there is no fallback story to write in 2026. The ",[23,1699,1700],{},"min()"," function used in the guard arrived later but is also long settled and available everywhere current. If you still support engines that predate ",[23,1703,1700],{},[23,1705,1406],{}," inside a ",[23,1708,1709],{},"@media (min-width: 22rem)"," block reproduces the guard's effect.",[14,1712,1714],{"id":1713},"faq","FAQ",[19,1716,1717,1721,1722,1724,1725,1727],{},[1718,1719,1720],"strong",{},"What is the difference between auto-fit and auto-fill?","\nBoth generate as many tracks as fit the container. ",[23,1723,33],{}," keeps the tracks it created even when no items occupy them, while ",[23,1726,29],{}," collapses those empty tracks to zero so the remaining items expand to fill the row.",[19,1729,1730,1733,1734,1736,1737,1740],{},[1718,1731,1732],{},"Why does my auto-fit grid overflow on a narrow screen?","\nBecause the minimum passed to ",[23,1735,1696],{}," is a fixed length larger than the container. A 20rem minimum cannot fit a 17rem container, so the track overflows. Write ",[23,1738,1739],{},"minmax(min(100%, 20rem), 1fr)"," so the minimum caps at the container width.",[19,1742,1743,1746],{},[1718,1744,1745],{},"Does an auto-fit grid still need media queries?","\nUsually not for the column count, which the track count already handles. You may still want a container query for changes the track algorithm cannot express, such as switching a card from a stacked to a side-by-side arrangement.",[19,1748,1749,1752,1753,1755,1756,1759],{},[1718,1750,1751],{},"Should the flexible maximum in minmax() be 1fr or max-content?","\nUse ",[23,1754,140],{}," for equal-width tracks that absorb leftover space evenly. ",[23,1757,1758],{},"max-content"," lets tracks grow to their content and produces unequal columns, which usually reads as accidental in a card grid.",[14,1761,1763],{"id":1762},"related","Related",[103,1765,1766,1771,1778,1787,1794],{},[106,1767,1768,1770],{},[36,1769,39],{"href":38}," — the parent guide to grid architecture.",[106,1772,1773,1777],{},[36,1774,1776],{"href":1775},"\u002Fmastering-container-queries-responsive-layouts\u002Fcss-grid-and-subgrid-layouts\u002Fsubgrid-vs-nested-grid\u002F","Subgrid vs an Independently Nested Grid"," — aligning the interiors of the cards this grid places.",[106,1779,1780,1784,1785,45],{},[36,1781,1783],{"href":1782},"\u002Fmastering-container-queries-responsive-layouts\u002Fintrinsic-sizing-techniques\u002Fmin-max-fit-content-explained\u002F","min-content, max-content, and fit-content()"," — the other intrinsic sizing functions available inside ",[23,1786,1696],{},[106,1788,1789,1793],{},[36,1790,1792],{"href":1791},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns\u002Fbuilding-responsive-cards-with-container-queries\u002F","Building Responsive Cards with Container Queries"," — restyling each card once the grid has sized it.",[106,1795,1796,1800],{},[36,1797,1799],{"href":1798},"\u002Fcss-only-micro-interactions-animations\u002Fkeyframe-animation-patterns\u002Fstaggered-list-animations-with-custom-properties\u002F","Staggered List Animations with Custom Properties"," — cross-area: animating the cards in as the grid renders.",[389,1802,1803],{},"html pre.shiki code .sne4z, html code.shiki .sne4z{--shiki-default:#024C1A;--shiki-dark:#72F088}html pre.shiki code .suds8, html code.shiki .suds8{--shiki-default:#0E1116;--shiki-dark:#F0F3F6}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);}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}",{"title":82,"searchDepth":297,"depth":297,"links":1805},[1806,1807,1808,1809,1810,1811,1812,1813,1814],{"id":16,"depth":297,"text":17},{"id":48,"depth":297,"text":49},{"id":74,"depth":297,"text":75},{"id":271,"depth":297,"text":272},{"id":1399,"depth":297,"text":1400},{"id":1452,"depth":297,"text":1453},{"id":1681,"depth":297,"text":1682},{"id":1713,"depth":297,"text":1714},{"id":1762,"depth":297,"text":1763},"Build a responsive grid with zero breakpoints using repeat auto-fit and minmax, learn how auto-fill differs, and add the min() guard that stops narrow overflow.","md",{"pageTitle":1818,"datePublished":1819,"dateModified":1819,"faq":1820},"auto-fit vs auto-fill with minmax()","2026-07-20",[1821,1823,1825,1827],{"q":1720,"a":1822},"Both generate as many tracks as fit the container. auto-fill keeps the tracks it created even when no items occupy them, while auto-fit collapses those empty tracks to zero so the remaining items expand to fill the row.",{"q":1732,"a":1824},"Because the minimum passed to minmax() is a fixed length larger than the container. A 20rem minimum cannot fit a 17rem container, so the track overflows. Write minmax(min(100%, 20rem), 1fr) so the minimum caps at the container width.",{"q":1745,"a":1826},"Usually not for the column count, which the track count already handles. You may still want a container query for changes the track algorithm cannot express, such as switching a card from a stacked to a side-by-side arrangement.",{"q":1751,"a":1828},"Use 1fr for equal-width tracks that absorb leftover space evenly. max-content lets tracks grow to their content and produces unequal columns, which usually reads as accidental in a card grid.","\u002Fmastering-container-queries-responsive-layouts\u002Fcss-grid-and-subgrid-layouts\u002Fauto-fit-minmax-responsive-grids",{"title":5,"description":1815},"mastering-container-queries-responsive-layouts\u002Fcss-grid-and-subgrid-layouts\u002Fauto-fit-minmax-responsive-grids\u002Findex","MhNQSnJRoPAyFO-gmK1AaET6HN_LswuQ04O0E3wDdRM",[1834,1837,1840,1843,1846,1849,1852,1855,1858,1861,1864,1867,1870,1873,1876,1879,1882,1885,1888,1891,1894,1897,1900,1903,1906,1909,1912,1915,1918,1921,1924,1927,1930,1933,1936,1939,1942,1945,1948,1951,1954,1957,1960,1963,1966,1969,1972,1974,1977,1980,1983,1986,1989,1992,1995,1998,2001,2004,2007,2010,2013,2014,2017,2020,2023,2025,2028,2031,2034,2037,2040,2042,2045,2048,2051,2054,2057,2060,2063,2066,2069,2072,2075,2078,2081,2084,2087,2090],{"path":1835,"title":1836},"\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":1838,"title":1839},"\u002Fcss-only-micro-interactions-animations\u002Faccessibility-in-css-animations","Accessibility in CSS Animations: Patterns, Specs & Best Practices",{"path":1841,"title":1842},"\u002Fcss-only-micro-interactions-animations\u002Faccessibility-in-css-animations\u002Fprefers-reduced-motion-recipes","prefers-reduced-motion Recipes: A Reduction for Every Common Effect",{"path":1844,"title":1845},"\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":1847,"title":1848},"\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":1850,"title":1851},"\u002Fcss-only-micro-interactions-animations\u002Faccessibility-in-css-animations\u002Fvestibular-safe-animation-patterns","Vestibular-Safe Animation Patterns: Why Some Motion Makes People Sick",{"path":1853,"title":1854},"\u002Fcss-only-micro-interactions-animations\u002Faccessibility-in-css-animations\u002Fwcag-motion-success-criteria","WCAG Motion Success Criteria: What Each One Actually Requires",{"path":1856,"title":1857},"\u002Fcss-only-micro-interactions-animations\u002Fcontainer-aware-motion\u002Fcontainer-query-hover-affordances","Container Query Hover Affordances: When Narrow Means Persistent, Not Hidden",{"path":1859,"title":1860},"\u002Fcss-only-micro-interactions-animations\u002Fcontainer-aware-motion","Container-Aware Motion: Animation Sized by the Space a Component Actually Has",{"path":1862,"title":1863},"\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":1865,"title":1866},"\u002Fcss-only-micro-interactions-animations\u002Fcontainer-aware-motion\u002Fsuppressing-motion-in-small-containers","Suppressing Motion in Small Containers: Deliberately Animating Nothing",{"path":1868,"title":1869},"\u002Fcss-only-micro-interactions-animations\u002Fcss-animation-vs-web-animations-api","CSS Animation vs the Web Animations API: A Decision Guide",{"path":1871,"title":1872},"\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":1874,"title":1875},"\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":1877,"title":1878},"\u002Fcss-only-micro-interactions-animations\u002Fcss-custom-properties-architecture\u002Ffluid-spacing-tokens-driving-transition-durations","Fluid Spacing Tokens That Drive Transition Durations",{"path":1880,"title":1881},"\u002Fcss-only-micro-interactions-animations\u002Fcss-custom-properties-architecture","CSS Custom Properties Architecture: Scalable Design Systems & Dynamic UI",{"path":1883,"title":1884},"\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":1886,"title":1887},"\u002Fcss-only-micro-interactions-animations\u002Fcss-transition-fundamentals\u002Fcss-transition-timing-functions","CSS Transition Timing Functions: ease, cubic-bezier(), steps() and linear()",{"path":1889,"title":1890},"\u002Fcss-only-micro-interactions-animations\u002Fcss-transition-fundamentals","CSS Transition Fundamentals: Architecture, Performance & Patterns",{"path":1892,"title":1893},"\u002Fcss-only-micro-interactions-animations\u002Fcss-transition-fundamentals\u002Fstarting-style-entry-animations","@starting-style: Animating an Element's Very First Style Change",{"path":1895,"title":1896},"\u002Fcss-only-micro-interactions-animations\u002Fcss-transition-fundamentals\u002Ftransitioning-display-with-allow-discrete","Transitioning display with transition-behavior: allow-discrete and @starting-style",{"path":1898,"title":1899},"\u002Fcss-only-micro-interactions-animations\u002Fhover-focus-state-design\u002Faccessible-css-only-tooltips","Accessible CSS-Only Tooltips and Hover Cards With  and ",{"path":1901,"title":1902},"\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":1904,"title":1905},"\u002Fcss-only-micro-interactions-animations\u002Fhover-focus-state-design\u002Ffocus-within-form-patterns"," Form Patterns: Styling a Group From the Field Inside It",{"path":1907,"title":1908},"\u002Fcss-only-micro-interactions-animations\u002Fhover-focus-state-design","Hover & Focus State Design: Spec-Compliant Patterns for Modern UIs",{"path":1910,"title":1911},"\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":1913,"title":1914},"\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":1916,"title":1917},"\u002Fcss-only-micro-interactions-animations","CSS-Only Micro-Interactions & Animations: Architecture, Performance & Implementation",{"path":1919,"title":1920},"\u002Fcss-only-micro-interactions-animations\u002Fkeyframe-animation-patterns\u002Fcontainer-query-triggered-keyframe-animations","Container-Query-Triggered Keyframe Animations: Animate Differently per Available Space",{"path":1922,"title":1923},"\u002Fcss-only-micro-interactions-animations\u002Fkeyframe-animation-patterns\u002Fcss-only-accordions-and-disclosure","CSS-Only Accordions and Disclosure Widgets with details and summary",{"path":1925,"title":1926},"\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":1928,"title":1929},"\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":1931,"title":1932},"\u002Fcss-only-micro-interactions-animations\u002Fkeyframe-animation-patterns","Keyframe Animation Patterns: Spec-Compliant Architectures for Modern UIs",{"path":1934,"title":1935},"\u002Fcss-only-micro-interactions-animations\u002Fkeyframe-animation-patterns\u002Fstaggered-list-animations-with-custom-properties","Staggered List Animations Using --i Index Custom Properties",{"path":1937,"title":1938},"\u002Fcss-only-micro-interactions-animations\u002Fperformance-gpu-acceleration","Performance & GPU Acceleration in CSS: A Developer’s Blueprint",{"path":1940,"title":1941},"\u002Fcss-only-micro-interactions-animations\u002Fperformance-gpu-acceleration\u002Foptimizing-css-animations-for-60fps","Optimizing CSS Animations for 60fps: Budgeting the Frame",{"path":1943,"title":1944},"\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":1946,"title":1947},"\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":1949,"title":1950},"\u002Fcss-only-micro-interactions-animations\u002Fscroll-driven-animations","Scroll-Driven Animations: Binding Motion to Scroll Position in Pure CSS",{"path":1952,"title":1953},"\u002Fcss-only-micro-interactions-animations\u002Fscroll-driven-animations\u002Fscroll-driven-animation-fallbacks","Shipping Scroll-Driven Animations Without Breaking Anything",{"path":1955,"title":1956},"\u002Fcss-only-micro-interactions-animations\u002Fscroll-driven-animations\u002Fscroll-progress-bar-without-javascript","A Reading Progress Bar Driven by scroll(root)",{"path":1958,"title":1959},"\u002Fcss-only-micro-interactions-animations\u002Fscroll-driven-animations\u002Fscroll-triggered-reveal-animations","Reveal-on-Scroll with view() and animation-range",{"path":1961,"title":1962},"\u002Fcss-only-micro-interactions-animations\u002Fview-transitions-for-css-developers","View Transitions for CSS Developers: the Pseudo-Element Tree, Snapshots, and Named Elements",{"path":1964,"title":1965},"\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":1967,"title":1968},"\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":1970,"title":1971},"\u002Fcss-only-micro-interactions-animations\u002Fview-transitions-for-css-developers\u002Fview-transitions-with-reduced-motion","Honouring prefers-reduced-motion in View Transitions",{"path":416,"title":1973},"Modern CSS Layouts & Micro-Interactions",{"path":1975,"title":1976},"\u002Fmastering-container-queries-responsive-layouts\u002Fanchor-positioning-and-overlays\u002Fanchor-positioned-tooltips","Anchor-Positioned Tooltips: Tethering, Flipping, and Getting the Semantics Right",{"path":1978,"title":1979},"\u002Fmastering-container-queries-responsive-layouts\u002Fanchor-positioning-and-overlays\u002Fanchor-positioning-fallbacks","Anchor Positioning Fallbacks: A Graceful Floor for Older Browser Versions",{"path":1981,"title":1982},"\u002Fmastering-container-queries-responsive-layouts\u002Fanchor-positioning-and-overlays","CSS Anchor Positioning and Overlays: Tethering Elements Without JavaScript",{"path":1984,"title":1985},"\u002Fmastering-container-queries-responsive-layouts\u002Fanchor-positioning-and-overlays\u002Fpopover-attribute-and-css-styling","The popover Attribute: Top-Layer Overlays With No JavaScript",{"path":1987,"title":1988},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-fallbacks\u002Ffeature-detection-with-supports","Feature Detection with @supports: Syntax, Semantics, and the Traps",{"path":1990,"title":1991},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-fallbacks\u002Fhandling-container-query-fallbacks-for-older-browsers","Handling Container Query Fallbacks for Older Browsers",{"path":1993,"title":1994},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-fallbacks","Container Query Fallbacks: Spec-Compliant CSS Strategies for Legacy Browsers",{"path":1996,"title":1997},"\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":1999,"title":2000},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-syntax-basics\u002Fcontainer-type-size-vs-inline-size","Choosing container-type: inline-size, size, or normal",{"path":2002,"title":2003},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-syntax-basics\u002Fcontainer-vs-media-queries-comparison","Container vs Media Queries: Choosing the Right Reference Box",{"path":2005,"title":2006},"\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":2008,"title":2009},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-syntax-basics","Container Query Syntax Basics",{"path":2011,"title":2012},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-syntax-basics\u002Fnesting-and-naming-container-queries","Nesting and Naming Container Queries: Targeting the Right Ancestor",{"path":1829,"title":5},{"path":2015,"title":2016},"\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":2018,"title":2019},"\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":2021,"title":2022},"\u002Fmastering-container-queries-responsive-layouts\u002Fcss-grid-and-subgrid-layouts","CSS Grid and Subgrid Layouts for Responsive Interfaces",{"path":2024,"title":1776},"\u002Fmastering-container-queries-responsive-layouts\u002Fcss-grid-and-subgrid-layouts\u002Fsubgrid-vs-nested-grid",{"path":2026,"title":2027},"\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":2029,"title":2030},"\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":2032,"title":2033},"\u002Fmastering-container-queries-responsive-layouts\u002Ffluid-typography-with-clamp\u002Ffluid-type-accessibility-and-zoom","Fluid Type, Accessibility and Zoom: The vw-Only Trap",{"path":2035,"title":2036},"\u002Fmastering-container-queries-responsive-layouts\u002Ffluid-typography-with-clamp\u002Ffluid-typography-without-javascript","Fluid Typography Without JavaScript: A Precision CSS Reference",{"path":2038,"title":2039},"\u002Fmastering-container-queries-responsive-layouts\u002Ffluid-typography-with-clamp","Fluid Typography with clamp(): A Practical Guide for Modern CSS",{"path":2041,"title":44},"\u002Fmastering-container-queries-responsive-layouts",{"path":2043,"title":2044},"\u002Fmastering-container-queries-responsive-layouts\u002Fintrinsic-sizing-techniques\u002Faspect-ratio-for-responsive-media","Using aspect-ratio for Responsive Media and Preventing Layout Shift",{"path":2046,"title":2047},"\u002Fmastering-container-queries-responsive-layouts\u002Fintrinsic-sizing-techniques","Intrinsic Sizing Techniques: Modern CSS Layouts for Responsive UI",{"path":2049,"title":2050},"\u002Fmastering-container-queries-responsive-layouts\u002Fintrinsic-sizing-techniques\u002Fmin-max-fit-content-explained","min-content, max-content, and fit-content() Explained",{"path":2052,"title":2053},"\u002Fmastering-container-queries-responsive-layouts\u002Fintrinsic-sizing-techniques\u002Fpreventing-flex-and-grid-overflow","The min-width: auto Trap in Flex and Grid Layouts",{"path":2055,"title":2056},"\u002Fmastering-container-queries-responsive-layouts\u002Fmodern-css-reset-strategies\u002Fcascade-layers-for-reset-and-tokens","Cascade Layers for Reset and Design Tokens",{"path":2058,"title":2059},"\u002Fmastering-container-queries-responsive-layouts\u002Fmodern-css-reset-strategies\u002Fcascade-layers-vs-specificity-hacks","Cascade Layers vs Specificity Hacks: Ordering Instead of Escalating",{"path":2061,"title":2062},"\u002Fmastering-container-queries-responsive-layouts\u002Fmodern-css-reset-strategies","Modern CSS Reset Strategies: A Spec-Compliant Foundation",{"path":2064,"title":2065},"\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":2067,"title":2068},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns\u002Fcontainer-query-data-tables","Container Query Data Tables: Reflowing Tables to Cards",{"path":2070,"title":2071},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns\u002Fcontainer-query-sidebar-layouts","Container Query Sidebar Layouts That Travel Between Contexts",{"path":2073,"title":2074},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns","Responsive Component Patterns: Architecture & Implementation",{"path":2076,"title":2077},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns\u002Fresponsive-forms-with-container-queries","Responsive Forms with Container Queries: Reflow Without Losing the Wiring",{"path":2079,"title":2080},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns\u002Fresponsive-navigation-without-media-queries","Responsive Navigation Without Media Queries Using Container Queries",{"path":2082,"title":2083},"\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":2085,"title":2086},"\u002Fmastering-container-queries-responsive-layouts\u002Fstyle-queries-and-container-state","Style Queries and Container State: Token-Driven Component Variants",{"path":2088,"title":2089},"\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":2091,"title":2092},"\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",1784566157533]