[{"data":1,"prerenderedAt":1323},["ShallowReactive",2],{"page-\u002Fcss\u002F08-css-grid":3},{"id":4,"title":5,"body":6,"description":1315,"extension":1316,"meta":1317,"navigation":1318,"path":1319,"seo":1320,"stem":1321,"__hash__":1322},"content\u002Fcss\u002F08-css-grid.md","08 — CSS Grid: Two-Dimensional Layout & Track Resolution",{"type":7,"value":8,"toc":1296},"minimark",[9,13,47,58,244,255,347,355,412,476,483,657,661,763,770,856,860,944,948,1052,1056,1105,1109,1204,1208,1253,1292],[10,11,5],"h1",{"id":12},"_08-css-grid-two-dimensional-layout-track-resolution",[14,15,16,17,21,22,26,27,30,31,34,35,38,39,42,43,46],"p",{},"Grid lays items in rows ",[18,19,20],"em",{},"and"," columns simultaneously. The engine resolves track sizes from ",[23,24,25],"code",{},"grid-template-columns","\u002F",[23,28,29],{},"rows",", distributes free space by ",[23,32,33],{},"fr",", and places items into tracks. The one bug: ",[23,36,37],{},"1fr"," has an implicit ",[23,40,41],{},"minmax(auto, 1fr)"," minimum — content with a large intrinsic width won't shrink, squeezing other tracks. ",[23,44,45],{},"minmax(0, 1fr)"," is the fix.",[48,49,51,52,54,55],"h2",{"id":50},"track-sizing-fr-and-minmax","Track Sizing — ",[23,53,33],{}," and ",[23,56,57],{},"minmax()",[59,60,62],"code-wrapper",{"language":61},"css",[63,64,68],"pre",{"className":65,"code":66,"language":61,"meta":67,"style":67},"language-css shiki shiki-themes github-light github-dark",".grid {\n  display: grid;\n  \u002F* fr distributes FREE space (after fixed tracks and content-min). Like flex-grow for tracks. *\u002F\n  grid-template-columns: 200px 1fr;        \u002F* fixed 200px + fluid remainder *\u002F\n  grid-template-columns: 1fr 2fr;          \u002F* 1:2 ratio *\u002F\n  grid-template-columns: repeat(3, 1fr);   \u002F* three equal columns *\u002F\n  \u002F* ⚠️ 1fr = minmax(auto, 1fr). The \"auto\" minimum = content's intrinsic size.\n     A column with long content won't shrink below it → squeezes other columns. *\u002F\n  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);  \u002F* ✓ allow shrinking below content *\u002F\n}\n","",[23,69,70,83,99,106,132,155,184,190,196,238],{"__ignoreMap":67},[71,72,75,79],"span",{"class":73,"line":74},"line",1,[71,76,78],{"class":77},"sIsaT",".grid",[71,80,82],{"class":81},"ssxIu"," {\n",[71,84,86,90,93,96],{"class":73,"line":85},2,[71,87,89],{"class":88},"snvgF","  display",[71,91,92],{"class":81},": ",[71,94,95],{"class":88},"grid",[71,97,98],{"class":81},";\n",[71,100,102],{"class":73,"line":101},3,[71,103,105],{"class":104},"sdCPZ","  \u002F* fr distributes FREE space (after fixed tracks and content-min). Like flex-grow for tracks. *\u002F\n",[71,107,109,112,114,117,121,124,126,129],{"class":73,"line":108},4,[71,110,111],{"class":88},"  grid-template-columns",[71,113,92],{"class":81},[71,115,116],{"class":88},"200",[71,118,120],{"class":119},"svdQ7","px",[71,122,123],{"class":88}," 1",[71,125,33],{"class":119},[71,127,128],{"class":81},";        ",[71,130,131],{"class":104},"\u002F* fixed 200px + fluid remainder *\u002F\n",[71,133,135,137,139,142,144,147,149,152],{"class":73,"line":134},5,[71,136,111],{"class":88},[71,138,92],{"class":81},[71,140,141],{"class":88},"1",[71,143,33],{"class":119},[71,145,146],{"class":88}," 2",[71,148,33],{"class":119},[71,150,151],{"class":81},";          ",[71,153,154],{"class":104},"\u002F* 1:2 ratio *\u002F\n",[71,156,158,160,162,165,168,171,174,176,178,181],{"class":73,"line":157},6,[71,159,111],{"class":88},[71,161,92],{"class":81},[71,163,164],{"class":88},"repeat",[71,166,167],{"class":81},"(",[71,169,170],{"class":88},"3",[71,172,173],{"class":81},", ",[71,175,141],{"class":88},[71,177,33],{"class":119},[71,179,180],{"class":81},");   ",[71,182,183],{"class":104},"\u002F* three equal columns *\u002F\n",[71,185,187],{"class":73,"line":186},7,[71,188,189],{"class":104},"  \u002F* ⚠️ 1fr = minmax(auto, 1fr). The \"auto\" minimum = content's intrinsic size.\n",[71,191,193],{"class":73,"line":192},8,[71,194,195],{"class":104},"     A column with long content won't shrink below it → squeezes other columns. *\u002F\n",[71,197,199,201,203,206,208,211,213,215,217,220,222,224,226,228,230,232,235],{"class":73,"line":198},9,[71,200,111],{"class":88},[71,202,92],{"class":81},[71,204,205],{"class":88},"minmax",[71,207,167],{"class":81},[71,209,210],{"class":88},"0",[71,212,173],{"class":81},[71,214,141],{"class":88},[71,216,33],{"class":119},[71,218,219],{"class":81},") ",[71,221,205],{"class":88},[71,223,167],{"class":81},[71,225,210],{"class":88},[71,227,173],{"class":81},[71,229,141],{"class":88},[71,231,33],{"class":119},[71,233,234],{"class":81},");  ",[71,236,237],{"class":104},"\u002F* ✓ allow shrinking below content *\u002F\n",[71,239,241],{"class":73,"line":240},10,[71,242,243],{"class":81},"}\n",[48,245,247,250,251,254],{"id":246},"auto-fit-vs-auto-fill-the-responsive-grid",[23,248,249],{},"auto-fit"," vs ",[23,252,253],{},"auto-fill"," — the responsive grid",[59,256,257],{"language":61},[63,258,260],{"className":65,"code":259,"language":61,"meta":67,"style":67},"\u002F* auto-fill: creates as many tracks as fit. EMPTY tracks REMAIN (space goes to them). *\u002F\n\u002F* auto-fit: creates as many tracks as fit. EMPTY tracks COLLAPSE → existing items STRETCH to fill. *\u002F\n.cards {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));  \u002F* responsive, no media queries *\u002F\n  gap: 1rem;\n}\n\u002F* Result: as many 250px+ columns as fit; cards stretch to fill the row when fewer. *\u002F\n",[23,261,262,267,272,279,289,324,338,342],{"__ignoreMap":67},[71,263,264],{"class":73,"line":74},[71,265,266],{"class":104},"\u002F* auto-fill: creates as many tracks as fit. EMPTY tracks REMAIN (space goes to them). *\u002F\n",[71,268,269],{"class":73,"line":85},[71,270,271],{"class":104},"\u002F* auto-fit: creates as many tracks as fit. EMPTY tracks COLLAPSE → existing items STRETCH to fill. *\u002F\n",[71,273,274,277],{"class":73,"line":101},[71,275,276],{"class":77},".cards",[71,278,82],{"class":81},[71,280,281,283,285,287],{"class":73,"line":108},[71,282,89],{"class":88},[71,284,92],{"class":81},[71,286,95],{"class":88},[71,288,98],{"class":81},[71,290,291,293,295,297,299,301,303,305,307,310,312,314,316,318,321],{"class":73,"line":134},[71,292,111],{"class":88},[71,294,92],{"class":81},[71,296,164],{"class":88},[71,298,167],{"class":81},[71,300,249],{"class":88},[71,302,173],{"class":81},[71,304,205],{"class":88},[71,306,167],{"class":81},[71,308,309],{"class":88},"250",[71,311,120],{"class":119},[71,313,173],{"class":81},[71,315,141],{"class":88},[71,317,33],{"class":119},[71,319,320],{"class":81},"));  ",[71,322,323],{"class":104},"\u002F* responsive, no media queries *\u002F\n",[71,325,326,329,331,333,336],{"class":73,"line":157},[71,327,328],{"class":88},"  gap",[71,330,92],{"class":81},[71,332,141],{"class":88},[71,334,335],{"class":119},"rem",[71,337,98],{"class":81},[71,339,340],{"class":73,"line":186},[71,341,243],{"class":81},[71,343,344],{"class":73,"line":192},[71,345,346],{"class":104},"\u002F* Result: as many 250px+ columns as fit; cards stretch to fill the row when fewer. *\u002F\n",[348,349,351,352,354],"h3",{"id":350},"anti-pattern-1fr-with-long-content-squeezes-columns","Anti-pattern: ",[23,353,37],{}," with long content squeezes columns",[59,356,357],{"language":61},[63,358,360],{"className":65,"code":359,"language":61,"meta":67,"style":67},"\u002F* ❌ 1fr has min=auto (content size). Long text in col1 won't shrink → col2 squeezed. *\u002F\n.grid { display: grid; grid-template-columns: 1fr 1fr; }\n.col1 { \u002F* long text *\u002F }\n",[23,361,362,367,399],{"__ignoreMap":67},[71,363,364],{"class":73,"line":74},[71,365,366],{"class":104},"\u002F* ❌ 1fr has min=auto (content size). Long text in col1 won't shrink → col2 squeezed. *\u002F\n",[71,368,369,371,374,377,379,381,384,386,388,390,392,394,396],{"class":73,"line":85},[71,370,78],{"class":77},[71,372,373],{"class":81}," { ",[71,375,376],{"class":88},"display",[71,378,92],{"class":81},[71,380,95],{"class":88},[71,382,383],{"class":81},"; ",[71,385,25],{"class":88},[71,387,92],{"class":81},[71,389,141],{"class":88},[71,391,33],{"class":119},[71,393,123],{"class":88},[71,395,33],{"class":119},[71,397,398],{"class":81},"; }\n",[71,400,401,404,406,409],{"class":73,"line":101},[71,402,403],{"class":77},".col1",[71,405,373],{"class":81},[71,407,408],{"class":104},"\u002F* long text *\u002F",[71,410,411],{"class":81}," }\n",[59,413,414],{"language":61},[63,415,417],{"className":65,"code":416,"language":61,"meta":67,"style":67},"\u002F* ✓ minmax(0, 1fr): min=0, so the track CAN shrink below content → equal columns. *\u002F\n.grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }\n\u002F* Or: min-width:0 on items + overflow-wrap: break-word. *\u002F\n",[23,418,419,424,471],{"__ignoreMap":67},[71,420,421],{"class":73,"line":74},[71,422,423],{"class":104},"\u002F* ✓ minmax(0, 1fr): min=0, so the track CAN shrink below content → equal columns. *\u002F\n",[71,425,426,428,430,432,434,436,438,440,442,444,446,448,450,452,454,456,458,460,462,464,466,468],{"class":73,"line":85},[71,427,78],{"class":77},[71,429,373],{"class":81},[71,431,376],{"class":88},[71,433,92],{"class":81},[71,435,95],{"class":88},[71,437,383],{"class":81},[71,439,25],{"class":88},[71,441,92],{"class":81},[71,443,205],{"class":88},[71,445,167],{"class":81},[71,447,210],{"class":88},[71,449,173],{"class":81},[71,451,141],{"class":88},[71,453,33],{"class":119},[71,455,219],{"class":81},[71,457,205],{"class":88},[71,459,167],{"class":81},[71,461,210],{"class":88},[71,463,173],{"class":81},[71,465,141],{"class":88},[71,467,33],{"class":119},[71,469,470],{"class":81},"); }\n",[71,472,473],{"class":73,"line":101},[71,474,475],{"class":104},"\u002F* Or: min-width:0 on items + overflow-wrap: break-word. *\u002F\n",[48,477,479,482],{"id":478},"grid-template-areas-visual-layout-in-css",[23,480,481],{},"grid-template-areas"," — visual layout in CSS",[59,484,485],{"language":61},[63,486,488],{"className":65,"code":487,"language":61,"meta":67,"style":67},".layout {\n  display: grid;\n  grid-template-areas:\n    \"header header\"\n    \"sidebar content\"\n    \"footer  footer\";\n  grid-template-columns: 200px 1fr;\n  grid-template-rows: auto 1fr auto;\n  min-block-size: 100dvh;\n}\n.header  { grid-area: header; }\n.sidebar { grid-area: sidebar; }\n.content { grid-area: content; }\n.footer  { grid-area: footer; }\n\u002F* Rules: each area must be a CONTIGUOUS RECTANGLE (no L-shapes). \".\" = empty cell.\n   All rows must have the same number of cells. Self-documenting layout. *\u002F\n",[23,489,490,497,507,515,521,526,533,549,568,583,587,602,615,632,645,651],{"__ignoreMap":67},[71,491,492,495],{"class":73,"line":74},[71,493,494],{"class":77},".layout",[71,496,82],{"class":81},[71,498,499,501,503,505],{"class":73,"line":85},[71,500,89],{"class":88},[71,502,92],{"class":81},[71,504,95],{"class":88},[71,506,98],{"class":81},[71,508,509,512],{"class":73,"line":101},[71,510,511],{"class":88},"  grid-template-areas",[71,513,514],{"class":81},":\n",[71,516,517],{"class":73,"line":108},[71,518,520],{"class":519},"sJ6F3","    \"header header\"\n",[71,522,523],{"class":73,"line":134},[71,524,525],{"class":519},"    \"sidebar content\"\n",[71,527,528,531],{"class":73,"line":157},[71,529,530],{"class":519},"    \"footer  footer\"",[71,532,98],{"class":81},[71,534,535,537,539,541,543,545,547],{"class":73,"line":186},[71,536,111],{"class":88},[71,538,92],{"class":81},[71,540,116],{"class":88},[71,542,120],{"class":119},[71,544,123],{"class":88},[71,546,33],{"class":119},[71,548,98],{"class":81},[71,550,551,554,556,559,561,563,566],{"class":73,"line":192},[71,552,553],{"class":88},"  grid-template-rows",[71,555,92],{"class":81},[71,557,558],{"class":88},"auto",[71,560,123],{"class":88},[71,562,33],{"class":119},[71,564,565],{"class":88}," auto",[71,567,98],{"class":81},[71,569,570,573,575,578,581],{"class":73,"line":198},[71,571,572],{"class":88},"  min-block-size",[71,574,92],{"class":81},[71,576,577],{"class":88},"100",[71,579,580],{"class":119},"dvh",[71,582,98],{"class":81},[71,584,585],{"class":73,"line":240},[71,586,243],{"class":81},[71,588,590,593,596,599],{"class":73,"line":589},11,[71,591,592],{"class":77},".header",[71,594,595],{"class":81},"  { ",[71,597,598],{"class":88},"grid-area",[71,600,601],{"class":81},": header; }\n",[71,603,605,608,610,612],{"class":73,"line":604},12,[71,606,607],{"class":77},".sidebar",[71,609,373],{"class":81},[71,611,598],{"class":88},[71,613,614],{"class":81},": sidebar; }\n",[71,616,618,621,623,625,627,630],{"class":73,"line":617},13,[71,619,620],{"class":77},".content",[71,622,373],{"class":81},[71,624,598],{"class":88},[71,626,92],{"class":81},[71,628,629],{"class":88},"content",[71,631,398],{"class":81},[71,633,635,638,640,642],{"class":73,"line":634},14,[71,636,637],{"class":77},".footer",[71,639,595],{"class":81},[71,641,598],{"class":88},[71,643,644],{"class":81},": footer; }\n",[71,646,648],{"class":73,"line":647},15,[71,649,650],{"class":104},"\u002F* Rules: each area must be a CONTIGUOUS RECTANGLE (no L-shapes). \".\" = empty cell.\n",[71,652,654],{"class":73,"line":653},16,[71,655,656],{"class":104},"   All rows must have the same number of cells. Self-documenting layout. *\u002F\n",[48,658,660],{"id":659},"item-placement-by-line-span-name","Item Placement — by line, span, name",[59,662,663],{"language":61},[63,664,666],{"className":65,"code":665,"language":61,"meta":67,"style":67},".item {\n  grid-column: 1 \u002F 3;        \u002F* from line 1 to line 3 (spans 2 tracks). Lines are 1-indexed. *\u002F\n  grid-column: 1 \u002F span 2;    \u002F* same: span 2 tracks from line 1 *\u002F\n  grid-column: -1;            \u002F* -1 = the LAST line (counts from the end) *\u002F\n  grid-row: 1 \u002F 2;\n}\n\u002F* Named lines via [name] in grid-template-columns: *\u002F\n\u002F* grid-template-columns: [side-start] 200px [side-end content-start] 1fr [content-end]; *\u002F\n\u002F* .item { grid-column: side-start \u002F side-end; } *\u002F\n",[23,667,668,675,694,714,729,744,748,753,758],{"__ignoreMap":67},[71,669,670,673],{"class":73,"line":74},[71,671,672],{"class":77},".item",[71,674,82],{"class":81},[71,676,677,680,682,684,687,689,691],{"class":73,"line":85},[71,678,679],{"class":88},"  grid-column",[71,681,92],{"class":81},[71,683,141],{"class":88},[71,685,686],{"class":81}," \u002F ",[71,688,170],{"class":88},[71,690,128],{"class":81},[71,692,693],{"class":104},"\u002F* from line 1 to line 3 (spans 2 tracks). Lines are 1-indexed. *\u002F\n",[71,695,696,698,700,702,705,708,711],{"class":73,"line":101},[71,697,679],{"class":88},[71,699,92],{"class":81},[71,701,141],{"class":88},[71,703,704],{"class":81}," \u002F span ",[71,706,707],{"class":88},"2",[71,709,710],{"class":81},";    ",[71,712,713],{"class":104},"\u002F* same: span 2 tracks from line 1 *\u002F\n",[71,715,716,718,720,723,726],{"class":73,"line":108},[71,717,679],{"class":88},[71,719,92],{"class":81},[71,721,722],{"class":88},"-1",[71,724,725],{"class":81},";            ",[71,727,728],{"class":104},"\u002F* -1 = the LAST line (counts from the end) *\u002F\n",[71,730,731,734,736,738,740,742],{"class":73,"line":134},[71,732,733],{"class":88},"  grid-row",[71,735,92],{"class":81},[71,737,141],{"class":88},[71,739,686],{"class":81},[71,741,707],{"class":88},[71,743,98],{"class":81},[71,745,746],{"class":73,"line":157},[71,747,243],{"class":81},[71,749,750],{"class":73,"line":186},[71,751,752],{"class":104},"\u002F* Named lines via [name] in grid-template-columns: *\u002F\n",[71,754,755],{"class":73,"line":192},[71,756,757],{"class":104},"\u002F* grid-template-columns: [side-start] 200px [side-end content-start] 1fr [content-end]; *\u002F\n",[71,759,760],{"class":73,"line":198},[71,761,762],{"class":104},"\u002F* .item { grid-column: side-start \u002F side-end; } *\u002F\n",[48,764,766,767],{"id":765},"implicit-tracks-grid-auto-flow","Implicit Tracks & ",[23,768,769],{},"grid-auto-flow",[59,771,772],{"language":61},[63,773,775],{"className":65,"code":774,"language":61,"meta":67,"style":67},".grid {\n  grid-template-columns: repeat(3, 1fr);  \u002F* 3 explicit columns *\u002F\n  grid-auto-rows: minmax(100px, auto);     \u002F* implicit rows (overflow items) get this size *\u002F\n  grid-auto-flow: dense;                   \u002F* fill GAPS with later items (may reorder visually) *\u002F\n  \u002F* dense: later items fill earlier empty cells → compact, but can confuse reading order. *\u002F\n}\n",[23,776,777,783,806,831,847,852],{"__ignoreMap":67},[71,778,779,781],{"class":73,"line":74},[71,780,78],{"class":77},[71,782,82],{"class":81},[71,784,785,787,789,791,793,795,797,799,801,803],{"class":73,"line":85},[71,786,111],{"class":88},[71,788,92],{"class":81},[71,790,164],{"class":88},[71,792,167],{"class":81},[71,794,170],{"class":88},[71,796,173],{"class":81},[71,798,141],{"class":88},[71,800,33],{"class":119},[71,802,234],{"class":81},[71,804,805],{"class":104},"\u002F* 3 explicit columns *\u002F\n",[71,807,808,811,813,815,817,819,821,823,825,828],{"class":73,"line":101},[71,809,810],{"class":88},"  grid-auto-rows",[71,812,92],{"class":81},[71,814,205],{"class":88},[71,816,167],{"class":81},[71,818,577],{"class":88},[71,820,120],{"class":119},[71,822,173],{"class":81},[71,824,558],{"class":88},[71,826,827],{"class":81},");     ",[71,829,830],{"class":104},"\u002F* implicit rows (overflow items) get this size *\u002F\n",[71,832,833,836,838,841,844],{"class":73,"line":108},[71,834,835],{"class":88},"  grid-auto-flow",[71,837,92],{"class":81},[71,839,840],{"class":88},"dense",[71,842,843],{"class":81},";                   ",[71,845,846],{"class":104},"\u002F* fill GAPS with later items (may reorder visually) *\u002F\n",[71,848,849],{"class":73,"line":134},[71,850,851],{"class":104},"  \u002F* dense: later items fill earlier empty cells → compact, but can confuse reading order. *\u002F\n",[71,853,854],{"class":73,"line":157},[71,855,243],{"class":81},[48,857,859],{"id":858},"subgrid-2023","Subgrid (2023+)",[59,861,862],{"language":61},[63,863,865],{"className":65,"code":864,"language":61,"meta":67,"style":67},".parent { grid-template-columns: 1fr 2fr 1fr; }\n.child {\n  display: grid;\n  grid-template-columns: subgrid;  \u002F* inherits parent's 3 column tracks → aligned nested grid *\u002F\n  grid-column: span 3;\n}\n\u002F* Subgrid lets nested grids align with the parent's tracks — forms, data tables, aligned components. *\u002F\n",[23,866,867,892,899,909,924,935,939],{"__ignoreMap":67},[71,868,869,872,874,876,878,880,882,884,886,888,890],{"class":73,"line":74},[71,870,871],{"class":77},".parent",[71,873,373],{"class":81},[71,875,25],{"class":88},[71,877,92],{"class":81},[71,879,141],{"class":88},[71,881,33],{"class":119},[71,883,146],{"class":88},[71,885,33],{"class":119},[71,887,123],{"class":88},[71,889,33],{"class":119},[71,891,398],{"class":81},[71,893,894,897],{"class":73,"line":85},[71,895,896],{"class":77},".child",[71,898,82],{"class":81},[71,900,901,903,905,907],{"class":73,"line":101},[71,902,89],{"class":88},[71,904,92],{"class":81},[71,906,95],{"class":88},[71,908,98],{"class":81},[71,910,911,913,915,918,921],{"class":73,"line":108},[71,912,111],{"class":88},[71,914,92],{"class":81},[71,916,917],{"class":88},"subgrid",[71,919,920],{"class":81},";  ",[71,922,923],{"class":104},"\u002F* inherits parent's 3 column tracks → aligned nested grid *\u002F\n",[71,925,926,928,931,933],{"class":73,"line":134},[71,927,679],{"class":88},[71,929,930],{"class":81},": span ",[71,932,170],{"class":88},[71,934,98],{"class":81},[71,936,937],{"class":73,"line":157},[71,938,243],{"class":81},[71,940,941],{"class":73,"line":186},[71,942,943],{"class":104},"\u002F* Subgrid lets nested grids align with the parent's tracks — forms, data tables, aligned components. *\u002F\n",[48,945,947],{"id":946},"alignment-items-content-self","Alignment — items, content, self",[59,949,950],{"language":61},[63,951,953],{"className":65,"code":952,"language":61,"meta":67,"style":67},".grid {\n  justify-items: stretch;    \u002F* per-item WITHIN its cell (inline axis). start|end|center|stretch *\u002F\n  align-items: stretch;      \u002F* per-item within cell (block axis) *\u002F\n  justify-content: center;   \u002F* the GRID within the container (if grid \u003C container). space-* values. *\u002F\n  align-content: space-between;\n}\n.item { justify-self: center; align-self: start; }  \u002F* per-item override *\u002F\n",[23,954,955,961,976,991,1007,1019,1023],{"__ignoreMap":67},[71,956,957,959],{"class":73,"line":74},[71,958,78],{"class":77},[71,960,82],{"class":81},[71,962,963,966,968,971,973],{"class":73,"line":85},[71,964,965],{"class":88},"  justify-items",[71,967,92],{"class":81},[71,969,970],{"class":88},"stretch",[71,972,710],{"class":81},[71,974,975],{"class":104},"\u002F* per-item WITHIN its cell (inline axis). start|end|center|stretch *\u002F\n",[71,977,978,981,983,985,988],{"class":73,"line":101},[71,979,980],{"class":88},"  align-items",[71,982,92],{"class":81},[71,984,970],{"class":88},[71,986,987],{"class":81},";      ",[71,989,990],{"class":104},"\u002F* per-item within cell (block axis) *\u002F\n",[71,992,993,996,998,1001,1004],{"class":73,"line":108},[71,994,995],{"class":88},"  justify-content",[71,997,92],{"class":81},[71,999,1000],{"class":88},"center",[71,1002,1003],{"class":81},";   ",[71,1005,1006],{"class":104},"\u002F* the GRID within the container (if grid \u003C container). space-* values. *\u002F\n",[71,1008,1009,1012,1014,1017],{"class":73,"line":134},[71,1010,1011],{"class":88},"  align-content",[71,1013,92],{"class":81},[71,1015,1016],{"class":88},"space-between",[71,1018,98],{"class":81},[71,1020,1021],{"class":73,"line":157},[71,1022,243],{"class":81},[71,1024,1025,1027,1029,1032,1034,1036,1038,1041,1043,1046,1049],{"class":73,"line":186},[71,1026,672],{"class":77},[71,1028,373],{"class":81},[71,1030,1031],{"class":88},"justify-self",[71,1033,92],{"class":81},[71,1035,1000],{"class":88},[71,1037,383],{"class":81},[71,1039,1040],{"class":88},"align-self",[71,1042,92],{"class":81},[71,1044,1045],{"class":88},"start",[71,1047,1048],{"class":81},"; }  ",[71,1050,1051],{"class":104},"\u002F* per-item override *\u002F\n",[48,1053,1055],{"id":1054},"tips-tricks","💡 Tips & Tricks",[1057,1058,1059,1070,1077,1095,1100],"ul",{},[1060,1061,1062,92,1066,1069],"li",{},[1063,1064,1065],"strong",{},"Idiom",[23,1067,1068],{},"repeat(auto-fit, minmax(250px, 1fr))"," is the responsive card grid — no media queries, cards fill the row and stretch when fewer. The single most useful grid pattern.",[1060,1071,1072,92,1074,1076],{},[1063,1073,1065],{},[23,1075,481],{}," for page-level layout — it's a visual ASCII map of the layout, self-documenting and refactor-safe. Each area must be a rectangle.",[1060,1078,1079,92,1081,1083,1084,1087,1088,1090,1091,1094],{},[1063,1080,1065],{},[23,1082,33],{}," for proportional tracks (",[23,1085,1086],{},"1fr 2fr"," = 1:2), ",[23,1089,45],{}," when content might overflow, ",[23,1092,1093],{},"minmax(250px, 1fr)"," for responsive minimums.",[1060,1096,1097,1099],{},[1063,1098,1065],{},": Grid for 2D layout (page, dashboard), Flexbox for 1D (navbar, button row). Many layouts combine: a grid of flex-card components.",[1060,1101,1102,1104],{},[1063,1103,1065],{},": subgrid when a nested grid should align with parent tracks — eliminates manual track-size duplication in forms and data tables.",[48,1106,1108],{"id":1107},"️-edge-cases-gotchas","⚠️ Edge Cases & Gotchas",[1057,1110,1111,1128,1142,1155,1163,1179,1188],{},[1060,1112,1113,1121,1122,1124,1125,1127],{},[1063,1114,1115,1117,1118,1120],{},[23,1116,253],{}," keeps empty tracks; ",[23,1119,249],{}," collapses them",": for \"cards stretch to fill the row,\" use ",[23,1123,249],{},". ",[23,1126,253],{}," leaves empty space when there are fewer items than tracks.",[1060,1129,1130,92,1135,1138,1139,1141],{},[1063,1131,1132,1134],{},[23,1133,33],{}," distributes only FREE space",[23,1136,1137],{},"1fr 1fr"," with a 200px-min-content first column doesn't give equal columns — the first gets its min, then free space splits. ",[23,1140,45],{}," fixes this.",[1060,1143,1144,1150,1151,1154],{},[1063,1145,1146,1149],{},[23,1147,1148],{},"gap"," is between tracks, not around",": there's no edge gap. Use ",[23,1152,1153],{},"padding"," on the container for edge spacing.",[1060,1156,1157,1162],{},[1063,1158,1159,1161],{},[23,1160,481],{}," must be rectangles",": a named area can't be L-shaped. Each row must have the same cell count.",[1060,1164,1165,92,1168,1171,1172,1174,1175,1178],{},[1063,1166,1167],{},"Grid lines are 1-indexed",[23,1169,1170],{},"1 \u002F 3"," spans 2 tracks (lines 1→3). ",[23,1173,722],{}," is the last line. ",[23,1176,1177],{},"span N"," spans N tracks from the start.",[1060,1180,1181,1187],{},[1063,1182,1183,1186],{},[23,1184,1185],{},"grid-auto-flow: dense"," can reorder items visually",": later items fill earlier gaps, possibly placing a later item before an earlier one. Confuses reading order.",[1060,1189,1190,1196,1197,1200,1201,1203],{},[1063,1191,1192,1193],{},"Grid items have ",[23,1194,1195],{},"min-width: auto"," (like flex): ",[23,1198,1199],{},"min-width: 0"," on items with long content, or ",[23,1202,45],{}," on the track.",[48,1205,1207],{"id":1206},"spot-the-bug","🧠 Spot the Bug",[59,1209,1210],{"language":61},[63,1211,1213],{"className":65,"code":1212,"language":61,"meta":67,"style":67},".grid { display: grid; grid-template-columns: 1fr 1fr; }\n.col1 { \u002F* long text *\u002F }\n",[23,1214,1215,1243],{"__ignoreMap":67},[71,1216,1217,1219,1221,1223,1225,1227,1229,1231,1233,1235,1237,1239,1241],{"class":73,"line":74},[71,1218,78],{"class":77},[71,1220,373],{"class":81},[71,1222,376],{"class":88},[71,1224,92],{"class":81},[71,1226,95],{"class":88},[71,1228,383],{"class":81},[71,1230,25],{"class":88},[71,1232,92],{"class":81},[71,1234,141],{"class":88},[71,1236,33],{"class":119},[71,1238,123],{"class":88},[71,1240,33],{"class":119},[71,1242,398],{"class":81},[71,1244,1245,1247,1249,1251],{"class":73,"line":85},[71,1246,403],{"class":77},[71,1248,373],{"class":81},[71,1250,408],{"class":104},[71,1252,411],{"class":81},[1254,1255,1256,1260],"details",{},[1257,1258,1259],"summary",{},"Answer",[14,1261,1262,1264,1265,1267,1268,1270,1271,1273,1274,1277,1278,1281,1282,1284,1285,1287,1288,1291],{},[23,1263,37],{}," = ",[23,1266,41],{}," — the minimum is ",[23,1269,558],{}," (the content's intrinsic size). Col1's long text has a large minimum width, so col1 won't shrink below it. The ",[23,1272,37],{}," distributes only the ",[18,1275,1276],{},"free"," space remaining after col1's content-min is satisfied → col2 is squeezed. Fix: ",[23,1279,1280],{},"grid-template-columns: minmax(0, 1fr) minmax(0, 1fr)"," — min=0 allows the track to shrink below content, so ",[23,1283,37],{}," distributes space evenly. Or ",[23,1286,1199],{}," + ",[23,1289,1290],{},"overflow-wrap: break-word"," on col1.",[1293,1294,1295],"style",{},"html pre.shiki code .sIsaT, html code.shiki .sIsaT{--shiki-default:#6F42C1;--shiki-github-dark:#B392F0}html pre.shiki code .ssxIu, html code.shiki .ssxIu{--shiki-default:#24292E;--shiki-github-dark:#E1E4E8}html pre.shiki code .snvgF, html code.shiki .snvgF{--shiki-default:#005CC5;--shiki-github-dark:#79B8FF}html pre.shiki code .sdCPZ, html code.shiki .sdCPZ{--shiki-default:#6A737D;--shiki-github-dark:#6A737D}html pre.shiki code .svdQ7, html code.shiki .svdQ7{--shiki-default:#D73A49;--shiki-github-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 .github-dark .shiki span {color: var(--shiki-github-dark);background: var(--shiki-github-dark-bg);font-style: var(--shiki-github-dark-font-style);font-weight: var(--shiki-github-dark-font-weight);text-decoration: var(--shiki-github-dark-text-decoration);}html.github-dark .shiki span {color: var(--shiki-github-dark);background: var(--shiki-github-dark-bg);font-style: var(--shiki-github-dark-font-style);font-weight: var(--shiki-github-dark-font-weight);text-decoration: var(--shiki-github-dark-text-decoration);}html pre.shiki code .sJ6F3, html code.shiki .sJ6F3{--shiki-default:#032F62;--shiki-github-dark:#9ECBFF}",{"title":67,"searchDepth":85,"depth":85,"links":1297},[1298,1300,1305,1307,1308,1310,1311,1312,1313,1314],{"id":50,"depth":85,"text":1299},"Track Sizing — fr and minmax()",{"id":246,"depth":85,"text":1301,"children":1302},"auto-fit vs auto-fill — the responsive grid",[1303],{"id":350,"depth":101,"text":1304},"Anti-pattern: 1fr with long content squeezes columns",{"id":478,"depth":85,"text":1306},"grid-template-areas — visual layout in CSS",{"id":659,"depth":85,"text":660},{"id":765,"depth":85,"text":1309},"Implicit Tracks & grid-auto-flow",{"id":858,"depth":85,"text":859},{"id":946,"depth":85,"text":947},{"id":1054,"depth":85,"text":1055},{"id":1107,"depth":85,"text":1108},{"id":1206,"depth":85,"text":1207},"fr distribution, minmax(0,1fr) for content overflow, auto-fit vs auto-fill, grid-template-areas, subgrid, and the intrinsic-minimum trap. Code-first reference with Holy Grail and responsive card-grid systems.","md",{},true,"\u002Fcss\u002F08-css-grid",{"title":5,"description":1315},"css\u002F08-css-grid","loTsxKSz8Dcj8wquhy8Dpf0xzoB0HxxUleE1_UcE6nM",1789924644826]