[{"data":1,"prerenderedAt":1706},["ShallowReactive",2],{"guide-css-grid-tutorial":3},{"id":4,"title":5,"body":6,"date":1698,"description":1699,"extension":1700,"meta":1701,"navigation":101,"path":1702,"readingTime":105,"seo":1703,"stem":1704,"__hash__":1705},"guides\u002Fguides\u002Fcss-grid-tutorial.md","CSS Grid Tutorial",{"type":7,"value":8,"toc":1675},"minimark",[9,14,18,26,123,129,133,136,141,209,212,216,222,268,271,275,282,330,334,337,401,404,408,411,515,534,538,544,756,762,766,772,818,821,827,877,959,965,969,973,976,1075,1078,1082,1085,1191,1197,1201,1204,1333,1338,1342,1348,1488,1494,1498,1501,1580,1634,1638,1649,1653,1671],[10,11,13],"h2",{"id":12},"getting-started-with-css-grid","Getting Started with CSS Grid",[15,16,17],"p",{},"CSS Grid is a two-dimensional layout system that controls both rows and columns simultaneously. It replaces float-based layouts, table hacks, and inline-block workarounds with a declarative model the browser handles natively.",[15,19,20,21,25],{},"To activate Grid, set ",[22,23,24],"code",{},"display: grid"," on a container. Its direct children become grid items.",[27,28,33],"pre",{"className":29,"code":30,"language":31,"meta":32,"style":32},"language-css shiki shiki-themes github-light github-dark",".grid-container {\n  display: grid;\n  grid-template-columns: 1fr 1fr 1fr;\n}\n\n.grid-item {\n  \u002F* Each item occupies one cell by default *\u002F\n}\n","css","",[22,34,35,48,64,90,96,103,111,118],{"__ignoreMap":32},[36,37,40,44],"span",{"class":38,"line":39},"line",1,[36,41,43],{"class":42},"sScJk",".grid-container",[36,45,47],{"class":46},"sVt8B"," {\n",[36,49,51,55,58,61],{"class":38,"line":50},2,[36,52,54],{"class":53},"sj4cs","  display",[36,56,57],{"class":46},": ",[36,59,60],{"class":53},"grid",[36,62,63],{"class":46},";\n",[36,65,67,70,72,75,79,82,84,86,88],{"class":38,"line":66},3,[36,68,69],{"class":53},"  grid-template-columns",[36,71,57],{"class":46},[36,73,74],{"class":53},"1",[36,76,78],{"class":77},"szBVR","fr",[36,80,81],{"class":53}," 1",[36,83,78],{"class":77},[36,85,81],{"class":53},[36,87,78],{"class":77},[36,89,63],{"class":46},[36,91,93],{"class":38,"line":92},4,[36,94,95],{"class":46},"}\n",[36,97,99],{"class":38,"line":98},5,[36,100,102],{"emptyLinePlaceholder":101},true,"\n",[36,104,106,109],{"class":38,"line":105},6,[36,107,108],{"class":42},".grid-item",[36,110,47],{"class":46},[36,112,114],{"class":38,"line":113},7,[36,115,117],{"class":116},"sJ8bj","  \u002F* Each item occupies one cell by default *\u002F\n",[36,119,121],{"class":38,"line":120},8,[36,122,95],{"class":46},[15,124,125,126,128],{},"Only direct children participate in the grid. Nested elements need their own ",[22,127,24],{}," if you want sub-grid behavior.",[10,130,132],{"id":131},"grid-template-columns-and-grid-template-rows","grid-template-columns and grid-template-rows",[15,134,135],{},"These properties define the track structure — the columns and rows of your grid.",[137,138,140],"h3",{"id":139},"fixed-sizes","Fixed Sizes",[27,142,144],{"className":29,"code":143,"language":31,"meta":32,"style":32},".grid-container {\n  display: grid;\n  grid-template-columns: 200px 300px 200px;\n  grid-template-rows: 100px 400px;\n}\n",[22,145,146,152,162,186,205],{"__ignoreMap":32},[36,147,148,150],{"class":38,"line":39},[36,149,43],{"class":42},[36,151,47],{"class":46},[36,153,154,156,158,160],{"class":38,"line":50},[36,155,54],{"class":53},[36,157,57],{"class":46},[36,159,60],{"class":53},[36,161,63],{"class":46},[36,163,164,166,168,171,174,177,179,182,184],{"class":38,"line":66},[36,165,69],{"class":53},[36,167,57],{"class":46},[36,169,170],{"class":53},"200",[36,172,173],{"class":77},"px",[36,175,176],{"class":53}," 300",[36,178,173],{"class":77},[36,180,181],{"class":53}," 200",[36,183,173],{"class":77},[36,185,63],{"class":46},[36,187,188,191,193,196,198,201,203],{"class":38,"line":92},[36,189,190],{"class":53},"  grid-template-rows",[36,192,57],{"class":46},[36,194,195],{"class":53},"100",[36,197,173],{"class":77},[36,199,200],{"class":53}," 400",[36,202,173],{"class":77},[36,204,63],{"class":46},[36,206,207],{"class":38,"line":98},[36,208,95],{"class":46},[15,210,211],{},"Columns stay at exactly 200px, 300px, and 200px. Not responsive, but useful for fixed-width layouts.",[137,213,215],{"id":214},"flexible-sizes-with-fr","Flexible Sizes with fr",[15,217,218,219,221],{},"The ",[22,220,78],{}," unit distributes remaining space proportionally:",[27,223,225],{"className":29,"code":224,"language":31,"meta":32,"style":32},".grid-container {\n  display: grid;\n  grid-template-columns: 1fr 2fr 1fr;\n}\n",[22,226,227,233,243,264],{"__ignoreMap":32},[36,228,229,231],{"class":38,"line":39},[36,230,43],{"class":42},[36,232,47],{"class":46},[36,234,235,237,239,241],{"class":38,"line":50},[36,236,54],{"class":53},[36,238,57],{"class":46},[36,240,60],{"class":53},[36,242,63],{"class":46},[36,244,245,247,249,251,253,256,258,260,262],{"class":38,"line":66},[36,246,69],{"class":53},[36,248,57],{"class":46},[36,250,74],{"class":53},[36,252,78],{"class":77},[36,254,255],{"class":53}," 2",[36,257,78],{"class":77},[36,259,81],{"class":53},[36,261,78],{"class":77},[36,263,63],{"class":46},[36,265,266],{"class":38,"line":92},[36,267,95],{"class":46},[15,269,270],{},"The middle column gets twice the space of each outer column. This is the most common pattern for responsive grids.",[137,272,274],{"id":273},"repeat-notation","repeat() Notation",[15,276,277,278,281],{},"Save keystrokes with ",[22,279,280],{},"repeat()",":",[27,283,285],{"className":29,"code":284,"language":31,"meta":32,"style":32},"\u002F* Equivalent declarations *\u002F\ngrid-template-columns: 1fr 1fr 1fr 1fr;\ngrid-template-columns: repeat(4, 1fr);\n\n\u002F* With minmax *\u002F\ngrid-template-columns: repeat(auto-fill, minmax(250px, 1fr));\n",[22,286,287,292,301,308,312,317],{"__ignoreMap":32},[36,288,289],{"class":38,"line":39},[36,290,291],{"class":116},"\u002F* Equivalent declarations *\u002F\n",[36,293,294,298],{"class":38,"line":50},[36,295,297],{"class":296},"s9eBZ","grid-template-columns",[36,299,300],{"class":46},": 1fr 1fr 1fr 1fr;\n",[36,302,303,305],{"class":38,"line":66},[36,304,297],{"class":296},[36,306,307],{"class":46},": repeat(4, 1fr);\n",[36,309,310],{"class":38,"line":92},[36,311,102],{"emptyLinePlaceholder":101},[36,313,314],{"class":38,"line":98},[36,315,316],{"class":116},"\u002F* With minmax *\u002F\n",[36,318,319,321,324,327],{"class":38,"line":105},[36,320,297],{"class":296},[36,322,323],{"class":46},": repeat(",[36,325,326],{"class":296},"auto-fill",[36,328,329],{"class":46},", minmax(250px, 1fr));\n",[137,331,333],{"id":332},"mixing-units","Mixing Units",[15,335,336],{},"Combine fixed and flexible tracks in one declaration:",[27,338,340],{"className":29,"code":339,"language":31,"meta":32,"style":32},".grid-container {\n  display: grid;\n  grid-template-columns: 260px 1fr 1fr;\n  grid-template-rows: auto 1fr auto;\n}\n",[22,341,342,348,358,379,397],{"__ignoreMap":32},[36,343,344,346],{"class":38,"line":39},[36,345,43],{"class":42},[36,347,47],{"class":46},[36,349,350,352,354,356],{"class":38,"line":50},[36,351,54],{"class":53},[36,353,57],{"class":46},[36,355,60],{"class":53},[36,357,63],{"class":46},[36,359,360,362,364,367,369,371,373,375,377],{"class":38,"line":66},[36,361,69],{"class":53},[36,363,57],{"class":46},[36,365,366],{"class":53},"260",[36,368,173],{"class":77},[36,370,81],{"class":53},[36,372,78],{"class":77},[36,374,81],{"class":53},[36,376,78],{"class":77},[36,378,63],{"class":46},[36,380,381,383,385,388,390,392,395],{"class":38,"line":92},[36,382,190],{"class":53},[36,384,57],{"class":46},[36,386,387],{"class":53},"auto",[36,389,81],{"class":53},[36,391,78],{"class":77},[36,393,394],{"class":53}," auto",[36,396,63],{"class":46},[36,398,399],{"class":38,"line":98},[36,400,95],{"class":46},[15,402,403],{},"A fixed sidebar on the left, flexible content columns, and rows that size to content at the top and bottom.",[10,405,407],{"id":406},"grid-gap-row-and-column-gaps","grid-gap (Row and Column Gaps)",[15,409,410],{},"Gaps control spacing between tracks. They replace margin-based spacing and never apply before the first item or after the last.",[27,412,414],{"className":29,"code":413,"language":31,"meta":32,"style":32},".grid-container {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 24px;           \u002F* rows and columns *\u002F\n  row-gap: 16px;       \u002F* vertical only *\u002F\n  column-gap: 32px;    \u002F* horizontal only *\u002F\n}\n",[22,415,416,422,432,457,475,493,511],{"__ignoreMap":32},[36,417,418,420],{"class":38,"line":39},[36,419,43],{"class":42},[36,421,47],{"class":46},[36,423,424,426,428,430],{"class":38,"line":50},[36,425,54],{"class":53},[36,427,57],{"class":46},[36,429,60],{"class":53},[36,431,63],{"class":46},[36,433,434,436,438,441,444,447,450,452,454],{"class":38,"line":66},[36,435,69],{"class":53},[36,437,57],{"class":46},[36,439,440],{"class":53},"repeat",[36,442,443],{"class":46},"(",[36,445,446],{"class":53},"3",[36,448,449],{"class":46},", ",[36,451,74],{"class":53},[36,453,78],{"class":77},[36,455,456],{"class":46},");\n",[36,458,459,462,464,467,469,472],{"class":38,"line":92},[36,460,461],{"class":53},"  gap",[36,463,57],{"class":46},[36,465,466],{"class":53},"24",[36,468,173],{"class":77},[36,470,471],{"class":46},";           ",[36,473,474],{"class":116},"\u002F* rows and columns *\u002F\n",[36,476,477,480,482,485,487,490],{"class":38,"line":98},[36,478,479],{"class":53},"  row-gap",[36,481,57],{"class":46},[36,483,484],{"class":53},"16",[36,486,173],{"class":77},[36,488,489],{"class":46},";       ",[36,491,492],{"class":116},"\u002F* vertical only *\u002F\n",[36,494,495,498,500,503,505,508],{"class":38,"line":105},[36,496,497],{"class":53},"  column-gap",[36,499,57],{"class":46},[36,501,502],{"class":53},"32",[36,504,173],{"class":77},[36,506,507],{"class":46},";    ",[36,509,510],{"class":116},"\u002F* horizontal only *\u002F\n",[36,512,513],{"class":38,"line":113},[36,514,95],{"class":46},[15,516,517,518,522,523,525,526,529,530,533],{},"Gap values are subtracted from available space ",[519,520,521],"strong",{},"before"," ",[22,524,78],{}," units are calculated. With a 1000px container, three ",[22,527,528],{},"1fr"," columns, and a 24px gap, each column gets ",[22,531,532],{},"(1000 - 48) \u002F 3 = 317px",".",[10,535,537],{"id":536},"grid-area-and-named-areas","grid-area and Named Areas",[15,539,540,543],{},[22,541,542],{},"grid-template-areas"," is the most readable way to define complex layouts. You draw the layout with names instead of calculating line numbers:",[27,545,547],{"className":29,"code":546,"language":31,"meta":32,"style":32},".dashboard {\n  display: grid;\n  grid-template-columns: 240px 1fr 1fr;\n  grid-template-rows: 64px 1fr 1fr 48px;\n  grid-template-areas:\n    \"nav     nav     nav\"\n    \"sidebar chart   chart\"\n    \"sidebar table   stats\"\n    \"footer  footer  footer\";\n  gap: 16px;\n}\n\n.nav     { grid-area: nav; }\n.sidebar { grid-area: sidebar; }\n.chart   { grid-area: chart; }\n.table   { grid-area: table; }\n.stats   { grid-area: stats; }\n.footer  { grid-area: footer; }\n",[22,548,549,556,566,587,613,621,627,632,637,645,658,663,668,683,697,711,729,742],{"__ignoreMap":32},[36,550,551,554],{"class":38,"line":39},[36,552,553],{"class":42},".dashboard",[36,555,47],{"class":46},[36,557,558,560,562,564],{"class":38,"line":50},[36,559,54],{"class":53},[36,561,57],{"class":46},[36,563,60],{"class":53},[36,565,63],{"class":46},[36,567,568,570,572,575,577,579,581,583,585],{"class":38,"line":66},[36,569,69],{"class":53},[36,571,57],{"class":46},[36,573,574],{"class":53},"240",[36,576,173],{"class":77},[36,578,81],{"class":53},[36,580,78],{"class":77},[36,582,81],{"class":53},[36,584,78],{"class":77},[36,586,63],{"class":46},[36,588,589,591,593,596,598,600,602,604,606,609,611],{"class":38,"line":92},[36,590,190],{"class":53},[36,592,57],{"class":46},[36,594,595],{"class":53},"64",[36,597,173],{"class":77},[36,599,81],{"class":53},[36,601,78],{"class":77},[36,603,81],{"class":53},[36,605,78],{"class":77},[36,607,608],{"class":53}," 48",[36,610,173],{"class":77},[36,612,63],{"class":46},[36,614,615,618],{"class":38,"line":98},[36,616,617],{"class":53},"  grid-template-areas",[36,619,620],{"class":46},":\n",[36,622,623],{"class":38,"line":105},[36,624,626],{"class":625},"sZZnC","    \"nav     nav     nav\"\n",[36,628,629],{"class":38,"line":113},[36,630,631],{"class":625},"    \"sidebar chart   chart\"\n",[36,633,634],{"class":38,"line":120},[36,635,636],{"class":625},"    \"sidebar table   stats\"\n",[36,638,640,643],{"class":38,"line":639},9,[36,641,642],{"class":625},"    \"footer  footer  footer\"",[36,644,63],{"class":46},[36,646,648,650,652,654,656],{"class":38,"line":647},10,[36,649,461],{"class":53},[36,651,57],{"class":46},[36,653,484],{"class":53},[36,655,173],{"class":77},[36,657,63],{"class":46},[36,659,661],{"class":38,"line":660},11,[36,662,95],{"class":46},[36,664,666],{"class":38,"line":665},12,[36,667,102],{"emptyLinePlaceholder":101},[36,669,671,674,677,680],{"class":38,"line":670},13,[36,672,673],{"class":42},".nav",[36,675,676],{"class":46},"     { ",[36,678,679],{"class":53},"grid-area",[36,681,682],{"class":46},": nav; }\n",[36,684,686,689,692,694],{"class":38,"line":685},14,[36,687,688],{"class":42},".sidebar",[36,690,691],{"class":46}," { ",[36,693,679],{"class":53},[36,695,696],{"class":46},": sidebar; }\n",[36,698,700,703,706,708],{"class":38,"line":699},15,[36,701,702],{"class":42},".chart",[36,704,705],{"class":46},"   { ",[36,707,679],{"class":53},[36,709,710],{"class":46},": chart; }\n",[36,712,714,717,719,721,723,726],{"class":38,"line":713},16,[36,715,716],{"class":42},".table",[36,718,705],{"class":46},[36,720,679],{"class":53},[36,722,57],{"class":46},[36,724,725],{"class":53},"table",[36,727,728],{"class":46},"; }\n",[36,730,732,735,737,739],{"class":38,"line":731},17,[36,733,734],{"class":42},".stats",[36,736,705],{"class":46},[36,738,679],{"class":53},[36,740,741],{"class":46},": stats; }\n",[36,743,745,748,751,753],{"class":38,"line":744},18,[36,746,747],{"class":42},".footer",[36,749,750],{"class":46},"  { ",[36,752,679],{"class":53},[36,754,755],{"class":46},": footer; }\n",[15,757,758,759,761],{},"A period (",[22,760,533],{},") marks an empty cell. Named areas make the layout visible in the CSS itself, easy to rearrange for mobile, and simple for teams to understand.",[137,763,765],{"id":764},"shorthand-grid-area-with-line-numbers","Shorthand: grid-area with Line Numbers",[15,767,768,769,771],{},"You can also use ",[22,770,679],{}," as a shorthand for all four placement values:",[27,773,775],{"className":29,"code":774,"language":31,"meta":32,"style":32},".featured-item {\n  grid-area: 1 \u002F 1 \u002F 3 \u002F 4;\n  \u002F* row-start \u002F column-start \u002F row-end \u002F column-end *\u002F\n}\n",[22,776,777,784,809,814],{"__ignoreMap":32},[36,778,779,782],{"class":38,"line":39},[36,780,781],{"class":42},".featured-item",[36,783,47],{"class":46},[36,785,786,789,791,793,796,798,800,802,804,807],{"class":38,"line":50},[36,787,788],{"class":53},"  grid-area",[36,790,57],{"class":46},[36,792,74],{"class":53},[36,794,795],{"class":46}," \u002F ",[36,797,74],{"class":53},[36,799,795],{"class":46},[36,801,446],{"class":53},[36,803,795],{"class":46},[36,805,806],{"class":53},"4",[36,808,63],{"class":46},[36,810,811],{"class":38,"line":66},[36,812,813],{"class":116},"  \u002F* row-start \u002F column-start \u002F row-end \u002F column-end *\u002F\n",[36,815,816],{"class":38,"line":92},[36,817,95],{"class":46},[10,819,820],{"id":820},"grid-auto-flow",[15,822,823,824,826],{},"When items outnumber explicit tracks, the browser creates implicit tracks. ",[22,825,820],{}," controls how items fill those tracks:",[725,828,829,842],{},[830,831,832],"thead",{},[833,834,835,839],"tr",{},[836,837,838],"th",{},"Value",[836,840,841],{},"Behavior",[843,844,845,857,867],"tbody",{},[833,846,847,854],{},[848,849,850,853],"td",{},[22,851,852],{},"row"," (default)",[848,855,856],{},"Fills left to right, then wraps to next row",[833,858,859,864],{},[848,860,861],{},[22,862,863],{},"column",[848,865,866],{},"Fills top to bottom, then moves to next column",[833,868,869,874],{},[848,870,871],{},[22,872,873],{},"dense",[848,875,876],{},"Backfills gaps left by spanning items",[27,878,880],{"className":29,"code":879,"language":31,"meta":32,"style":32},".gallery {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));\n  grid-auto-flow: dense;\n  gap: 8px;\n}\n",[22,881,882,889,899,931,942,955],{"__ignoreMap":32},[36,883,884,887],{"class":38,"line":39},[36,885,886],{"class":42},".gallery",[36,888,47],{"class":46},[36,890,891,893,895,897],{"class":38,"line":50},[36,892,54],{"class":53},[36,894,57],{"class":46},[36,896,60],{"class":53},[36,898,63],{"class":46},[36,900,901,903,905,907,909,911,913,916,918,920,922,924,926,928],{"class":38,"line":66},[36,902,69],{"class":53},[36,904,57],{"class":46},[36,906,440],{"class":53},[36,908,443],{"class":46},[36,910,326],{"class":53},[36,912,449],{"class":46},[36,914,915],{"class":53},"minmax",[36,917,443],{"class":46},[36,919,170],{"class":53},[36,921,173],{"class":77},[36,923,449],{"class":46},[36,925,74],{"class":53},[36,927,78],{"class":77},[36,929,930],{"class":46},"));\n",[36,932,933,936,938,940],{"class":38,"line":92},[36,934,935],{"class":53},"  grid-auto-flow",[36,937,57],{"class":46},[36,939,873],{"class":53},[36,941,63],{"class":46},[36,943,944,946,948,951,953],{"class":38,"line":98},[36,945,461],{"class":53},[36,947,57],{"class":46},[36,949,950],{"class":53},"8",[36,952,173],{"class":77},[36,954,63],{"class":46},[36,956,957],{"class":38,"line":105},[36,958,95],{"class":46},[15,960,961,962,964],{},"Use ",[22,963,873],{}," for image galleries where items have varying spans and you want compact layouts without empty gaps.",[10,966,968],{"id":967},"practical-examples","Practical Examples",[137,970,972],{"id":971},"holy-grail-layout","Holy Grail Layout",[15,974,975],{},"The classic web layout — header, three-column body, and footer:",[27,977,979],{"className":29,"code":978,"language":31,"meta":32,"style":32},".holy-grail {\n  display: grid;\n  grid-template-columns: 200px 1fr 200px;\n  grid-template-rows: auto 1fr auto;\n  grid-template-areas:\n    \"header header  header\"\n    \"left   content right\"\n    \"footer footer  footer\";\n  min-height: 100vh;\n}\n",[22,980,981,988,998,1018,1034,1040,1045,1050,1057,1071],{"__ignoreMap":32},[36,982,983,986],{"class":38,"line":39},[36,984,985],{"class":42},".holy-grail",[36,987,47],{"class":46},[36,989,990,992,994,996],{"class":38,"line":50},[36,991,54],{"class":53},[36,993,57],{"class":46},[36,995,60],{"class":53},[36,997,63],{"class":46},[36,999,1000,1002,1004,1006,1008,1010,1012,1014,1016],{"class":38,"line":66},[36,1001,69],{"class":53},[36,1003,57],{"class":46},[36,1005,170],{"class":53},[36,1007,173],{"class":77},[36,1009,81],{"class":53},[36,1011,78],{"class":77},[36,1013,181],{"class":53},[36,1015,173],{"class":77},[36,1017,63],{"class":46},[36,1019,1020,1022,1024,1026,1028,1030,1032],{"class":38,"line":92},[36,1021,190],{"class":53},[36,1023,57],{"class":46},[36,1025,387],{"class":53},[36,1027,81],{"class":53},[36,1029,78],{"class":77},[36,1031,394],{"class":53},[36,1033,63],{"class":46},[36,1035,1036,1038],{"class":38,"line":98},[36,1037,617],{"class":53},[36,1039,620],{"class":46},[36,1041,1042],{"class":38,"line":105},[36,1043,1044],{"class":625},"    \"header header  header\"\n",[36,1046,1047],{"class":38,"line":113},[36,1048,1049],{"class":625},"    \"left   content right\"\n",[36,1051,1052,1055],{"class":38,"line":120},[36,1053,1054],{"class":625},"    \"footer footer  footer\"",[36,1056,63],{"class":46},[36,1058,1059,1062,1064,1066,1069],{"class":38,"line":639},[36,1060,1061],{"class":53},"  min-height",[36,1063,57],{"class":46},[36,1065,195],{"class":53},[36,1067,1068],{"class":77},"vh",[36,1070,63],{"class":46},[36,1072,1073],{"class":38,"line":647},[36,1074,95],{"class":46},[15,1076,1077],{},"All three columns maintain consistent height without JavaScript or table hacks.",[137,1079,1081],{"id":1080},"dashboard-layout","Dashboard Layout",[15,1083,1084],{},"Asymmetrical panels with varying spans:",[27,1086,1088],{"className":29,"code":1087,"language":31,"meta":32,"style":32},".dashboard {\n  display: grid;\n  grid-template-columns: 260px 1fr 1fr 1fr;\n  grid-template-rows: 56px 2fr 1fr;\n  grid-template-areas:\n    \"toolbar toolbar toolbar toolbar\"\n    \"nav     main    main    aside\"\n    \"nav     widget1 widget2 aside\";\n  gap: 12px;\n}\n",[22,1089,1090,1096,1106,1130,1151,1157,1162,1167,1174,1187],{"__ignoreMap":32},[36,1091,1092,1094],{"class":38,"line":39},[36,1093,553],{"class":42},[36,1095,47],{"class":46},[36,1097,1098,1100,1102,1104],{"class":38,"line":50},[36,1099,54],{"class":53},[36,1101,57],{"class":46},[36,1103,60],{"class":53},[36,1105,63],{"class":46},[36,1107,1108,1110,1112,1114,1116,1118,1120,1122,1124,1126,1128],{"class":38,"line":66},[36,1109,69],{"class":53},[36,1111,57],{"class":46},[36,1113,366],{"class":53},[36,1115,173],{"class":77},[36,1117,81],{"class":53},[36,1119,78],{"class":77},[36,1121,81],{"class":53},[36,1123,78],{"class":77},[36,1125,81],{"class":53},[36,1127,78],{"class":77},[36,1129,63],{"class":46},[36,1131,1132,1134,1136,1139,1141,1143,1145,1147,1149],{"class":38,"line":92},[36,1133,190],{"class":53},[36,1135,57],{"class":46},[36,1137,1138],{"class":53},"56",[36,1140,173],{"class":77},[36,1142,255],{"class":53},[36,1144,78],{"class":77},[36,1146,81],{"class":53},[36,1148,78],{"class":77},[36,1150,63],{"class":46},[36,1152,1153,1155],{"class":38,"line":98},[36,1154,617],{"class":53},[36,1156,620],{"class":46},[36,1158,1159],{"class":38,"line":105},[36,1160,1161],{"class":625},"    \"toolbar toolbar toolbar toolbar\"\n",[36,1163,1164],{"class":38,"line":113},[36,1165,1166],{"class":625},"    \"nav     main    main    aside\"\n",[36,1168,1169,1172],{"class":38,"line":120},[36,1170,1171],{"class":625},"    \"nav     widget1 widget2 aside\"",[36,1173,63],{"class":46},[36,1175,1176,1178,1180,1183,1185],{"class":38,"line":639},[36,1177,461],{"class":53},[36,1179,57],{"class":46},[36,1181,1182],{"class":53},"12",[36,1184,173],{"class":77},[36,1186,63],{"class":46},[36,1188,1189],{"class":38,"line":647},[36,1190,95],{"class":46},[15,1192,218,1193,1196],{},[22,1194,1195],{},"2fr"," row gives the main area more vertical space than the widget row.",[137,1198,1200],{"id":1199},"photo-gallery","Photo Gallery",[15,1202,1203],{},"Responsive grid with featured items spanning multiple cells:",[27,1205,1207],{"className":29,"code":1206,"language":31,"meta":32,"style":32},".gallery {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));\n  grid-auto-rows: 200px;\n  grid-auto-flow: dense;\n  gap: 8px;\n}\n\n.gallery-item.featured {\n  grid-column: span 2;\n  grid-row: span 2;\n}\n",[22,1208,1209,1215,1225,1255,1268,1278,1290,1294,1298,1305,1318,1329],{"__ignoreMap":32},[36,1210,1211,1213],{"class":38,"line":39},[36,1212,886],{"class":42},[36,1214,47],{"class":46},[36,1216,1217,1219,1221,1223],{"class":38,"line":50},[36,1218,54],{"class":53},[36,1220,57],{"class":46},[36,1222,60],{"class":53},[36,1224,63],{"class":46},[36,1226,1227,1229,1231,1233,1235,1237,1239,1241,1243,1245,1247,1249,1251,1253],{"class":38,"line":66},[36,1228,69],{"class":53},[36,1230,57],{"class":46},[36,1232,440],{"class":53},[36,1234,443],{"class":46},[36,1236,326],{"class":53},[36,1238,449],{"class":46},[36,1240,915],{"class":53},[36,1242,443],{"class":46},[36,1244,170],{"class":53},[36,1246,173],{"class":77},[36,1248,449],{"class":46},[36,1250,74],{"class":53},[36,1252,78],{"class":77},[36,1254,930],{"class":46},[36,1256,1257,1260,1262,1264,1266],{"class":38,"line":92},[36,1258,1259],{"class":53},"  grid-auto-rows",[36,1261,57],{"class":46},[36,1263,170],{"class":53},[36,1265,173],{"class":77},[36,1267,63],{"class":46},[36,1269,1270,1272,1274,1276],{"class":38,"line":98},[36,1271,935],{"class":53},[36,1273,57],{"class":46},[36,1275,873],{"class":53},[36,1277,63],{"class":46},[36,1279,1280,1282,1284,1286,1288],{"class":38,"line":105},[36,1281,461],{"class":53},[36,1283,57],{"class":46},[36,1285,950],{"class":53},[36,1287,173],{"class":77},[36,1289,63],{"class":46},[36,1291,1292],{"class":38,"line":113},[36,1293,95],{"class":46},[36,1295,1296],{"class":38,"line":120},[36,1297,102],{"emptyLinePlaceholder":101},[36,1299,1300,1303],{"class":38,"line":639},[36,1301,1302],{"class":42},".gallery-item.featured",[36,1304,47],{"class":46},[36,1306,1307,1310,1313,1316],{"class":38,"line":647},[36,1308,1309],{"class":53},"  grid-column",[36,1311,1312],{"class":46},": span ",[36,1314,1315],{"class":53},"2",[36,1317,63],{"class":46},[36,1319,1320,1323,1325,1327],{"class":38,"line":660},[36,1321,1322],{"class":53},"  grid-row",[36,1324,1312],{"class":46},[36,1326,1315],{"class":53},[36,1328,63],{"class":46},[36,1330,1331],{"class":38,"line":665},[36,1332,95],{"class":46},[15,1334,218,1335,1337],{},[22,1336,873],{}," packing ensures smaller items fill gaps left by the featured images.",[10,1339,1341],{"id":1340},"spanning-and-placement","Spanning and Placement",[15,1343,1344,1345,1347],{},"Items can span multiple tracks using line numbers or the ",[22,1346,36],{}," keyword:",[27,1349,1351],{"className":29,"code":1350,"language":31,"meta":32,"style":32},"\u002F* Span 2 columns *\u002F\n.item {\n  grid-column: span 2;\n}\n\n\u002F* Span from line 2 to line 4 *\u002F\n.item {\n  grid-column: 2 \u002F 4;\n}\n\n\u002F* Span 2 columns starting from line 2 *\u002F\n.item {\n  grid-column: 2 \u002F span 2;\n}\n\n\u002F* Full shorthand: row-start \u002F col-start \u002F row-end \u002F col-end *\u002F\n.item {\n  grid-area: 1 \u002F 1 \u002F 3 \u002F 4;\n}\n",[22,1352,1353,1358,1365,1375,1379,1383,1388,1394,1408,1412,1416,1421,1427,1442,1446,1450,1455,1461,1483],{"__ignoreMap":32},[36,1354,1355],{"class":38,"line":39},[36,1356,1357],{"class":116},"\u002F* Span 2 columns *\u002F\n",[36,1359,1360,1363],{"class":38,"line":50},[36,1361,1362],{"class":42},".item",[36,1364,47],{"class":46},[36,1366,1367,1369,1371,1373],{"class":38,"line":66},[36,1368,1309],{"class":53},[36,1370,1312],{"class":46},[36,1372,1315],{"class":53},[36,1374,63],{"class":46},[36,1376,1377],{"class":38,"line":92},[36,1378,95],{"class":46},[36,1380,1381],{"class":38,"line":98},[36,1382,102],{"emptyLinePlaceholder":101},[36,1384,1385],{"class":38,"line":105},[36,1386,1387],{"class":116},"\u002F* Span from line 2 to line 4 *\u002F\n",[36,1389,1390,1392],{"class":38,"line":113},[36,1391,1362],{"class":42},[36,1393,47],{"class":46},[36,1395,1396,1398,1400,1402,1404,1406],{"class":38,"line":120},[36,1397,1309],{"class":53},[36,1399,57],{"class":46},[36,1401,1315],{"class":53},[36,1403,795],{"class":46},[36,1405,806],{"class":53},[36,1407,63],{"class":46},[36,1409,1410],{"class":38,"line":639},[36,1411,95],{"class":46},[36,1413,1414],{"class":38,"line":647},[36,1415,102],{"emptyLinePlaceholder":101},[36,1417,1418],{"class":38,"line":660},[36,1419,1420],{"class":116},"\u002F* Span 2 columns starting from line 2 *\u002F\n",[36,1422,1423,1425],{"class":38,"line":665},[36,1424,1362],{"class":42},[36,1426,47],{"class":46},[36,1428,1429,1431,1433,1435,1438,1440],{"class":38,"line":670},[36,1430,1309],{"class":53},[36,1432,57],{"class":46},[36,1434,1315],{"class":53},[36,1436,1437],{"class":46}," \u002F span ",[36,1439,1315],{"class":53},[36,1441,63],{"class":46},[36,1443,1444],{"class":38,"line":685},[36,1445,95],{"class":46},[36,1447,1448],{"class":38,"line":699},[36,1449,102],{"emptyLinePlaceholder":101},[36,1451,1452],{"class":38,"line":713},[36,1453,1454],{"class":116},"\u002F* Full shorthand: row-start \u002F col-start \u002F row-end \u002F col-end *\u002F\n",[36,1456,1457,1459],{"class":38,"line":731},[36,1458,1362],{"class":42},[36,1460,47],{"class":46},[36,1462,1463,1465,1467,1469,1471,1473,1475,1477,1479,1481],{"class":38,"line":744},[36,1464,788],{"class":53},[36,1466,57],{"class":46},[36,1468,74],{"class":53},[36,1470,795],{"class":46},[36,1472,74],{"class":53},[36,1474,795],{"class":46},[36,1476,446],{"class":53},[36,1478,795],{"class":46},[36,1480,806],{"class":53},[36,1482,63],{"class":46},[36,1484,1486],{"class":38,"line":1485},19,[36,1487,95],{"class":46},[15,1489,1490,1491,1493],{},"Prefer ",[22,1492,36],{}," over raw line numbers when you do not need to target specific lines — it is more readable and resilient to track changes.",[10,1495,1497],{"id":1496},"alignment","Alignment",[15,1499,1500],{},"Grid provides two levels of alignment:",[725,1502,1503,1516],{},[830,1504,1505],{},[833,1506,1507,1510,1513],{},[836,1508,1509],{},"Property",[836,1511,1512],{},"Scope",[836,1514,1515],{},"Controls",[843,1517,1518,1531,1543,1555,1568],{},[833,1519,1520,1525,1528],{},[848,1521,1522],{},[22,1523,1524],{},"justify-items",[848,1526,1527],{},"Container",[848,1529,1530],{},"Horizontal alignment of all items",[833,1532,1533,1538,1540],{},[848,1534,1535],{},[22,1536,1537],{},"align-items",[848,1539,1527],{},[848,1541,1542],{},"Vertical alignment of all items",[833,1544,1545,1550,1552],{},[848,1546,1547],{},[22,1548,1549],{},"place-items",[848,1551,1527],{},[848,1553,1554],{},"Both axes (align \u002F justify)",[833,1556,1557,1562,1565],{},[848,1558,1559],{},[22,1560,1561],{},"justify-self",[848,1563,1564],{},"Item",[848,1566,1567],{},"Override horizontal for one item",[833,1569,1570,1575,1577],{},[848,1571,1572],{},[22,1573,1574],{},"align-self",[848,1576,1564],{},[848,1578,1579],{},"Override vertical for one item",[27,1581,1583],{"className":29,"code":1582,"language":31,"meta":32,"style":32},".grid-container {\n  place-items: center;\n}\n\n.stretch-item {\n  align-self: stretch;\n}\n",[22,1584,1585,1591,1603,1607,1611,1618,1630],{"__ignoreMap":32},[36,1586,1587,1589],{"class":38,"line":39},[36,1588,43],{"class":42},[36,1590,47],{"class":46},[36,1592,1593,1596,1598,1601],{"class":38,"line":50},[36,1594,1595],{"class":53},"  place-items",[36,1597,57],{"class":46},[36,1599,1600],{"class":53},"center",[36,1602,63],{"class":46},[36,1604,1605],{"class":38,"line":66},[36,1606,95],{"class":46},[36,1608,1609],{"class":38,"line":92},[36,1610,102],{"emptyLinePlaceholder":101},[36,1612,1613,1616],{"class":38,"line":98},[36,1614,1615],{"class":42},".stretch-item",[36,1617,47],{"class":46},[36,1619,1620,1623,1625,1628],{"class":38,"line":105},[36,1621,1622],{"class":53},"  align-self",[36,1624,57],{"class":46},[36,1626,1627],{"class":53},"stretch",[36,1629,63],{"class":46},[36,1631,1632],{"class":38,"line":113},[36,1633,95],{"class":46},[10,1635,1637],{"id":1636},"try-it-yourself","Try It Yourself",[15,1639,1640,1641,1648],{},"Experiment with grid areas, column spans, and responsive patterns in our ",[1642,1643,1647],"a",{"href":1644,"rel":1645},"https:\u002F\u002Ftoolboxes.site\u002Ftools\u002Fcss-grid",[1646],"nofollow","CSS Grid Generator",". Adjust tracks visually and copy production-ready CSS.",[10,1650,1652],{"id":1651},"related-guides","Related Guides",[1654,1655,1656,1664],"ul",{},[1657,1658,1659,1663],"li",{},[1642,1660,1662],{"href":1661},"\u002Fguides\u002Fcss-grid-guide","CSS Grid Guide"," — Core grid concepts: columns, rows, gaps, and units",[1657,1665,1666,1670],{},[1642,1667,1669],{"href":1668},"\u002Fguides\u002Fcss-layout-systems","CSS Layout Systems"," — Grid vs Flexbox comparison and combined strategies",[1672,1673,1674],"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 pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}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 .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}",{"title":32,"searchDepth":50,"depth":50,"links":1676},[1677,1678,1684,1685,1688,1689,1694,1695,1696,1697],{"id":12,"depth":50,"text":13},{"id":131,"depth":50,"text":132,"children":1679},[1680,1681,1682,1683],{"id":139,"depth":66,"text":140},{"id":214,"depth":66,"text":215},{"id":273,"depth":66,"text":274},{"id":332,"depth":66,"text":333},{"id":406,"depth":50,"text":407},{"id":536,"depth":50,"text":537,"children":1686},[1687],{"id":764,"depth":66,"text":765},{"id":820,"depth":50,"text":820},{"id":967,"depth":50,"text":968,"children":1690},[1691,1692,1693],{"id":971,"depth":66,"text":972},{"id":1080,"depth":66,"text":1081},{"id":1199,"depth":66,"text":1200},{"id":1340,"depth":50,"text":1341},{"id":1496,"depth":50,"text":1497},{"id":1636,"depth":50,"text":1637},{"id":1651,"depth":50,"text":1652},"2026-05-28","Step-by-step CSS Grid tutorial covering all grid properties with practical examples.","md",{"immutable":101},"\u002Fguides\u002Fcss-grid-tutorial",{"title":5,"description":1699},"guides\u002Fcss-grid-tutorial","phZhyT2OXFgVemBPiB5PTMG30BoB9__Qvh2xhQVjeoY",1780401331054]