[{"data":1,"prerenderedAt":1027},["ShallowReactive",2],{"guide-responsive-grid-no-media-queries":3},{"id":4,"title":5,"body":6,"date":1019,"description":1020,"extension":1021,"meta":1022,"navigation":253,"path":1023,"readingTime":129,"seo":1024,"stem":1025,"__hash__":1026},"guides\u002Fguides\u002Fresponsive-grid-no-media-queries.md","Responsive Grid Layouts Without Media Queries",{"type":7,"value":8,"toc":1007},"minimark",[9,14,18,26,30,133,136,203,210,217,221,224,271,307,319,323,333,414,421,425,428,497,502,570,573,577,580,654,664,714,718,909,916,920,923,945,948,952,984,988,1003],[10,11,13],"h2",{"id":12},"the-problem-with-breakpoints","The Problem with Breakpoints",[15,16,17],"p",{},"Media queries couple your layout to the viewport. Change the viewport breakpoints and every component that relies on them breaks. Wrap a sidebar component in a narrower container and suddenly its internal columns collapse at the wrong width.",[15,19,20,21,25],{},"Responsive grid layouts without media queries solve this by letting the ",[22,23,24],"strong",{},"container width"," — not the viewport — determine when columns reflow. The grid adapts on its own.",[10,27,29],{"id":28},"the-core-pattern-auto-fill-minmax","The Core Pattern: auto-fill + minmax",[31,32,37],"pre",{"className":33,"code":34,"language":35,"meta":36,"style":36},"language-css shiki shiki-themes github-light github-dark",".card-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));\n  gap: 24px;\n}\n","css","",[38,39,40,53,69,112,127],"code",{"__ignoreMap":36},[41,42,45,49],"span",{"class":43,"line":44},"line",1,[41,46,48],{"class":47},"sScJk",".card-grid",[41,50,52],{"class":51},"sVt8B"," {\n",[41,54,56,60,63,66],{"class":43,"line":55},2,[41,57,59],{"class":58},"sj4cs","  display",[41,61,62],{"class":51},": ",[41,64,65],{"class":58},"grid",[41,67,68],{"class":51},";\n",[41,70,72,75,77,80,83,86,89,92,94,97,101,103,106,109],{"class":43,"line":71},3,[41,73,74],{"class":58},"  grid-template-columns",[41,76,62],{"class":51},[41,78,79],{"class":58},"repeat",[41,81,82],{"class":51},"(",[41,84,85],{"class":58},"auto-fill",[41,87,88],{"class":51},", ",[41,90,91],{"class":58},"minmax",[41,93,82],{"class":51},[41,95,96],{"class":58},"280",[41,98,100],{"class":99},"szBVR","px",[41,102,88],{"class":51},[41,104,105],{"class":58},"1",[41,107,108],{"class":99},"fr",[41,110,111],{"class":51},"));\n",[41,113,115,118,120,123,125],{"class":43,"line":114},4,[41,116,117],{"class":58},"  gap",[41,119,62],{"class":51},[41,121,122],{"class":58},"24",[41,124,100],{"class":99},[41,126,68],{"class":51},[41,128,130],{"class":43,"line":129},5,[41,131,132],{"class":51},"}\n",[15,134,135],{},"This one declaration does the work of four breakpoints:",[137,138,139,155],"table",{},[140,141,142],"thead",{},[143,144,145,149,152],"tr",{},[146,147,148],"th",{},"Container Width",[146,150,151],{},"Columns",[146,153,154],{},"How It Works",[156,157,158,170,181,192],"tbody",{},[143,159,160,164,167],{},[161,162,163],"td",{},"1200px",[161,165,166],{},"4 columns",[161,168,169],{},"280px × 4 = 1120px — fits",[143,171,172,175,178],{},[161,173,174],{},"900px",[161,176,177],{},"3 columns",[161,179,180],{},"280px × 3 = 840px — fits",[143,182,183,186,189],{},[161,184,185],{},"600px",[161,187,188],{},"2 columns",[161,190,191],{},"280px × 2 = 560px — fits",[143,193,194,197,200],{},[161,195,196],{},"300px",[161,198,199],{},"1 column",[161,201,202],{},"280px × 1 = 280px — fits",[15,204,205,206,209],{},"The browser calculates: \"How many 280px columns fit in this width? Fill the row, then distribute leftover space as ",[38,207,208],{},"1fr",".\"",[15,211,212,213,216],{},"No ",[38,214,215],{},"@media"," rules. No breakpoint constants. The layout responds to its container.",[10,218,220],{"id":219},"auto-fill-vs-auto-fit","auto-fill vs auto-fit",[15,222,223],{},"The difference matters when you have fewer items than columns:",[31,225,227],{"className":33,"code":226,"language":35,"meta":36,"style":36},"\u002F* auto-fill: creates empty tracks to fill the row *\u002F\ngrid-template-columns: repeat(auto-fill, minmax(200px, 1fr));\n\n\u002F* auto-fit: collapses empty tracks so items stretch *\u002F\ngrid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n",[38,228,229,235,249,255,260],{"__ignoreMap":36},[41,230,231],{"class":43,"line":44},[41,232,234],{"class":233},"sJ8bj","\u002F* auto-fill: creates empty tracks to fill the row *\u002F\n",[41,236,237,241,244,246],{"class":43,"line":55},[41,238,240],{"class":239},"s9eBZ","grid-template-columns",[41,242,243],{"class":51},": repeat(",[41,245,85],{"class":239},[41,247,248],{"class":51},", minmax(200px, 1fr));\n",[41,250,251],{"class":43,"line":71},[41,252,254],{"emptyLinePlaceholder":253},true,"\n",[41,256,257],{"class":43,"line":114},[41,258,259],{"class":233},"\u002F* auto-fit: collapses empty tracks so items stretch *\u002F\n",[41,261,262,264,266,269],{"class":43,"line":129},[41,263,240],{"class":239},[41,265,243],{"class":51},[41,267,268],{"class":239},"auto-fit",[41,270,248],{"class":51},[137,272,273,284],{},[140,274,275],{},[143,276,277,280,282],{},[146,278,279],{},"Scenario",[146,281,85],{},[146,283,268],{},[156,285,286,297],{},[143,287,288,291,294],{},[161,289,290],{},"3 items, space for 5 columns",[161,292,293],{},"3 stretched items + 2 empty tracks",[161,295,296],{},"3 items stretch to fill all space",[143,298,299,302,305],{},[161,300,301],{},"6 items, space for 5 columns",[161,303,304],{},"Same — all items fill naturally",[161,306,304],{},[15,308,309,312,313,315,316,318],{},[22,310,311],{},"Rule of thumb",": Use ",[38,314,268],{}," when items should always expand. Use ",[38,317,85],{}," when you want items to maintain a consistent maximum width.",[10,320,322],{"id":321},"constraining-maximum-width","Constraining Maximum Width",[15,324,325,328,329,332],{},[38,326,327],{},"minmax()"," sets a floor. To also set a ceiling, use ",[38,330,331],{},"min()",":",[31,334,336],{"className":33,"code":335,"language":35,"meta":36,"style":36},".card-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));\n  gap: 24px;\n}\n",[38,337,338,344,354,398,410],{"__ignoreMap":36},[41,339,340,342],{"class":43,"line":44},[41,341,48],{"class":47},[41,343,52],{"class":51},[41,345,346,348,350,352],{"class":43,"line":55},[41,347,59],{"class":58},[41,349,62],{"class":51},[41,351,65],{"class":58},[41,353,68],{"class":51},[41,355,356,358,360,362,364,366,368,370,372,375,377,379,381,383,386,389,392,394,396],{"class":43,"line":71},[41,357,74],{"class":58},[41,359,62],{"class":51},[41,361,79],{"class":58},[41,363,82],{"class":51},[41,365,85],{"class":58},[41,367,88],{"class":51},[41,369,91],{"class":58},[41,371,82],{"class":51},[41,373,374],{"class":58},"min",[41,376,82],{"class":51},[41,378,96],{"class":58},[41,380,100],{"class":99},[41,382,88],{"class":51},[41,384,385],{"class":58},"100",[41,387,388],{"class":99},"%",[41,390,391],{"class":51},"), ",[41,393,105],{"class":58},[41,395,108],{"class":99},[41,397,111],{"class":51},[41,399,400,402,404,406,408],{"class":43,"line":114},[41,401,117],{"class":58},[41,403,62],{"class":51},[41,405,122],{"class":58},[41,407,100],{"class":99},[41,409,68],{"class":51},[41,411,412],{"class":43,"line":129},[41,413,132],{"class":51},[15,415,416,417,420],{},"The ",[38,418,419],{},"min(280px, 100%)"," ensures the column never exceeds the container — preventing overflow on very narrow screens where even 280px is too wide.",[10,422,424],{"id":423},"variable-width-sidebars","Variable-Width Sidebars",[15,426,427],{},"Combine a fixed sidebar with a fluid main area:",[31,429,431],{"className":33,"code":430,"language":35,"meta":36,"style":36},".layout {\n  display: grid;\n  grid-template-columns: minmax(200px, 260px) 1fr;\n  gap: 24px;\n}\n",[38,432,433,440,450,481,493],{"__ignoreMap":36},[41,434,435,438],{"class":43,"line":44},[41,436,437],{"class":47},".layout",[41,439,52],{"class":51},[41,441,442,444,446,448],{"class":43,"line":55},[41,443,59],{"class":58},[41,445,62],{"class":51},[41,447,65],{"class":58},[41,449,68],{"class":51},[41,451,452,454,456,458,460,463,465,467,470,472,475,477,479],{"class":43,"line":71},[41,453,74],{"class":58},[41,455,62],{"class":51},[41,457,91],{"class":58},[41,459,82],{"class":51},[41,461,462],{"class":58},"200",[41,464,100],{"class":99},[41,466,88],{"class":51},[41,468,469],{"class":58},"260",[41,471,100],{"class":99},[41,473,474],{"class":51},") ",[41,476,105],{"class":58},[41,478,108],{"class":99},[41,480,68],{"class":51},[41,482,483,485,487,489,491],{"class":43,"line":114},[41,484,117],{"class":58},[41,486,62],{"class":51},[41,488,122],{"class":58},[41,490,100],{"class":99},[41,492,68],{"class":51},[41,494,495],{"class":43,"line":129},[41,496,132],{"class":51},[15,498,499,500,332],{},"The sidebar stays between 200px and 260px. The main area takes whatever remains. On very narrow screens, you can let the sidebar wrap below using ",[38,501,85],{},[31,503,505],{"className":33,"code":504,"language":35,"meta":36,"style":36},".layout {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\n  gap: 24px;\n}\n",[38,506,507,513,523,554,566],{"__ignoreMap":36},[41,508,509,511],{"class":43,"line":44},[41,510,437],{"class":47},[41,512,52],{"class":51},[41,514,515,517,519,521],{"class":43,"line":55},[41,516,59],{"class":58},[41,518,62],{"class":51},[41,520,65],{"class":58},[41,522,68],{"class":51},[41,524,525,527,529,531,533,535,537,539,541,544,546,548,550,552],{"class":43,"line":71},[41,526,74],{"class":58},[41,528,62],{"class":51},[41,530,79],{"class":58},[41,532,82],{"class":51},[41,534,85],{"class":58},[41,536,88],{"class":51},[41,538,91],{"class":58},[41,540,82],{"class":51},[41,542,543],{"class":58},"300",[41,545,100],{"class":99},[41,547,88],{"class":51},[41,549,105],{"class":58},[41,551,108],{"class":99},[41,553,111],{"class":51},[41,555,556,558,560,562,564],{"class":43,"line":114},[41,557,117],{"class":58},[41,559,62],{"class":51},[41,561,122],{"class":58},[41,563,100],{"class":99},[41,565,68],{"class":51},[41,567,568],{"class":43,"line":129},[41,569,132],{"class":51},[15,571,572],{},"This single rule works for both wide (side-by-side) and narrow (stacked) layouts.",[10,574,576],{"id":575},"container-queries-component-level-responsiveness","Container Queries: Component-Level Responsiveness",[15,578,579],{},"Container queries let components respond to their own container width — not the viewport:",[31,581,583],{"className":33,"code":582,"language":35,"meta":36,"style":36},".card-container {\n  container-type: inline-size;\n}\n\n@container (min-width: 500px) {\n  .card {\n    grid-template-columns: 1fr 1fr;\n  }\n}\n",[38,584,585,592,600,604,608,616,624,643,649],{"__ignoreMap":36},[41,586,587,590],{"class":43,"line":44},[41,588,589],{"class":47},".card-container",[41,591,52],{"class":51},[41,593,594,597],{"class":43,"line":55},[41,595,596],{"class":58},"  container-type",[41,598,599],{"class":51},": inline-size;\n",[41,601,602],{"class":43,"line":71},[41,603,132],{"class":51},[41,605,606],{"class":43,"line":114},[41,607,254],{"emptyLinePlaceholder":253},[41,609,610,613],{"class":43,"line":129},[41,611,612],{"class":99},"@container",[41,614,615],{"class":51}," (min-width: 500px) {\n",[41,617,619,622],{"class":43,"line":618},6,[41,620,621],{"class":47},"  .card",[41,623,52],{"class":51},[41,625,627,630,632,634,636,639,641],{"class":43,"line":626},7,[41,628,629],{"class":58},"    grid-template-columns",[41,631,62],{"class":51},[41,633,105],{"class":58},[41,635,108],{"class":99},[41,637,638],{"class":58}," 1",[41,640,108],{"class":99},[41,642,68],{"class":51},[41,644,646],{"class":43,"line":645},8,[41,647,648],{"class":51},"  }\n",[41,650,652],{"class":43,"line":651},9,[41,653,132],{"class":51},[15,655,656,657,660,661,663],{},"Now a ",[38,658,659],{},".card"," reformats itself based on the ",[38,662,589],{}," width. Put the same card in a sidebar (300px) and it stacks vertically. Put it in the main content area (700px) and it goes side-by-side. Same component, different contexts.",[137,665,666,679],{},[140,667,668],{},[143,669,670,673,676],{},[146,671,672],{},"Approach",[146,674,675],{},"Responds To",[146,677,678],{},"Granularity",[156,680,681,692,703],{},[143,682,683,686,689],{},[161,684,685],{},"Media queries",[161,687,688],{},"Viewport width",[161,690,691],{},"Page-wide",[143,693,694,697,700],{},[161,695,696],{},"auto-fill + minmax",[161,698,699],{},"Available space",[161,701,702],{},"Row-level",[143,704,705,708,711],{},[161,706,707],{},"Container queries",[161,709,710],{},"Container width",[161,712,713],{},"Component-level",[10,715,717],{"id":716},"real-world-pattern-responsive-product-grid","Real-World Pattern: Responsive Product Grid",[31,719,721],{"className":33,"code":720,"language":35,"meta":36,"style":36},".products {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));\n  gap: 20px;\n}\n\n.product-card {\n  display: grid;\n  grid-template-rows: auto 1fr auto;\n  gap: 12px;\n}\n\n.product-card img {\n  aspect-ratio: 4 \u002F 3;\n  object-fit: cover;\n}\n",[38,722,723,730,740,781,794,798,802,809,819,838,852,857,862,872,891,904],{"__ignoreMap":36},[41,724,725,728],{"class":43,"line":44},[41,726,727],{"class":47},".products",[41,729,52],{"class":51},[41,731,732,734,736,738],{"class":43,"line":55},[41,733,59],{"class":58},[41,735,62],{"class":51},[41,737,65],{"class":58},[41,739,68],{"class":51},[41,741,742,744,746,748,750,752,754,756,758,760,762,765,767,769,771,773,775,777,779],{"class":43,"line":71},[41,743,74],{"class":58},[41,745,62],{"class":51},[41,747,79],{"class":58},[41,749,82],{"class":51},[41,751,85],{"class":58},[41,753,88],{"class":51},[41,755,91],{"class":58},[41,757,82],{"class":51},[41,759,374],{"class":58},[41,761,82],{"class":51},[41,763,764],{"class":58},"240",[41,766,100],{"class":99},[41,768,88],{"class":51},[41,770,385],{"class":58},[41,772,388],{"class":99},[41,774,391],{"class":51},[41,776,105],{"class":58},[41,778,108],{"class":99},[41,780,111],{"class":51},[41,782,783,785,787,790,792],{"class":43,"line":114},[41,784,117],{"class":58},[41,786,62],{"class":51},[41,788,789],{"class":58},"20",[41,791,100],{"class":99},[41,793,68],{"class":51},[41,795,796],{"class":43,"line":129},[41,797,132],{"class":51},[41,799,800],{"class":43,"line":618},[41,801,254],{"emptyLinePlaceholder":253},[41,803,804,807],{"class":43,"line":626},[41,805,806],{"class":47},".product-card",[41,808,52],{"class":51},[41,810,811,813,815,817],{"class":43,"line":645},[41,812,59],{"class":58},[41,814,62],{"class":51},[41,816,65],{"class":58},[41,818,68],{"class":51},[41,820,821,824,826,829,831,833,836],{"class":43,"line":651},[41,822,823],{"class":58},"  grid-template-rows",[41,825,62],{"class":51},[41,827,828],{"class":58},"auto",[41,830,638],{"class":58},[41,832,108],{"class":99},[41,834,835],{"class":58}," auto",[41,837,68],{"class":51},[41,839,841,843,845,848,850],{"class":43,"line":840},10,[41,842,117],{"class":58},[41,844,62],{"class":51},[41,846,847],{"class":58},"12",[41,849,100],{"class":99},[41,851,68],{"class":51},[41,853,855],{"class":43,"line":854},11,[41,856,132],{"class":51},[41,858,860],{"class":43,"line":859},12,[41,861,254],{"emptyLinePlaceholder":253},[41,863,865,867,870],{"class":43,"line":864},13,[41,866,806],{"class":47},[41,868,869],{"class":239}," img",[41,871,52],{"class":51},[41,873,875,878,880,883,886,889],{"class":43,"line":874},14,[41,876,877],{"class":58},"  aspect-ratio",[41,879,62],{"class":51},[41,881,882],{"class":58},"4",[41,884,885],{"class":51}," \u002F ",[41,887,888],{"class":58},"3",[41,890,68],{"class":51},[41,892,894,897,899,902],{"class":43,"line":893},15,[41,895,896],{"class":58},"  object-fit",[41,898,62],{"class":51},[41,900,901],{"class":58},"cover",[41,903,68],{"class":51},[41,905,907],{"class":43,"line":906},16,[41,908,132],{"class":51},[15,910,911,912,915],{},"This layout adapts from 1 to 5 columns without any media query. The ",[38,913,914],{},"aspect-ratio"," property keeps images proportional at every size. The card's row-based internal grid keeps the button at the bottom regardless of description length.",[10,917,919],{"id":918},"when-you-still-need-media-queries","When You Still Need Media Queries",[15,921,922],{},"Not everything can be done without breakpoints:",[924,925,926,933,939],"ul",{},[927,928,929,932],"li",{},[22,930,931],{},"Typography shifts",": Changing from 16px body to 20px body at wider viewports",[927,934,935,938],{},[22,936,937],{},"Navigation patterns",": Switching from hamburger menu to horizontal nav",[927,940,941,944],{},[22,942,943],{},"Content decisions",": Showing or hiding secondary sections",[15,946,947],{},"The goal is not to eliminate media queries entirely — it is to reduce them to the few places where they genuinely add value.",[10,949,951],{"id":950},"key-takeaways","Key Takeaways",[924,953,954,960,968,978,981],{},[927,955,956,959],{},[38,957,958],{},"repeat(auto-fill, minmax(N, 1fr))"," creates responsive columns with zero breakpoints",[927,961,962,964,965,967],{},[38,963,268],{}," collapses empty tracks; ",[38,966,85],{}," preserves them",[927,969,970,971,974,975,977],{},"Use ",[38,972,973],{},"min(N, 100%)"," inside ",[38,976,327],{}," to prevent overflow on small screens",[927,979,980],{},"Container queries give components their own responsive behavior",[927,982,983],{},"Reserve media queries for typography and navigation — not column layout",[10,985,987],{"id":986},"try-it-yourself","Try It Yourself",[15,989,990,991,996,997,999,1000,1002],{},"Experiment with responsive grid columns using our ",[992,993,995],"a",{"href":994},"\u002Ftools\u002Fcss-grid","CSS Grid Generator",". Set columns to ",[38,998,85],{}," with ",[38,1001,91],{}," and watch the layout adapt as you resize.",[1004,1005,1006],"style",{},"html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}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 .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}",{"title":36,"searchDepth":55,"depth":55,"links":1008},[1009,1010,1011,1012,1013,1014,1015,1016,1017,1018],{"id":12,"depth":55,"text":13},{"id":28,"depth":55,"text":29},{"id":219,"depth":55,"text":220},{"id":321,"depth":55,"text":322},{"id":423,"depth":55,"text":424},{"id":575,"depth":55,"text":576},{"id":716,"depth":55,"text":717},{"id":918,"depth":55,"text":919},{"id":950,"depth":55,"text":951},{"id":986,"depth":55,"text":987},"2026-05-28","Build responsive CSS Grid layouts that adapt to any screen size using auto-fill, minmax, and container queries — no breakpoint needed.","md",{"immutable":253},"\u002Fguides\u002Fresponsive-grid-no-media-queries",{"title":5,"description":1020},"guides\u002Fresponsive-grid-no-media-queries","z6B683obBEryc8PjAxfnsBK_CAcaU4YH-85a2PqnPUQ",1780401336565]