[{"data":1,"prerenderedAt":761},["ShallowReactive",2],{"guide-css-grid-responsive-layouts":3},{"id":4,"title":5,"body":6,"date":752,"description":753,"extension":754,"meta":755,"navigation":248,"path":756,"readingTime":757,"seo":758,"stem":759,"__hash__":760},"guides\u002Fguides\u002Fcss-grid-responsive-layouts.md","Responsive Grid Layouts Without Media Queries",{"type":7,"value":8,"toc":737},"minimark",[9,14,18,21,25,45,145,148,171,174,178,181,219,265,274,278,284,330,333,337,340,399,406,410,415,484,488,558,562,565,640,643,647,683,687,721,725,733],[10,11,13],"h2",{"id":12},"the-problem-with-media-queries","The Problem With Media Queries",[15,16,17],"p",{},"Traditional responsive grids use breakpoints: at 768px switch to two columns, at 1024px switch to three. This approach ties your layout to specific viewport widths instead of the available space. Components break when placed inside narrower containers, and every new device size tempts you to add another breakpoint.",[15,19,20],{},"CSS Grid offers an alternative: let the grid itself decide how many columns fit, based on a minimum column width. No media queries required.",[10,22,24],{"id":23},"therepeat-minmaxpattern","Therepeat() + minmax()Pattern",[15,26,27,28,32,33,36,37,40,41,44],{},"The core technique combines ",[29,30,31],"code",{},"repeat()",", ",[29,34,35],{},"auto-fit"," (or ",[29,38,39],{},"auto-fill","), and ",[29,42,43],{},"minmax()",":",[46,47,52],"pre",{"className":48,"code":49,"language":50,"meta":51,"style":51},"language-css shiki shiki-themes github-light github-dark",".grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\n  gap: 24px;\n}\n","css","",[29,53,54,67,83,124,139],{"__ignoreMap":51},[55,56,59,63],"span",{"class":57,"line":58},"line",1,[55,60,62],{"class":61},"sScJk",".grid",[55,64,66],{"class":65},"sVt8B"," {\n",[55,68,70,74,77,80],{"class":57,"line":69},2,[55,71,73],{"class":72},"sj4cs","  display",[55,75,76],{"class":65},": ",[55,78,79],{"class":72},"grid",[55,81,82],{"class":65},";\n",[55,84,86,89,91,94,97,99,101,104,106,109,113,115,118,121],{"class":57,"line":85},3,[55,87,88],{"class":72},"  grid-template-columns",[55,90,76],{"class":65},[55,92,93],{"class":72},"repeat",[55,95,96],{"class":65},"(",[55,98,35],{"class":72},[55,100,32],{"class":65},[55,102,103],{"class":72},"minmax",[55,105,96],{"class":65},[55,107,108],{"class":72},"280",[55,110,112],{"class":111},"szBVR","px",[55,114,32],{"class":65},[55,116,117],{"class":72},"1",[55,119,120],{"class":111},"fr",[55,122,123],{"class":65},"));\n",[55,125,127,130,132,135,137],{"class":57,"line":126},4,[55,128,129],{"class":72},"  gap",[55,131,76],{"class":65},[55,133,134],{"class":72},"24",[55,136,112],{"class":111},[55,138,82],{"class":65},[55,140,142],{"class":57,"line":141},5,[55,143,144],{"class":65},"}\n",[15,146,147],{},"Here is what happens:",[149,150,151,161,168],"ul",{},[152,153,154,160],"li",{},[155,156,157],"strong",{},[29,158,159],{},"minmax(280px, 1fr)"," — each column is at least 280px wide but can grow to fill available space.",[152,162,163,167],{},[155,164,165],{},[29,166,35],{}," — the browser creates as many columns as fit, collapsing any empty tracks.",[152,169,170],{},"The grid automatically wraps items onto new rows when columns cannot fit.",[15,172,173],{},"On a 1200px viewport, five columns might fit. On a 600px viewport, two columns fit. On 320px, one column. All without a single media query.",[10,175,177],{"id":176},"auto-fit-vs-auto-fill","auto-fit vs auto-fill",[15,179,180],{},"The two keywords behave identically when all grid cells are occupied. The difference appears with fewer items than available columns:",[182,183,184,197],"table",{},[185,186,187],"thead",{},[188,189,190,194],"tr",{},[191,192,193],"th",{},"Keyword",[191,195,196],{},"Behavior with empty tracks",[198,199,200,210],"tbody",{},[188,201,202,207],{},[203,204,205],"td",{},[29,206,39],{},[203,208,209],{},"Keeps empty tracks as reserved space; items stay at minimum width",[188,211,212,216],{},[203,213,214],{},[29,215,35],{},[203,217,218],{},"Collapses empty tracks to zero width; items stretch to fill the row",[46,220,222],{"className":48,"code":221,"language":50,"meta":51,"style":51},"\u002F* Spreads 3 items across the full width *\u002F\ngrid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n\n\u002F* Keeps 3 items at 250px each, empty space stays on the right *\u002F\ngrid-template-columns: repeat(auto-fill, minmax(250px, 1fr));\n",[29,223,224,230,244,250,255],{"__ignoreMap":51},[55,225,226],{"class":57,"line":58},[55,227,229],{"class":228},"sJ8bj","\u002F* Spreads 3 items across the full width *\u002F\n",[55,231,232,236,239,241],{"class":57,"line":69},[55,233,235],{"class":234},"s9eBZ","grid-template-columns",[55,237,238],{"class":65},": repeat(",[55,240,35],{"class":234},[55,242,243],{"class":65},", minmax(250px, 1fr));\n",[55,245,246],{"class":57,"line":85},[55,247,249],{"emptyLinePlaceholder":248},true,"\n",[55,251,252],{"class":57,"line":126},[55,253,254],{"class":228},"\u002F* Keeps 3 items at 250px each, empty space stays on the right *\u002F\n",[55,256,257,259,261,263],{"class":57,"line":141},[55,258,235],{"class":234},[55,260,238],{"class":65},[55,262,39],{"class":234},[55,264,243],{"class":65},[15,266,267,268,270,271,273],{},"Most card grids and content layouts prefer ",[29,269,35],{}," because items stretch to fill the row evenly. Use ",[29,272,39],{}," when you want items to maintain their minimum size and keep consistent widths.",[10,275,277],{"id":276},"choosing-the-minimum-width","Choosing the Minimum Width",[15,279,280,281,283],{},"The minimum value in ",[29,282,43],{}," acts as your implicit breakpoint. It determines when items wrap to the next row.",[182,285,286,296],{},[185,287,288],{},[188,289,290,293],{},[191,291,292],{},"Min width",[191,294,295],{},"Typical use case",[198,297,298,306,314,322],{},[188,299,300,303],{},[203,301,302],{},"200–240px",[203,304,305],{},"Small cards, tags, thumbnails",[188,307,308,311],{},[203,309,310],{},"280–320px",[203,312,313],{},"Standard content cards",[188,315,316,319],{},[203,317,318],{},"400–480px",[203,320,321],{},"Feature cards, product tiles",[188,323,324,327],{},[203,325,326],{},"600px+",[203,328,329],{},"Sidebar + content layouts",[15,331,332],{},"A common mistake is setting the minimum too low. At 150px, items wrap very late and look cramped on medium screens. At 400px, a single column kicks in too early on tablets. Test your minimum at the actual widths your users visit.",[10,334,336],{"id":335},"handling-single-column-edge-cases","Handling Single-Column Edge Cases",[15,338,339],{},"When the container is narrower than your minimum width — for instance, a 280px minimum on a 260px container — the grid overflows. Prevent this with a small tweak:",[46,341,343],{"className":48,"code":342,"language":50,"meta":51,"style":51},".grid {\n  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));\n}\n",[29,344,345,351,395],{"__ignoreMap":51},[55,346,347,349],{"class":57,"line":58},[55,348,62],{"class":61},[55,350,66],{"class":65},[55,352,353,355,357,359,361,363,365,367,369,372,374,376,378,380,383,386,389,391,393],{"class":57,"line":69},[55,354,88],{"class":72},[55,356,76],{"class":65},[55,358,93],{"class":72},[55,360,96],{"class":65},[55,362,35],{"class":72},[55,364,32],{"class":65},[55,366,103],{"class":72},[55,368,96],{"class":65},[55,370,371],{"class":72},"min",[55,373,96],{"class":65},[55,375,108],{"class":72},[55,377,112],{"class":111},[55,379,32],{"class":65},[55,381,382],{"class":72},"100",[55,384,385],{"class":111},"%",[55,387,388],{"class":65},"), ",[55,390,117],{"class":72},[55,392,120],{"class":111},[55,394,123],{"class":65},[55,396,397],{"class":57,"line":85},[55,398,144],{"class":65},[15,400,401,402,405],{},"The ",[29,403,404],{},"min()"," function ensures the column width never exceeds the container, gracefully collapsing to a single column without horizontal scrolling.",[10,407,409],{"id":408},"building-real-layouts","Building Real Layouts",[411,412,414],"h3",{"id":413},"card-grid","Card Grid",[46,416,418],{"className":48,"code":417,"language":50,"meta":51,"style":51},".card-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n  gap: 24px;\n}\n",[29,419,420,427,437,468,480],{"__ignoreMap":51},[55,421,422,425],{"class":57,"line":58},[55,423,424],{"class":61},".card-grid",[55,426,66],{"class":65},[55,428,429,431,433,435],{"class":57,"line":69},[55,430,73],{"class":72},[55,432,76],{"class":65},[55,434,79],{"class":72},[55,436,82],{"class":65},[55,438,439,441,443,445,447,449,451,453,455,458,460,462,464,466],{"class":57,"line":85},[55,440,88],{"class":72},[55,442,76],{"class":65},[55,444,93],{"class":72},[55,446,96],{"class":65},[55,448,35],{"class":72},[55,450,32],{"class":65},[55,452,103],{"class":72},[55,454,96],{"class":65},[55,456,457],{"class":72},"300",[55,459,112],{"class":111},[55,461,32],{"class":65},[55,463,117],{"class":72},[55,465,120],{"class":111},[55,467,123],{"class":65},[55,469,470,472,474,476,478],{"class":57,"line":126},[55,471,129],{"class":72},[55,473,76],{"class":65},[55,475,134],{"class":72},[55,477,112],{"class":111},[55,479,82],{"class":65},[55,481,482],{"class":57,"line":141},[55,483,144],{"class":65},[411,485,487],{"id":486},"image-gallery","Image Gallery",[46,489,491],{"className":48,"code":490,"language":50,"meta":51,"style":51},".gallery {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n  gap: 8px;\n}\n",[29,492,493,500,510,541,554],{"__ignoreMap":51},[55,494,495,498],{"class":57,"line":58},[55,496,497],{"class":61},".gallery",[55,499,66],{"class":65},[55,501,502,504,506,508],{"class":57,"line":69},[55,503,73],{"class":72},[55,505,76],{"class":65},[55,507,79],{"class":72},[55,509,82],{"class":65},[55,511,512,514,516,518,520,522,524,526,528,531,533,535,537,539],{"class":57,"line":85},[55,513,88],{"class":72},[55,515,76],{"class":65},[55,517,93],{"class":72},[55,519,96],{"class":65},[55,521,35],{"class":72},[55,523,32],{"class":65},[55,525,103],{"class":72},[55,527,96],{"class":65},[55,529,530],{"class":72},"200",[55,532,112],{"class":111},[55,534,32],{"class":65},[55,536,117],{"class":72},[55,538,120],{"class":111},[55,540,123],{"class":65},[55,542,543,545,547,550,552],{"class":57,"line":126},[55,544,129],{"class":72},[55,546,76],{"class":65},[55,548,549],{"class":72},"8",[55,551,112],{"class":111},[55,553,82],{"class":65},[55,555,556],{"class":57,"line":141},[55,557,144],{"class":65},[411,559,561],{"id":560},"mixed-width-dashboard","Mixed-Width Dashboard",[15,563,564],{},"For layouts where one column needs a fixed width and the rest flex, combine fixed and flexible tracks:",[46,566,568],{"className":48,"code":567,"language":50,"meta":51,"style":51},".dashboard {\n  display: grid;\n  grid-template-columns: 240px repeat(auto-fit, minmax(300px, 1fr));\n  gap: 16px;\n}\n",[29,569,570,577,587,623,636],{"__ignoreMap":51},[55,571,572,575],{"class":57,"line":58},[55,573,574],{"class":61},".dashboard",[55,576,66],{"class":65},[55,578,579,581,583,585],{"class":57,"line":69},[55,580,73],{"class":72},[55,582,76],{"class":65},[55,584,79],{"class":72},[55,586,82],{"class":65},[55,588,589,591,593,596,598,601,603,605,607,609,611,613,615,617,619,621],{"class":57,"line":85},[55,590,88],{"class":72},[55,592,76],{"class":65},[55,594,595],{"class":72},"240",[55,597,112],{"class":111},[55,599,600],{"class":72}," repeat",[55,602,96],{"class":65},[55,604,35],{"class":72},[55,606,32],{"class":65},[55,608,103],{"class":72},[55,610,96],{"class":65},[55,612,457],{"class":72},[55,614,112],{"class":111},[55,616,32],{"class":65},[55,618,117],{"class":72},[55,620,120],{"class":111},[55,622,123],{"class":65},[55,624,625,627,629,632,634],{"class":57,"line":126},[55,626,129],{"class":72},[55,628,76],{"class":65},[55,630,631],{"class":72},"16",[55,633,112],{"class":111},[55,635,82],{"class":65},[55,637,638],{"class":57,"line":141},[55,639,144],{"class":65},[15,641,642],{},"The first column stays at 240px (sidebar), while remaining columns auto-flow responsively.",[10,644,646],{"id":645},"limitations","Limitations",[149,648,649,665,674],{},[152,650,651,654,655,657,658,660,661,664],{},[155,652,653],{},"No row-based responsiveness"," — ",[29,656,35],{}," and ",[29,659,39],{}," only affect columns. Row heights are determined by content unless you set ",[29,662,663],{},"grid-auto-rows",".",[152,666,667,670,671,673],{},[155,668,669],{},"No per-item breakpoints"," — you cannot specify \"this specific item wraps earlier.\" All items follow the same ",[29,672,43],{}," rule.",[152,675,676,654,679,682],{},[155,677,678],{},"Fixed gutters",[29,680,681],{},"gap"," does not collapse, so very narrow containers may overflow if the gap plus minimum width exceeds the viewport.",[10,684,686],{"id":685},"key-takeaways","Key Takeaways",[149,688,689,695,703,708,715,718],{},[152,690,691,694],{},[29,692,693],{},"repeat(auto-fit, minmax(Npx, 1fr))"," creates responsive columns without media queries.",[152,696,697,699,700,702],{},[29,698,35],{}," collapses empty tracks; ",[29,701,39],{}," preserves them.",[152,704,280,705,707],{},[29,706,43],{}," acts as your implicit breakpoint.",[152,709,710,711,714],{},"Use ",[29,712,713],{},"min(Npx, 100%)"," to prevent overflow on extremely narrow containers.",[152,716,717],{},"This technique only handles column responsiveness — row heights still need explicit sizing.",[152,719,720],{},"Combine fixed and flexible tracks for mixed-width layouts like dashboards.",[10,722,724],{"id":723},"try-it-yourself","Try It Yourself",[15,726,727,728,664],{},"Build responsive grids with auto-fit and minmax() interactively using the ",[729,730,732],"a",{"href":731},"\u002Ftools\u002Fcss-grid","CSS Grid Generator",[734,735,736],"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":51,"searchDepth":69,"depth":69,"links":738},[739,740,741,742,743,744,749,750,751],{"id":12,"depth":69,"text":13},{"id":23,"depth":69,"text":24},{"id":176,"depth":69,"text":177},{"id":276,"depth":69,"text":277},{"id":335,"depth":69,"text":336},{"id":408,"depth":69,"text":409,"children":745},[746,747,748],{"id":413,"depth":85,"text":414},{"id":486,"depth":85,"text":487},{"id":560,"depth":85,"text":561},{"id":645,"depth":69,"text":646},{"id":685,"depth":69,"text":686},{"id":723,"depth":69,"text":724},"2026-05-28","Use auto-fit, minmax(), and auto-fill to create responsive grids that adapt to any screen.","md",{"immutable":248},"\u002Fguides\u002Fcss-grid-responsive-layouts",6,{"title":5,"description":753},"guides\u002Fcss-grid-responsive-layouts","JugmGiX3lUFL6iYZdTb2ZCfXRC6j2Y9pRkRvVwzdoRw",1780401332923]