[{"data":1,"prerenderedAt":891},["ShallowReactive",2],{"guide-css-grid-auto-placement-algorithm":3},{"id":4,"title":5,"body":6,"date":883,"description":884,"extension":885,"meta":886,"navigation":370,"path":887,"readingTime":202,"seo":888,"stem":889,"__hash__":890},"guides\u002Fguides\u002Fcss-grid-auto-placement-algorithm.md","CSS Grid Auto Placement Algorithm",{"type":7,"value":8,"toc":866},"minimark",[9,14,36,39,43,106,117,206,210,215,223,261,265,270,284,288,295,299,308,312,318,326,329,335,340,393,397,579,587,591,656,664,668,682,731,737,741,744,813,816,820,849,853,862],[10,11,13],"h2",{"id":12},"what-is-grid-auto-placement","What Is Grid Auto Placement?",[15,16,17,18,22,23,26,27,31,32,35],"p",{},"When you define a grid container but do not explicitly place every item using ",[19,20,21],"code",{},"grid-column"," or ",[19,24,25],{},"grid-row",", the browser must decide where those unplaced items go. The ",[28,29,30],"strong",{},"auto placement algorithm"," handles this — it fills empty cells following rules you control via ",[19,33,34],{},"grid-auto-flow",".",[15,37,38],{},"Understanding this algorithm helps you predict layout behavior instead of guessing and tweaking blindly.",[10,40,42],{"id":41},"the-three-modes-of-grid-auto-flow","The Three Modes of grid-auto-flow",[44,45,46,62],"table",{},[47,48,49],"thead",{},[50,51,52,56,59],"tr",{},[53,54,55],"th",{},"Value",[53,57,58],{},"Behavior",[53,60,61],{},"Use Case",[63,64,65,80,93],"tbody",{},[50,66,67,74,77],{},[68,69,70,73],"td",{},[19,71,72],{},"row"," (default)",[68,75,76],{},"Fill rows left to right, then move to next row",[68,78,79],{},"Standard card grids, lists",[50,81,82,87,90],{},[68,83,84],{},[19,85,86],{},"column",[68,88,89],{},"Fill columns top to bottom, then move to next column",[68,91,92],{},"Vertical feeds, sidebar items",[50,94,95,100,103],{},[68,96,97],{},[19,98,99],{},"dense",[68,101,102],{},"Backfill earlier gaps left by spanning items",[68,104,105],{},"Masonry-like layouts, mixed-size grids",[15,107,108,109,111,112,22,114,116],{},"You can combine ",[19,110,99],{}," with ",[19,113,72],{},[19,115,86],{},":",[118,119,124],"pre",{"className":120,"code":121,"language":122,"meta":123,"style":123},"language-css shiki shiki-themes github-light github-dark",".grid {\n  display: grid;\n  grid-template-columns: repeat(4, 1fr);\n  grid-auto-flow: row dense;\n}\n","css","",[19,125,126,139,155,185,200],{"__ignoreMap":123},[127,128,131,135],"span",{"class":129,"line":130},"line",1,[127,132,134],{"class":133},"sScJk",".grid",[127,136,138],{"class":137},"sVt8B"," {\n",[127,140,142,146,149,152],{"class":129,"line":141},2,[127,143,145],{"class":144},"sj4cs","  display",[127,147,148],{"class":137},": ",[127,150,151],{"class":144},"grid",[127,153,154],{"class":137},";\n",[127,156,158,161,163,166,169,172,175,178,182],{"class":129,"line":157},3,[127,159,160],{"class":144},"  grid-template-columns",[127,162,148],{"class":137},[127,164,165],{"class":144},"repeat",[127,167,168],{"class":137},"(",[127,170,171],{"class":144},"4",[127,173,174],{"class":137},", ",[127,176,177],{"class":144},"1",[127,179,181],{"class":180},"szBVR","fr",[127,183,184],{"class":137},");\n",[127,186,188,191,193,195,198],{"class":129,"line":187},4,[127,189,190],{"class":144},"  grid-auto-flow",[127,192,148],{"class":137},[127,194,72],{"class":144},[127,196,197],{"class":144}," dense",[127,199,154],{"class":137},[127,201,203],{"class":129,"line":202},5,[127,204,205],{"class":137},"}\n",[10,207,209],{"id":208},"how-the-algorithm-works-step-by-step","How the Algorithm Works — Step by Step",[211,212,214],"h3",{"id":213},"step-1-place-items-with-explicit-positions","Step 1: Place Items with Explicit Positions",[15,216,217,218,22,220,222],{},"Items that specify ",[19,219,21],{},[19,221,25],{}," get placed first. The algorithm skips these and reserves their cells.",[118,224,226],{"className":120,"code":225,"language":122,"meta":123,"style":123},".featured {\n  grid-column: 1 \u002F 3; \u002F* spans 2 columns *\u002F\n}\n",[19,227,228,235,257],{"__ignoreMap":123},[127,229,230,233],{"class":129,"line":130},[127,231,232],{"class":133},".featured",[127,234,138],{"class":137},[127,236,237,240,242,244,247,250,253],{"class":129,"line":141},[127,238,239],{"class":144},"  grid-column",[127,241,148],{"class":137},[127,243,177],{"class":144},[127,245,246],{"class":137}," \u002F ",[127,248,249],{"class":144},"3",[127,251,252],{"class":137},"; ",[127,254,256],{"class":255},"sJ8bj","\u002F* spans 2 columns *\u002F\n",[127,258,259],{"class":129,"line":157},[127,260,205],{"class":137},[211,262,264],{"id":263},"step-2-determine-the-auto-flow-direction","Step 2: Determine the Auto-Flow Direction",[15,266,267,268,116],{},"The algorithm picks the next available cell based on ",[19,269,34],{},[271,272,273,279],"ul",{},[274,275,276,278],"li",{},[28,277,72],{},": Move right across columns, then down to next row",[274,280,281,283],{},[28,282,86],{},": Move down across rows, then right to next column",[211,285,287],{"id":286},"step-3-place-remaining-items-in-order","Step 3: Place Remaining Items in Order",[15,289,290,291,294],{},"Items without explicit placement fill cells in DOM order. If an item spans multiple tracks (",[19,292,293],{},"span 2","), the algorithm searches for a contiguous block of empty cells large enough.",[211,296,298],{"id":297},"step-4-handle-dense-packing-if-enabled","Step 4: Handle Dense Packing (if enabled)",[15,300,301,302,304,305,307],{},"With ",[19,303,99],{},", after placing an item that spans multiple tracks, the algorithm goes back to check whether smaller items can fill gaps left behind. Without ",[19,306,99],{},", those gaps stay empty.",[10,309,311],{"id":310},"the-spanning-problem","The Spanning Problem",[15,313,314,315,116],{},"Spanning items create gaps. Consider a 4-column grid with ",[19,316,317],{},"grid-auto-flow: row",[118,319,324],{"className":320,"code":322,"language":323},[321],"language-text","[1-wide] [1-wide] [1-wide] [3-wide spanning]\n                          ┌─────────────────┐\n                          │    spans 3 cols  │\n                          └─────────────────┘\n","text",[19,325,322],{"__ignoreMap":123},[15,327,328],{},"The 3-wide item does not fit in the last column of row 1 (needs 3 consecutive empty cells), so it wraps to row 2. This leaves column 4 of row 1 empty — a gap.",[15,330,331,332,334],{},"Without ",[19,333,99],{},": the gap persists. The next item starts at row 2, column 1.",[15,336,301,337,339],{},[19,338,99],{},": the algorithm backfills. The next 1-wide item fills column 4 of row 1.",[118,341,343],{"className":120,"code":342,"language":122,"meta":123,"style":123},"\u002F* Without dense — gaps persist *\u002F\n.grid { grid-auto-flow: row; }\n\n\u002F* With dense — gaps get filled *\u002F\n.grid { grid-auto-flow: row dense; }\n",[19,344,345,350,366,372,377],{"__ignoreMap":123},[127,346,347],{"class":129,"line":130},[127,348,349],{"class":255},"\u002F* Without dense — gaps persist *\u002F\n",[127,351,352,354,357,359,361,363],{"class":129,"line":141},[127,353,134],{"class":133},[127,355,356],{"class":137}," { ",[127,358,34],{"class":144},[127,360,148],{"class":137},[127,362,72],{"class":144},[127,364,365],{"class":137},"; }\n",[127,367,368],{"class":129,"line":157},[127,369,371],{"emptyLinePlaceholder":370},true,"\n",[127,373,374],{"class":129,"line":187},[127,375,376],{"class":255},"\u002F* With dense — gaps get filled *\u002F\n",[127,378,379,381,383,385,387,389,391],{"class":129,"line":202},[127,380,134],{"class":133},[127,382,356],{"class":137},[127,384,34],{"class":144},[127,386,148],{"class":137},[127,388,72],{"class":144},[127,390,197],{"class":144},[127,392,365],{"class":137},[10,394,396],{"id":395},"practical-example-magazine-layout","Practical Example: Magazine Layout",[118,398,400],{"className":120,"code":399,"language":122,"meta":123,"style":123},".magazine {\n  display: grid;\n  grid-template-columns: repeat(4, 1fr);\n  grid-auto-rows: minmax(200px, auto);\n  grid-auto-flow: row dense;\n  gap: 16px;\n}\n\n.hero {\n  grid-column: span 2;\n  grid-row: span 2;\n}\n\n.sidebar {\n  grid-column: span 1;\n  grid-row: span 2;\n}\n",[19,401,402,409,419,439,464,476,491,496,501,509,522,534,539,544,552,563,574],{"__ignoreMap":123},[127,403,404,407],{"class":129,"line":130},[127,405,406],{"class":133},".magazine",[127,408,138],{"class":137},[127,410,411,413,415,417],{"class":129,"line":141},[127,412,145],{"class":144},[127,414,148],{"class":137},[127,416,151],{"class":144},[127,418,154],{"class":137},[127,420,421,423,425,427,429,431,433,435,437],{"class":129,"line":157},[127,422,160],{"class":144},[127,424,148],{"class":137},[127,426,165],{"class":144},[127,428,168],{"class":137},[127,430,171],{"class":144},[127,432,174],{"class":137},[127,434,177],{"class":144},[127,436,181],{"class":180},[127,438,184],{"class":137},[127,440,441,444,446,449,451,454,457,459,462],{"class":129,"line":187},[127,442,443],{"class":144},"  grid-auto-rows",[127,445,148],{"class":137},[127,447,448],{"class":144},"minmax",[127,450,168],{"class":137},[127,452,453],{"class":144},"200",[127,455,456],{"class":180},"px",[127,458,174],{"class":137},[127,460,461],{"class":144},"auto",[127,463,184],{"class":137},[127,465,466,468,470,472,474],{"class":129,"line":202},[127,467,190],{"class":144},[127,469,148],{"class":137},[127,471,72],{"class":144},[127,473,197],{"class":144},[127,475,154],{"class":137},[127,477,479,482,484,487,489],{"class":129,"line":478},6,[127,480,481],{"class":144},"  gap",[127,483,148],{"class":137},[127,485,486],{"class":144},"16",[127,488,456],{"class":180},[127,490,154],{"class":137},[127,492,494],{"class":129,"line":493},7,[127,495,205],{"class":137},[127,497,499],{"class":129,"line":498},8,[127,500,371],{"emptyLinePlaceholder":370},[127,502,504,507],{"class":129,"line":503},9,[127,505,506],{"class":133},".hero",[127,508,138],{"class":137},[127,510,512,514,517,520],{"class":129,"line":511},10,[127,513,239],{"class":144},[127,515,516],{"class":137},": span ",[127,518,519],{"class":144},"2",[127,521,154],{"class":137},[127,523,525,528,530,532],{"class":129,"line":524},11,[127,526,527],{"class":144},"  grid-row",[127,529,516],{"class":137},[127,531,519],{"class":144},[127,533,154],{"class":137},[127,535,537],{"class":129,"line":536},12,[127,538,205],{"class":137},[127,540,542],{"class":129,"line":541},13,[127,543,371],{"emptyLinePlaceholder":370},[127,545,547,550],{"class":129,"line":546},14,[127,548,549],{"class":133},".sidebar",[127,551,138],{"class":137},[127,553,555,557,559,561],{"class":129,"line":554},15,[127,556,239],{"class":144},[127,558,516],{"class":137},[127,560,177],{"class":144},[127,562,154],{"class":137},[127,564,566,568,570,572],{"class":129,"line":565},16,[127,567,527],{"class":144},[127,569,516],{"class":137},[127,571,519],{"class":144},[127,573,154],{"class":137},[127,575,577],{"class":129,"line":576},17,[127,578,205],{"class":137},[15,580,331,581,583,584,586],{},[19,582,99],{},", the hero item (2×2) and sidebar item (1×2) would leave scattered gaps. With ",[19,585,99],{},", smaller items slide into those gaps, creating a compact layout.",[10,588,590],{"id":589},"dense-packing-trade-offs","Dense Packing Trade-offs",[44,592,593,610],{},[47,594,595],{},[50,596,597,600,605],{},[53,598,599],{},"Aspect",[53,601,602,604],{},[19,603,72],{}," (sparse)",[53,606,607],{},[19,608,609],{},"row dense",[63,611,612,623,634,645],{},[50,613,614,617,620],{},[68,615,616],{},"Visual gaps",[68,618,619],{},"Possible",[68,621,622],{},"Minimized",[50,624,625,628,631],{},[68,626,627],{},"DOM order preserved",[68,629,630],{},"Yes",[68,632,633],{},"No — smaller items may appear before larger ones in DOM",[50,635,636,639,642],{},[68,637,638],{},"Accessibility",[68,640,641],{},"Predictable tab order",[68,643,644],{},"Tab order may jump visually",[50,646,647,650,653],{},[68,648,649],{},"Performance",[68,651,652],{},"Faster algorithm",[68,654,655],{},"Slightly slower (backfilling)",[15,657,658,148,661,663],{},[28,659,660],{},"Important",[19,662,99],{}," reorders items visually but not in the DOM. Screen readers and keyboard navigation still follow DOM order. If visual order matters for accessibility, use explicit placement instead.",[10,665,667],{"id":666},"auto-tracks-and-implicit-grid","Auto Tracks and Implicit Grid",[15,669,670,671,22,674,677,678,681],{},"When items overflow the defined ",[19,672,673],{},"grid-template-columns",[19,675,676],{},"grid-template-rows",", the browser creates ",[28,679,680],{},"implicit tracks",". Control their size with:",[118,683,685],{"className":120,"code":684,"language":122,"meta":123,"style":123},".grid {\n  grid-auto-rows: minmax(100px, auto);\n  grid-auto-columns: 200px;\n}\n",[19,686,687,693,714,727],{"__ignoreMap":123},[127,688,689,691],{"class":129,"line":130},[127,690,134],{"class":133},[127,692,138],{"class":137},[127,694,695,697,699,701,703,706,708,710,712],{"class":129,"line":141},[127,696,443],{"class":144},[127,698,148],{"class":137},[127,700,448],{"class":144},[127,702,168],{"class":137},[127,704,705],{"class":144},"100",[127,707,456],{"class":180},[127,709,174],{"class":137},[127,711,461],{"class":144},[127,713,184],{"class":137},[127,715,716,719,721,723,725],{"class":129,"line":157},[127,717,718],{"class":144},"  grid-auto-columns",[127,720,148],{"class":137},[127,722,453],{"class":144},[127,724,456],{"class":180},[127,726,154],{"class":137},[127,728,729],{"class":129,"line":187},[127,730,205],{"class":137},[15,732,733,734,736],{},"Without these, implicit tracks default to ",[19,735,461],{}," — sized to their content. This often creates uneven row heights in dynamic layouts.",[10,738,740],{"id":739},"named-grid-lines-and-auto-placement","Named Grid Lines and Auto Placement",[15,742,743],{},"If you define named lines, the algorithm can use them for automatic spanning:",[118,745,747],{"className":120,"code":746,"language":122,"meta":123,"style":123},".grid {\n  grid-template-columns: [col-start] 1fr [col-end] repeat(3, 1fr);\n}\n\n.item {\n  grid-column: col-start \u002F span 2;\n}\n",[19,748,749,755,783,787,791,798,809],{"__ignoreMap":123},[127,750,751,753],{"class":129,"line":130},[127,752,134],{"class":133},[127,754,138],{"class":137},[127,756,757,759,762,764,766,769,771,773,775,777,779,781],{"class":129,"line":141},[127,758,160],{"class":144},[127,760,761],{"class":137},": [col-start] ",[127,763,177],{"class":144},[127,765,181],{"class":180},[127,767,768],{"class":137}," [col-end] ",[127,770,165],{"class":144},[127,772,168],{"class":137},[127,774,249],{"class":144},[127,776,174],{"class":137},[127,778,177],{"class":144},[127,780,181],{"class":180},[127,782,184],{"class":137},[127,784,785],{"class":129,"line":157},[127,786,205],{"class":137},[127,788,789],{"class":129,"line":187},[127,790,371],{"emptyLinePlaceholder":370},[127,792,793,796],{"class":129,"line":202},[127,794,795],{"class":133},".item",[127,797,138],{"class":137},[127,799,800,802,805,807],{"class":129,"line":478},[127,801,239],{"class":144},[127,803,804],{"class":137},": col-start \u002F span ",[127,806,519],{"class":144},[127,808,154],{"class":137},[127,810,811],{"class":129,"line":493},[127,812,205],{"class":137},[15,814,815],{},"Named lines make auto placement more predictable because items reference specific tracks rather than numeric indexes that shift when you change column counts.",[10,817,819],{"id":818},"key-takeaways","Key Takeaways",[271,821,822,827,833,836,843],{},[274,823,824,825],{},"Grid auto placement fills unplaced items according to ",[19,826,34],{},[274,828,829,830,832],{},"Spanning items can leave gaps — ",[19,831,99],{}," backfills those gaps",[274,834,835],{},"Dense packing trades DOM order preservation for visual compactness",[274,837,838,839,842],{},"Always define ",[19,840,841],{},"grid-auto-rows"," when row count is dynamic",[274,844,845,846,848],{},"For accessible layouts, prefer explicit placement over ",[19,847,99],{}," reordering",[10,850,852],{"id":851},"try-it-yourself","Try It Yourself",[15,854,855,856,861],{},"Build and experiment with grid layouts using our ",[857,858,860],"a",{"href":859},"\u002Ftools\u002Fcss-grid","CSS Grid Generator",". Define columns, rows, and gaps visually — then copy the CSS into your project.",[863,864,865],"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}",{"title":123,"searchDepth":141,"depth":141,"links":867},[868,869,870,876,877,878,879,880,881,882],{"id":12,"depth":141,"text":13},{"id":41,"depth":141,"text":42},{"id":208,"depth":141,"text":209,"children":871},[872,873,874,875],{"id":213,"depth":157,"text":214},{"id":263,"depth":157,"text":264},{"id":286,"depth":157,"text":287},{"id":297,"depth":157,"text":298},{"id":310,"depth":141,"text":311},{"id":395,"depth":141,"text":396},{"id":589,"depth":141,"text":590},{"id":666,"depth":141,"text":667},{"id":739,"depth":141,"text":740},{"id":818,"depth":141,"text":819},{"id":851,"depth":141,"text":852},"2026-05-28","Understand the CSS Grid auto placement algorithm — how the browser fills grid cells automatically using grid-auto-flow, spanning, and dense packing.","md",{"immutable":370},"\u002Fguides\u002Fcss-grid-auto-placement-algorithm",{"title":5,"description":884},"guides\u002Fcss-grid-auto-placement-algorithm","VrcWLWCMZZeTiUdV5o_aiSAL_weYdTvVU5djpYpKEsI",1780401332897]