[{"data":1,"prerenderedAt":922},["ShallowReactive",2],{"guide-css-grid-areas-guide":3},{"id":4,"title":5,"body":6,"date":914,"description":915,"extension":916,"meta":917,"navigation":159,"path":918,"readingTime":129,"seo":919,"stem":920,"__hash__":921},"guides\u002Fguides\u002Fcss-grid-areas-guide.md","CSS Grid Template Areas Guide",{"type":7,"value":8,"toc":899},"minimark",[9,14,18,21,25,37,216,222,226,243,290,303,307,312,414,418,523,536,540,622,625,629,632,733,740,744,811,814,818,848,852,883,887,895],[10,11,13],"h2",{"id":12},"what-are-grid-template-areas","What Are Grid Template Areas?",[15,16,17],"p",{},"Grid template areas let you name sections of your layout and then arrange them visually using ASCII-art-like syntax in CSS. Instead of tracking column and line numbers, you describe your layout with words — making the code immediately readable and easy to rearrange.",[15,19,20],{},"This feature is the most expressive part of CSS Grid, turning layout definition from an exercise in coordinate math into something closer to sketching a wireframe.",[10,22,24],{"id":23},"basic-syntax","Basic Syntax",[15,26,27,28,32,33,36],{},"Define named areas in ",[29,30,31],"code",{},"grid-template-areas",", then assign elements to those names with ",[29,34,35],{},"grid-area",":",[38,39,44],"pre",{"className":40,"code":41,"language":42,"meta":43,"style":43},"language-css shiki shiki-themes github-light github-dark",".layout {\n  display: grid;\n  grid-template-columns: 250px 1fr;\n  grid-template-rows: auto 1fr auto;\n  grid-template-areas:\n    \"sidebar header\"\n    \"sidebar main\"\n    \"sidebar footer\";\n}\n\n.header  { grid-area: header; }\n.sidebar { grid-area: sidebar; }\n.main    { grid-area: main; }\n.footer  { grid-area: footer; }\n","css","",[29,45,46,59,75,98,118,127,134,140,148,154,161,175,189,203],{"__ignoreMap":43},[47,48,51,55],"span",{"class":49,"line":50},"line",1,[47,52,54],{"class":53},"sScJk",".layout",[47,56,58],{"class":57},"sVt8B"," {\n",[47,60,62,66,69,72],{"class":49,"line":61},2,[47,63,65],{"class":64},"sj4cs","  display",[47,67,68],{"class":57},": ",[47,70,71],{"class":64},"grid",[47,73,74],{"class":57},";\n",[47,76,78,81,83,86,90,93,96],{"class":49,"line":77},3,[47,79,80],{"class":64},"  grid-template-columns",[47,82,68],{"class":57},[47,84,85],{"class":64},"250",[47,87,89],{"class":88},"szBVR","px",[47,91,92],{"class":64}," 1",[47,94,95],{"class":88},"fr",[47,97,74],{"class":57},[47,99,101,104,106,109,111,113,116],{"class":49,"line":100},4,[47,102,103],{"class":64},"  grid-template-rows",[47,105,68],{"class":57},[47,107,108],{"class":64},"auto",[47,110,92],{"class":64},[47,112,95],{"class":88},[47,114,115],{"class":64}," auto",[47,117,74],{"class":57},[47,119,121,124],{"class":49,"line":120},5,[47,122,123],{"class":64},"  grid-template-areas",[47,125,126],{"class":57},":\n",[47,128,130],{"class":49,"line":129},6,[47,131,133],{"class":132},"sZZnC","    \"sidebar header\"\n",[47,135,137],{"class":49,"line":136},7,[47,138,139],{"class":132},"    \"sidebar main\"\n",[47,141,143,146],{"class":49,"line":142},8,[47,144,145],{"class":132},"    \"sidebar footer\"",[47,147,74],{"class":57},[47,149,151],{"class":49,"line":150},9,[47,152,153],{"class":57},"}\n",[47,155,157],{"class":49,"line":156},10,[47,158,160],{"emptyLinePlaceholder":159},true,"\n",[47,162,164,167,170,172],{"class":49,"line":163},11,[47,165,166],{"class":53},".header",[47,168,169],{"class":57},"  { ",[47,171,35],{"class":64},[47,173,174],{"class":57},": header; }\n",[47,176,178,181,184,186],{"class":49,"line":177},12,[47,179,180],{"class":53},".sidebar",[47,182,183],{"class":57}," { ",[47,185,35],{"class":64},[47,187,188],{"class":57},": sidebar; }\n",[47,190,192,195,198,200],{"class":49,"line":191},13,[47,193,194],{"class":53},".main",[47,196,197],{"class":57},"    { ",[47,199,35],{"class":64},[47,201,202],{"class":57},": main; }\n",[47,204,206,209,211,213],{"class":49,"line":205},14,[47,207,208],{"class":53},".footer",[47,210,169],{"class":57},[47,212,35],{"class":64},[47,214,215],{"class":57},": footer; }\n",[15,217,218,219,221],{},"Each quoted string in ",[29,220,31],{}," represents one row. The names inside each string map cells to their assigned area. The visual alignment of names mirrors the actual layout — you can see sidebar sitting on the left spanning all three rows.",[10,223,225],{"id":224},"rules-for-named-areas","Rules for Named Areas",[227,228,229,237,240],"ul",{},[230,231,232,233,236],"li",{},"Every cell in the grid must be filled — use a period (",[29,234,235],{},".",") for empty cells.",[230,238,239],{},"An area name must form a single contiguous rectangle. You cannot create L-shaped or disconnected areas.",[230,241,242],{},"An area can span multiple rows and columns by repeating the name.",[38,244,246],{"className":40,"code":245,"language":42,"meta":43,"style":43},"grid-template-areas:\n  \"header  header  header\"\n  \"sidebar main    aside\"\n  \"sidebar footer  footer\";\n",[29,247,248,255,269,280],{"__ignoreMap":43},[47,249,250,253],{"class":49,"line":50},[47,251,31],{"class":252},"s9eBZ",[47,254,126],{"class":57},[47,256,257,260,263,266],{"class":49,"line":61},[47,258,259],{"class":57},"  \"",[47,261,262],{"class":252},"header",[47,264,265],{"class":252},"  header",[47,267,268],{"class":57},"  header\"\n",[47,270,271,274,277],{"class":49,"line":77},[47,272,273],{"class":57},"  \"sidebar ",[47,275,276],{"class":252},"main",[47,278,279],{"class":57},"    aside\"\n",[47,281,282,284,287],{"class":49,"line":100},[47,283,273],{"class":57},[47,285,286],{"class":252},"footer",[47,288,289],{"class":57},"  footer\";\n",[15,291,292,293,295,296,299,300,302],{},"Here, ",[29,294,262],{}," spans three columns, ",[29,297,298],{},"sidebar"," spans two rows, and ",[29,301,286],{}," spans two columns — all from readable names rather than line numbers.",[10,304,306],{"id":305},"common-layout-patterns","Common Layout Patterns",[308,309,311],"h3",{"id":310},"classic-holy-grail","Classic Holy Grail",[38,313,315],{"className":40,"code":314,"language":42,"meta":43,"style":43},".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    \"nav    content aside\"\n    \"footer footer  footer\";\n  min-height: 100vh;\n}\n",[29,316,317,324,334,356,372,378,383,388,395,410],{"__ignoreMap":43},[47,318,319,322],{"class":49,"line":50},[47,320,321],{"class":53},".holy-grail",[47,323,58],{"class":57},[47,325,326,328,330,332],{"class":49,"line":61},[47,327,65],{"class":64},[47,329,68],{"class":57},[47,331,71],{"class":64},[47,333,74],{"class":57},[47,335,336,338,340,343,345,347,349,352,354],{"class":49,"line":77},[47,337,80],{"class":64},[47,339,68],{"class":57},[47,341,342],{"class":64},"200",[47,344,89],{"class":88},[47,346,92],{"class":64},[47,348,95],{"class":88},[47,350,351],{"class":64}," 200",[47,353,89],{"class":88},[47,355,74],{"class":57},[47,357,358,360,362,364,366,368,370],{"class":49,"line":100},[47,359,103],{"class":64},[47,361,68],{"class":57},[47,363,108],{"class":64},[47,365,92],{"class":64},[47,367,95],{"class":88},[47,369,115],{"class":64},[47,371,74],{"class":57},[47,373,374,376],{"class":49,"line":120},[47,375,123],{"class":64},[47,377,126],{"class":57},[47,379,380],{"class":49,"line":129},[47,381,382],{"class":132},"    \"header header  header\"\n",[47,384,385],{"class":49,"line":136},[47,386,387],{"class":132},"    \"nav    content aside\"\n",[47,389,390,393],{"class":49,"line":142},[47,391,392],{"class":132},"    \"footer footer  footer\"",[47,394,74],{"class":57},[47,396,397,400,402,405,408],{"class":49,"line":150},[47,398,399],{"class":64},"  min-height",[47,401,68],{"class":57},[47,403,404],{"class":64},"100",[47,406,407],{"class":88},"vh",[47,409,74],{"class":57},[47,411,412],{"class":49,"line":156},[47,413,153],{"class":57},[308,415,417],{"id":416},"dashboard-layout","Dashboard Layout",[38,419,421],{"className":40,"code":420,"language":42,"meta":43,"style":43},".dashboard {\n  display: grid;\n  grid-template-columns: 240px 1fr 1fr;\n  grid-template-rows: 60px 1fr 1fr;\n  grid-template-areas:\n    \"nav    nav    nav\"\n    \"sidebar chart chart\"\n    \"sidebar table stats\";\n  gap: 16px;\n}\n",[29,422,423,430,440,461,482,488,493,498,505,519],{"__ignoreMap":43},[47,424,425,428],{"class":49,"line":50},[47,426,427],{"class":53},".dashboard",[47,429,58],{"class":57},[47,431,432,434,436,438],{"class":49,"line":61},[47,433,65],{"class":64},[47,435,68],{"class":57},[47,437,71],{"class":64},[47,439,74],{"class":57},[47,441,442,444,446,449,451,453,455,457,459],{"class":49,"line":77},[47,443,80],{"class":64},[47,445,68],{"class":57},[47,447,448],{"class":64},"240",[47,450,89],{"class":88},[47,452,92],{"class":64},[47,454,95],{"class":88},[47,456,92],{"class":64},[47,458,95],{"class":88},[47,460,74],{"class":57},[47,462,463,465,467,470,472,474,476,478,480],{"class":49,"line":100},[47,464,103],{"class":64},[47,466,68],{"class":57},[47,468,469],{"class":64},"60",[47,471,89],{"class":88},[47,473,92],{"class":64},[47,475,95],{"class":88},[47,477,92],{"class":64},[47,479,95],{"class":88},[47,481,74],{"class":57},[47,483,484,486],{"class":49,"line":120},[47,485,123],{"class":64},[47,487,126],{"class":57},[47,489,490],{"class":49,"line":129},[47,491,492],{"class":132},"    \"nav    nav    nav\"\n",[47,494,495],{"class":49,"line":136},[47,496,497],{"class":132},"    \"sidebar chart chart\"\n",[47,499,500,503],{"class":49,"line":142},[47,501,502],{"class":132},"    \"sidebar table stats\"",[47,504,74],{"class":57},[47,506,507,510,512,515,517],{"class":49,"line":150},[47,508,509],{"class":64},"  gap",[47,511,68],{"class":57},[47,513,514],{"class":64},"16",[47,516,89],{"class":88},[47,518,74],{"class":57},[47,520,521],{"class":49,"line":156},[47,522,153],{"class":57},[15,524,525,526,528,529,528,532,535],{},"Dashboard layouts benefit from named areas because the sections have clear semantic roles — ",[29,527,298],{},", ",[29,530,531],{},"chart",[29,533,534],{},"stats"," — that make the grid definition self-documenting.",[308,537,539],{"id":538},"card-layout-with-gutter","Card Layout With Gutter",[38,541,543],{"className":40,"code":542,"language":42,"meta":43,"style":43},".cards {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  grid-template-areas:\n    \"card1 card2 card3\"\n    \"card4 card5 card6\";\n  gap: 24px;\n}\n",[29,544,545,552,562,587,593,598,605,618],{"__ignoreMap":43},[47,546,547,550],{"class":49,"line":50},[47,548,549],{"class":53},".cards",[47,551,58],{"class":57},[47,553,554,556,558,560],{"class":49,"line":61},[47,555,65],{"class":64},[47,557,68],{"class":57},[47,559,71],{"class":64},[47,561,74],{"class":57},[47,563,564,566,568,571,574,577,579,582,584],{"class":49,"line":77},[47,565,80],{"class":64},[47,567,68],{"class":57},[47,569,570],{"class":64},"repeat",[47,572,573],{"class":57},"(",[47,575,576],{"class":64},"3",[47,578,528],{"class":57},[47,580,581],{"class":64},"1",[47,583,95],{"class":88},[47,585,586],{"class":57},");\n",[47,588,589,591],{"class":49,"line":100},[47,590,123],{"class":64},[47,592,126],{"class":57},[47,594,595],{"class":49,"line":120},[47,596,597],{"class":132},"    \"card1 card2 card3\"\n",[47,599,600,603],{"class":49,"line":129},[47,601,602],{"class":132},"    \"card4 card5 card6\"",[47,604,74],{"class":57},[47,606,607,609,611,614,616],{"class":49,"line":136},[47,608,509],{"class":64},[47,610,68],{"class":57},[47,612,613],{"class":64},"24",[47,615,89],{"class":88},[47,617,74],{"class":57},[47,619,620],{"class":49,"line":142},[47,621,153],{"class":57},[15,623,624],{},"For repeating identical cards, use auto-placement instead of named areas — named areas shine when sections have distinct roles.",[10,626,628],{"id":627},"responsive-reordering","Responsive Reordering",[15,630,631],{},"Named areas make responsive reordering simple. Change the template areas in a media query without touching any HTML:",[38,633,635],{"className":40,"code":634,"language":42,"meta":43,"style":43},"\u002F* Mobile: stacked layout *\u002F\n@media (max-width: 768px) {\n  .layout {\n    grid-template-columns: 1fr;\n    grid-template-rows: auto;\n    grid-template-areas:\n      \"header\"\n      \"main\"\n      \"sidebar\"\n      \"footer\";\n  }\n}\n",[29,636,637,643,664,671,684,695,702,707,712,717,724,729],{"__ignoreMap":43},[47,638,639],{"class":49,"line":50},[47,640,642],{"class":641},"sJ8bj","\u002F* Mobile: stacked layout *\u002F\n",[47,644,645,648,651,654,656,659,661],{"class":49,"line":61},[47,646,647],{"class":88},"@media",[47,649,650],{"class":57}," (",[47,652,653],{"class":64},"max-width",[47,655,68],{"class":57},[47,657,658],{"class":64},"768",[47,660,89],{"class":88},[47,662,663],{"class":57},") {\n",[47,665,666,669],{"class":49,"line":77},[47,667,668],{"class":53},"  .layout",[47,670,58],{"class":57},[47,672,673,676,678,680,682],{"class":49,"line":100},[47,674,675],{"class":64},"    grid-template-columns",[47,677,68],{"class":57},[47,679,581],{"class":64},[47,681,95],{"class":88},[47,683,74],{"class":57},[47,685,686,689,691,693],{"class":49,"line":120},[47,687,688],{"class":64},"    grid-template-rows",[47,690,68],{"class":57},[47,692,108],{"class":64},[47,694,74],{"class":57},[47,696,697,700],{"class":49,"line":129},[47,698,699],{"class":64},"    grid-template-areas",[47,701,126],{"class":57},[47,703,704],{"class":49,"line":136},[47,705,706],{"class":132},"      \"header\"\n",[47,708,709],{"class":49,"line":142},[47,710,711],{"class":132},"      \"main\"\n",[47,713,714],{"class":49,"line":150},[47,715,716],{"class":132},"      \"sidebar\"\n",[47,718,719,722],{"class":49,"line":156},[47,720,721],{"class":132},"      \"footer\"",[47,723,74],{"class":57},[47,725,726],{"class":49,"line":163},[47,727,728],{"class":57},"  }\n",[47,730,731],{"class":49,"line":177},[47,732,153],{"class":57},[15,734,735,736,739],{},"The sidebar drops below the main content on narrow screens — no ",[29,737,738],{},"order"," property, no flex wrapping, no duplicated markup.",[10,741,743],{"id":742},"areas-vs-line-numbers","Areas vs Line Numbers",[745,746,747,763],"table",{},[748,749,750],"thead",{},[751,752,753,757,760],"tr",{},[754,755,756],"th",{},"Aspect",[754,758,759],{},"Grid Template Areas",[754,761,762],{},"Line Numbers",[764,765,766,778,789,800],"tbody",{},[751,767,768,772,775],{},[769,770,771],"td",{},"Readability",[769,773,774],{},"Self-documenting",[769,776,777],{},"Requires mental calculation",[751,779,780,783,786],{},[769,781,782],{},"Flexibility",[769,784,785],{},"Easy reordering in media queries",[769,787,788],{},"Must recalculate spans",[751,790,791,794,797],{},[769,792,793],{},"Limitations",[769,795,796],{},"Rectangular areas only",[769,798,799],{},"Any shape possible",[751,801,802,805,808],{},[769,803,804],{},"Best for",[769,806,807],{},"Page-level layouts",[769,809,810],{},"Complex or overlapping grids",[15,812,813],{},"Use named areas for page shells with distinct sections. Use line numbers for fine-grained placement, overlapping elements, or grids with many identical items.",[10,815,817],{"id":816},"common-mistakes","Common Mistakes",[227,819,820,833,842],{},[230,821,822,826,827,829,830,832],{},[823,824,825],"strong",{},"Misspelling a name"," — if the name in ",[29,828,31],{}," does not match any ",[29,831,35],{}," assignment, the cell is ignored and the layout breaks silently.",[230,834,835,838,839,841],{},[823,836,837],{},"Non-rectangular areas"," — using the same name in a non-contiguous shape causes the declaration to be invalid and the entire ",[29,840,31],{}," rule is dropped.",[230,843,844,847],{},[823,845,846],{},"Mismatched row lengths"," — each row string must have the same number of cells. An extra or missing name invalidates the whole property.",[10,849,851],{"id":850},"key-takeaways","Key Takeaways",[227,853,854,857,860,863,866,869],{},[230,855,856],{},"Grid template areas use readable names to define layout, replacing line-number math with visual ASCII syntax.",[230,858,859],{},"Each area must form a single contiguous rectangle — periods mark empty cells.",[230,861,862],{},"Reordering for responsive design is as simple as rewriting the template in a media query.",[230,864,865],{},"Named areas are best for page-level layouts with distinct sections; line numbers suit complex or overlapping grids.",[230,867,868],{},"Mismatched row lengths, typos, and non-rectangular shapes silently break the entire declaration.",[230,870,871,872,874,875,878,879,882],{},"Combine ",[29,873,31],{}," with ",[29,876,877],{},"grid-template-columns"," and ",[29,880,881],{},"grid-template-rows"," for full control.",[10,884,886],{"id":885},"try-it-yourself","Try It Yourself",[15,888,889,890,235],{},"Visualize and experiment with grid template areas interactively using the ",[891,892,894],"a",{"href":893},"\u002Ftools\u002Fcss-grid","CSS Grid Generator",[896,897,898],"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 .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}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 .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}",{"title":43,"searchDepth":61,"depth":61,"links":900},[901,902,903,904,909,910,911,912,913],{"id":12,"depth":61,"text":13},{"id":23,"depth":61,"text":24},{"id":224,"depth":61,"text":225},{"id":305,"depth":61,"text":306,"children":905},[906,907,908],{"id":310,"depth":77,"text":311},{"id":416,"depth":77,"text":417},{"id":538,"depth":77,"text":539},{"id":627,"depth":61,"text":628},{"id":742,"depth":61,"text":743},{"id":816,"depth":61,"text":817},{"id":850,"depth":61,"text":851},{"id":885,"depth":61,"text":886},"2026-05-28","Build page layouts visually with named grid areas — the most intuitive Grid feature.","md",{"immutable":159},"\u002Fguides\u002Fcss-grid-areas-guide",{"title":5,"description":915},"guides\u002Fcss-grid-areas-guide","gpc65Ur3AIp3j9abm5B42pnTZNQj0707FY62BVKcpWc",1780401332846]