[{"data":1,"prerenderedAt":1234},["ShallowReactive",2],{"guide-css-grid-guide":3},{"id":4,"title":5,"body":6,"date":1226,"description":1227,"extension":1228,"meta":1229,"navigation":678,"path":1230,"readingTime":175,"seo":1231,"stem":1232,"__hash__":1233},"guides\u002Fguides\u002Fcss-grid-guide.md","CSS Grid Generator Guide",{"type":7,"value":8,"toc":1199},"minimark",[9,14,18,21,37,40,44,47,52,55,91,179,182,186,189,242,249,253,260,310,313,317,320,330,334,337,341,502,506,611,615,621,647,651,696,705,709,716,720,724,727,936,940,943,1013,1016,1020,1023,1140,1144,1148,1151,1155,1164,1168,1175,1179,1195],[10,11,13],"h2",{"id":12},"what-is-css-grid","What Is CSS Grid?",[15,16,17],"p",{},"CSS Grid is a two-dimensional layout system that controls both rows and columns at the same time. Unlike Flexbox, which handles one axis per container, Grid lets you define the entire surface — where items sit, how tracks size, and how gaps distribute.",[15,19,20],{},"Use Grid when your layout involves:",[22,23,24,28,31,34],"ul",{},[25,26,27],"li",{},"Page-level structure (sidebar + main + footer)",[25,29,30],{},"Card galleries with aligned rows and columns",[25,32,33],{},"Dashboard panels that span different areas",[25,35,36],{},"Any design where items align in two directions",[15,38,39],{},"Grid replaces float hacks, inline-block workarounds, and table-based layouts with declarations the browser handles natively.",[10,41,43],{"id":42},"how-to-use-the-css-grid-generator","How to Use the CSS Grid Generator",[15,45,46],{},"A CSS Grid generator removes the trial-and-error of writing grid code by hand. Instead of guessing column widths and row heights, you adjust values visually and copy the generated CSS.",[48,49,51],"h3",{"id":50},"step-1-set-columns-and-rows","Step 1: Set Columns and Rows",[15,53,54],{},"Start by defining the grid structure. Enter the number of columns and rows your layout needs. Then choose a unit for each track:",[22,56,57,67,75,83],{},[25,58,59,66],{},[60,61,62],"strong",{},[63,64,65],"code",{},"px"," — Fixed width. Columns stay at the exact size regardless of screen width.",[25,68,69,74],{},[60,70,71],{},[63,72,73],{},"fr"," — Fractional unit. Distributes available space proportionally. The go-to for responsive layouts.",[25,76,77,82],{},[60,78,79],{},[63,80,81],{},"%"," — Percentage of the container. Useful when you need strict proportions.",[25,84,85,90],{},[60,86,87],{},[63,88,89],{},"auto"," — Sizes to content. Columns or rows shrink or grow based on what is inside them.",[92,93,98],"pre",{"className":94,"code":95,"language":96,"meta":97,"style":97},"language-css shiki shiki-themes github-light github-dark",".grid-container {\n  display: grid;\n  grid-template-columns: 250px 1fr 1fr;\n  grid-template-rows: auto 1fr auto;\n}\n","css","",[63,99,100,113,129,154,173],{"__ignoreMap":97},[101,102,105,109],"span",{"class":103,"line":104},"line",1,[101,106,108],{"class":107},"sScJk",".grid-container",[101,110,112],{"class":111},"sVt8B"," {\n",[101,114,116,120,123,126],{"class":103,"line":115},2,[101,117,119],{"class":118},"sj4cs","  display",[101,121,122],{"class":111},": ",[101,124,125],{"class":118},"grid",[101,127,128],{"class":111},";\n",[101,130,132,135,137,140,143,146,148,150,152],{"class":103,"line":131},3,[101,133,134],{"class":118},"  grid-template-columns",[101,136,122],{"class":111},[101,138,139],{"class":118},"250",[101,141,65],{"class":142},"szBVR",[101,144,145],{"class":118}," 1",[101,147,73],{"class":142},[101,149,145],{"class":118},[101,151,73],{"class":142},[101,153,128],{"class":111},[101,155,157,160,162,164,166,168,171],{"class":103,"line":156},4,[101,158,159],{"class":118},"  grid-template-rows",[101,161,122],{"class":111},[101,163,89],{"class":118},[101,165,145],{"class":118},[101,167,73],{"class":142},[101,169,170],{"class":118}," auto",[101,172,128],{"class":111},[101,174,176],{"class":103,"line":175},5,[101,177,178],{"class":111},"}\n",[15,180,181],{},"This creates a fixed sidebar on the left with two flexible content columns, and rows that size to their content at the top and bottom.",[48,183,185],{"id":184},"step-2-choose-track-sizes","Step 2: Choose Track Sizes",[15,187,188],{},"Mix units for maximum flexibility:",[92,190,192],{"className":94,"code":191,"language":96,"meta":97,"style":97},".grid-container {\n  grid-template-columns: repeat(3, minmax(200px, 1fr));\n}\n",[63,193,194,200,238],{"__ignoreMap":97},[101,195,196,198],{"class":103,"line":104},[101,197,108],{"class":107},[101,199,112],{"class":111},[101,201,202,204,206,209,212,215,218,221,223,226,228,230,233,235],{"class":103,"line":115},[101,203,134],{"class":118},[101,205,122],{"class":111},[101,207,208],{"class":118},"repeat",[101,210,211],{"class":111},"(",[101,213,214],{"class":118},"3",[101,216,217],{"class":111},", ",[101,219,220],{"class":118},"minmax",[101,222,211],{"class":111},[101,224,225],{"class":118},"200",[101,227,65],{"class":142},[101,229,217],{"class":111},[101,231,232],{"class":118},"1",[101,234,73],{"class":142},[101,236,237],{"class":111},"));\n",[101,239,240],{"class":103,"line":131},[101,241,178],{"class":111},[15,243,244,245,248],{},"The ",[63,246,247],{},"minmax()"," function sets a floor of 200px per column. Columns grow beyond that to fill space but never shrink below the minimum — preventing broken layouts on narrow screens.",[48,250,252],{"id":251},"step-3-adjust-the-gap","Step 3: Adjust the Gap",[15,254,255,256,259],{},"Set spacing between grid items using ",[63,257,258],{},"gap",":",[261,262,263,276],"table",{},[264,265,266],"thead",{},[267,268,269,273],"tr",{},[270,271,272],"th",{},"Property",[270,274,275],{},"Effect",[277,278,279,290,300],"tbody",{},[267,280,281,287],{},[282,283,284],"td",{},[63,285,286],{},"gap: 24px",[282,288,289],{},"Same spacing for rows and columns",[267,291,292,297],{},[282,293,294],{},[63,295,296],{},"row-gap: 16px",[282,298,299],{},"Vertical spacing only",[267,301,302,307],{},[282,303,304],{},[63,305,306],{},"column-gap: 32px",[282,308,309],{},"Horizontal spacing only",[15,311,312],{},"Gaps apply only between items — never before the first item or after the last. This makes them cleaner than margin-based spacing.",[48,314,316],{"id":315},"step-4-preview-and-copy","Step 4: Preview and Copy",[15,318,319],{},"Watch the grid reshape live as you change values. When it looks right, copy the generated CSS straight into your project.",[15,321,322,323],{},"Try it yourself: ",[324,325,329],"a",{"href":326,"rel":327},"https:\u002F\u002Ftoolboxes.site\u002Ftools\u002Fcss-grid",[328],"nofollow","CSS Grid Generator",[10,331,333],{"id":332},"understanding-grid-properties","Understanding Grid Properties",[15,335,336],{},"CSS Grid packs a lot of functionality into a small set of properties. Here is a quick reference for the ones you will use most:",[48,338,340],{"id":339},"container-properties","Container Properties",[261,342,343,355],{},[264,344,345],{},[267,346,347,349,352],{},[270,348,272],{},[270,350,351],{},"What It Does",[270,353,354],{},"Common Values",[277,356,357,377,395,410,427,448,463,484],{},[267,358,359,364,367],{},[282,360,361],{},[63,362,363],{},"grid-template-columns",[282,365,366],{},"Defines column tracks",[282,368,369,217,372,217,375],{},[63,370,371],{},"1fr 2fr",[63,373,374],{},"repeat(3, 1fr)",[63,376,247],{},[267,378,379,384,387],{},[282,380,381],{},[63,382,383],{},"grid-template-rows",[282,385,386],{},"Defines row tracks",[282,388,389,217,392],{},[63,390,391],{},"auto 1fr auto",[63,393,394],{},"200px 400px",[267,396,397,402,405],{},[282,398,399],{},[63,400,401],{},"grid-template-areas",[282,403,404],{},"Names grid regions",[282,406,407],{},[63,408,409],{},"\"header header\" \"sidebar content\"",[267,411,412,416,419],{},[282,413,414],{},[63,415,258],{},[282,417,418],{},"Spacing between tracks",[282,420,421,217,424],{},[63,422,423],{},"16px",[63,425,426],{},"1rem",[267,428,429,434,437],{},[282,430,431],{},[63,432,433],{},"grid-auto-flow",[282,435,436],{},"How items fill cells",[282,438,439,217,442,217,445],{},[63,440,441],{},"row",[63,443,444],{},"column",[63,446,447],{},"dense",[267,449,450,455,458],{},[282,451,452],{},[63,453,454],{},"grid-auto-rows",[282,456,457],{},"Size of implicit rows",[282,459,460],{},[63,461,462],{},"minmax(100px, auto)",[267,464,465,470,473],{},[282,466,467],{},[63,468,469],{},"justify-items",[282,471,472],{},"Horizontal alignment of items",[282,474,475,217,478,217,481],{},[63,476,477],{},"start",[63,479,480],{},"center",[63,482,483],{},"stretch",[267,485,486,491,494],{},[282,487,488],{},[63,489,490],{},"align-items",[282,492,493],{},"Vertical alignment of items",[282,495,496,217,498,217,500],{},[63,497,477],{},[63,499,480],{},[63,501,483],{},[48,503,505],{"id":504},"item-properties","Item Properties",[261,507,508,518],{},[264,509,510],{},[267,511,512,514,516],{},[270,513,272],{},[270,515,351],{},[270,517,354],{},[277,519,520,538,556,574,593],{},[267,521,522,527,530],{},[282,523,524],{},[63,525,526],{},"grid-column",[282,528,529],{},"Column start \u002F end",[282,531,532,217,535],{},[63,533,534],{},"1 \u002F 3",[63,536,537],{},"span 2",[267,539,540,545,548],{},[282,541,542],{},[63,543,544],{},"grid-row",[282,546,547],{},"Row start \u002F end",[282,549,550,217,553],{},[63,551,552],{},"2 \u002F 4",[63,554,555],{},"span 3",[267,557,558,563,566],{},[282,559,560],{},[63,561,562],{},"grid-area",[282,564,565],{},"Assigns to named area or sets all four lines",[282,567,568,217,571],{},[63,569,570],{},"header",[63,572,573],{},"1 \u002F 1 \u002F 3 \u002F 4",[267,575,576,581,584],{},[282,577,578],{},[63,579,580],{},"justify-self",[282,582,583],{},"Override horizontal alignment",[282,585,586,217,588,217,590],{},[63,587,477],{},[63,589,480],{},[63,591,592],{},"end",[267,594,595,600,603],{},[282,596,597],{},[63,598,599],{},"align-self",[282,601,602],{},"Override vertical alignment",[282,604,605,217,607,217,609],{},[63,606,477],{},[63,608,480],{},[63,610,592],{},[48,612,614],{"id":613},"the-repeat-function","The repeat() Function",[15,616,244,617,620],{},[63,618,619],{},"repeat()"," function saves you from writing the same track size over and over:",[92,622,624],{"className":94,"code":623,"language":96,"meta":97,"style":97},"\u002F* These are equivalent *\u002F\ngrid-template-columns: 1fr 1fr 1fr 1fr;\ngrid-template-columns: repeat(4, 1fr);\n",[63,625,626,632,640],{"__ignoreMap":97},[101,627,628],{"class":103,"line":104},[101,629,631],{"class":630},"sJ8bj","\u002F* These are equivalent *\u002F\n",[101,633,634,637],{"class":103,"line":115},[101,635,363],{"class":636},"s9eBZ",[101,638,639],{"class":111},": 1fr 1fr 1fr 1fr;\n",[101,641,642,644],{"class":103,"line":131},[101,643,363],{"class":636},[101,645,646],{"class":111},": repeat(4, 1fr);\n",[48,648,650],{"id":649},"auto-fill-vs-auto-fit","auto-fill vs auto-fit",[92,652,654],{"className":94,"code":653,"language":96,"meta":97,"style":97},"\u002F* auto-fill: creates empty tracks to fill the row *\u002F\ngrid-template-columns: repeat(auto-fill, minmax(200px, 1fr));\n\n\u002F* auto-fit: collapses empty tracks so items expand *\u002F\ngrid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n",[63,655,656,661,674,680,685],{"__ignoreMap":97},[101,657,658],{"class":103,"line":104},[101,659,660],{"class":630},"\u002F* auto-fill: creates empty tracks to fill the row *\u002F\n",[101,662,663,665,668,671],{"class":103,"line":115},[101,664,363],{"class":636},[101,666,667],{"class":111},": repeat(",[101,669,670],{"class":636},"auto-fill",[101,672,673],{"class":111},", minmax(200px, 1fr));\n",[101,675,676],{"class":103,"line":131},[101,677,679],{"emptyLinePlaceholder":678},true,"\n",[101,681,682],{"class":103,"line":156},[101,683,684],{"class":630},"\u002F* auto-fit: collapses empty tracks so items expand *\u002F\n",[101,686,687,689,691,694],{"class":103,"line":175},[101,688,363],{"class":636},[101,690,667],{"class":111},[101,692,693],{"class":636},"auto-fit",[101,695,673],{"class":111},[15,697,698,699,701,702,704],{},"Use ",[63,700,670],{}," for consistent minimum widths. Use ",[63,703,693],{}," when items should stretch to fill the container when space allows.",[10,706,708],{"id":707},"try-it-yourself","Try It Yourself",[15,710,711,712,715],{},"Build grid layouts visually with our ",[324,713,329],{"href":326,"rel":714},[328],". Define columns, rows, and gaps — then copy the CSS straight into your project.",[10,717,719],{"id":718},"common-grid-layouts","Common Grid Layouts",[48,721,723],{"id":722},"holy-grail-layout","Holy Grail Layout",[15,725,726],{},"The classic web layout — header, three-column body, and footer:",[92,728,730],{"className":94,"code":729,"language":96,"meta":97,"style":97},".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  gap: 0;\n}\n\n.header  { grid-area: header; }\n.left    { grid-area: left; }\n.content { grid-area: content; }\n.right   { grid-area: right; }\n.footer  { grid-area: footer; }\n",[63,731,732,739,749,770,786,794,801,807,815,831,844,849,854,868,887,905,923],{"__ignoreMap":97},[101,733,734,737],{"class":103,"line":104},[101,735,736],{"class":107},".holy-grail",[101,738,112],{"class":111},[101,740,741,743,745,747],{"class":103,"line":115},[101,742,119],{"class":118},[101,744,122],{"class":111},[101,746,125],{"class":118},[101,748,128],{"class":111},[101,750,751,753,755,757,759,761,763,766,768],{"class":103,"line":131},[101,752,134],{"class":118},[101,754,122],{"class":111},[101,756,225],{"class":118},[101,758,65],{"class":142},[101,760,145],{"class":118},[101,762,73],{"class":142},[101,764,765],{"class":118}," 200",[101,767,65],{"class":142},[101,769,128],{"class":111},[101,771,772,774,776,778,780,782,784],{"class":103,"line":156},[101,773,159],{"class":118},[101,775,122],{"class":111},[101,777,89],{"class":118},[101,779,145],{"class":118},[101,781,73],{"class":142},[101,783,170],{"class":118},[101,785,128],{"class":111},[101,787,788,791],{"class":103,"line":175},[101,789,790],{"class":118},"  grid-template-areas",[101,792,793],{"class":111},":\n",[101,795,797],{"class":103,"line":796},6,[101,798,800],{"class":799},"sZZnC","    \"header header  header\"\n",[101,802,804],{"class":103,"line":803},7,[101,805,806],{"class":799},"    \"left   content right\"\n",[101,808,810,813],{"class":103,"line":809},8,[101,811,812],{"class":799},"    \"footer footer  footer\"",[101,814,128],{"class":111},[101,816,818,821,823,826,829],{"class":103,"line":817},9,[101,819,820],{"class":118},"  min-height",[101,822,122],{"class":111},[101,824,825],{"class":118},"100",[101,827,828],{"class":142},"vh",[101,830,128],{"class":111},[101,832,834,837,839,842],{"class":103,"line":833},10,[101,835,836],{"class":118},"  gap",[101,838,122],{"class":111},[101,840,841],{"class":118},"0",[101,843,128],{"class":111},[101,845,847],{"class":103,"line":846},11,[101,848,178],{"class":111},[101,850,852],{"class":103,"line":851},12,[101,853,679],{"emptyLinePlaceholder":678},[101,855,857,860,863,865],{"class":103,"line":856},13,[101,858,859],{"class":107},".header",[101,861,862],{"class":111},"  { ",[101,864,562],{"class":118},[101,866,867],{"class":111},": header; }\n",[101,869,871,874,877,879,881,884],{"class":103,"line":870},14,[101,872,873],{"class":107},".left",[101,875,876],{"class":111},"    { ",[101,878,562],{"class":118},[101,880,122],{"class":111},[101,882,883],{"class":118},"left",[101,885,886],{"class":111},"; }\n",[101,888,890,893,896,898,900,903],{"class":103,"line":889},15,[101,891,892],{"class":107},".content",[101,894,895],{"class":111}," { ",[101,897,562],{"class":118},[101,899,122],{"class":111},[101,901,902],{"class":118},"content",[101,904,886],{"class":111},[101,906,908,911,914,916,918,921],{"class":103,"line":907},16,[101,909,910],{"class":107},".right",[101,912,913],{"class":111},"   { ",[101,915,562],{"class":118},[101,917,122],{"class":111},[101,919,920],{"class":118},"right",[101,922,886],{"class":111},[101,924,926,929,931,933],{"class":103,"line":925},17,[101,927,928],{"class":107},".footer",[101,930,862],{"class":111},[101,932,562],{"class":118},[101,934,935],{"class":111},": footer; }\n",[48,937,939],{"id":938},"card-grid-layout","Card Grid Layout",[15,941,942],{},"Responsive cards that reflow without media queries:",[92,944,946],{"className":94,"code":945,"language":96,"meta":97,"style":97},".card-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));\n  gap: 24px;\n}\n",[63,947,948,955,965,996,1009],{"__ignoreMap":97},[101,949,950,953],{"class":103,"line":104},[101,951,952],{"class":107},".card-grid",[101,954,112],{"class":111},[101,956,957,959,961,963],{"class":103,"line":115},[101,958,119],{"class":118},[101,960,122],{"class":111},[101,962,125],{"class":118},[101,964,128],{"class":111},[101,966,967,969,971,973,975,977,979,981,983,986,988,990,992,994],{"class":103,"line":131},[101,968,134],{"class":118},[101,970,122],{"class":111},[101,972,208],{"class":118},[101,974,211],{"class":111},[101,976,670],{"class":118},[101,978,217],{"class":111},[101,980,220],{"class":118},[101,982,211],{"class":111},[101,984,985],{"class":118},"280",[101,987,65],{"class":142},[101,989,217],{"class":111},[101,991,232],{"class":118},[101,993,73],{"class":142},[101,995,237],{"class":111},[101,997,998,1000,1002,1005,1007],{"class":103,"line":156},[101,999,836],{"class":118},[101,1001,122],{"class":111},[101,1003,1004],{"class":118},"24",[101,1006,65],{"class":142},[101,1008,128],{"class":111},[101,1010,1011],{"class":103,"line":175},[101,1012,178],{"class":111},[15,1014,1015],{},"On a 1200px screen you get roughly four columns. On 600px you get two. On 300px you get one. No breakpoints needed.",[48,1017,1019],{"id":1018},"dashboard-layout","Dashboard Layout",[15,1021,1022],{},"Asymmetrical panels for data-heavy interfaces:",[92,1024,1026],{"className":94,"code":1025,"language":96,"meta":97,"style":97},".dashboard {\n  display: grid;\n  grid-template-columns: 260px 1fr 1fr;\n  grid-template-rows: 56px 2fr 1fr;\n  grid-template-areas:\n    \"toolbar toolbar toolbar\"\n    \"nav     main    aside\"\n    \"nav     widget  aside\";\n  gap: 12px;\n  min-height: 100vh;\n}\n",[63,1027,1028,1035,1045,1066,1088,1094,1099,1104,1111,1124,1136],{"__ignoreMap":97},[101,1029,1030,1033],{"class":103,"line":104},[101,1031,1032],{"class":107},".dashboard",[101,1034,112],{"class":111},[101,1036,1037,1039,1041,1043],{"class":103,"line":115},[101,1038,119],{"class":118},[101,1040,122],{"class":111},[101,1042,125],{"class":118},[101,1044,128],{"class":111},[101,1046,1047,1049,1051,1054,1056,1058,1060,1062,1064],{"class":103,"line":131},[101,1048,134],{"class":118},[101,1050,122],{"class":111},[101,1052,1053],{"class":118},"260",[101,1055,65],{"class":142},[101,1057,145],{"class":118},[101,1059,73],{"class":142},[101,1061,145],{"class":118},[101,1063,73],{"class":142},[101,1065,128],{"class":111},[101,1067,1068,1070,1072,1075,1077,1080,1082,1084,1086],{"class":103,"line":156},[101,1069,159],{"class":118},[101,1071,122],{"class":111},[101,1073,1074],{"class":118},"56",[101,1076,65],{"class":142},[101,1078,1079],{"class":118}," 2",[101,1081,73],{"class":142},[101,1083,145],{"class":118},[101,1085,73],{"class":142},[101,1087,128],{"class":111},[101,1089,1090,1092],{"class":103,"line":175},[101,1091,790],{"class":118},[101,1093,793],{"class":111},[101,1095,1096],{"class":103,"line":796},[101,1097,1098],{"class":799},"    \"toolbar toolbar toolbar\"\n",[101,1100,1101],{"class":103,"line":803},[101,1102,1103],{"class":799},"    \"nav     main    aside\"\n",[101,1105,1106,1109],{"class":103,"line":809},[101,1107,1108],{"class":799},"    \"nav     widget  aside\"",[101,1110,128],{"class":111},[101,1112,1113,1115,1117,1120,1122],{"class":103,"line":817},[101,1114,836],{"class":118},[101,1116,122],{"class":111},[101,1118,1119],{"class":118},"12",[101,1121,65],{"class":142},[101,1123,128],{"class":111},[101,1125,1126,1128,1130,1132,1134],{"class":103,"line":833},[101,1127,820],{"class":118},[101,1129,122],{"class":111},[101,1131,825],{"class":118},[101,1133,828],{"class":142},[101,1135,128],{"class":111},[101,1137,1138],{"class":103,"line":846},[101,1139,178],{"class":111},[10,1141,1143],{"id":1142},"faq","FAQ",[48,1145,1147],{"id":1146},"when-should-i-use-css-grid-instead-of-flexbox","When should I use CSS Grid instead of Flexbox?",[15,1149,1150],{},"Use Grid when you need to control both rows and columns at the same time — page layouts, dashboards, and galleries. Use Flexbox for one-directional layouts — navigation bars, toolbars, and centered content. Many layouts combine both: Grid for the page structure, Flexbox for the components inside each grid area.",[48,1152,1154],{"id":1153},"what-does-the-fr-unit-do","What does the fr unit do?",[15,1156,244,1157,1159,1160,1163],{},[63,1158,73],{}," unit distributes available space proportionally after fixed tracks and gaps are calculated. With ",[63,1161,1162],{},"1fr 2fr 1fr",", the middle column gets twice as much space as each outer column. Think of it as flex-grow for grid tracks.",[48,1165,1167],{"id":1166},"can-i-make-a-css-grid-responsive-without-media-queries","Can I make a CSS Grid responsive without media queries?",[15,1169,1170,1171,1174],{},"Yes. Use ",[63,1172,1173],{},"repeat(auto-fill, minmax(280px, 1fr))"," for columns. The browser automatically adjusts the column count based on available width. Items wrap naturally as the viewport shrinks — no breakpoints required.",[10,1176,1178],{"id":1177},"related-guides","Related Guides",[22,1180,1181,1188],{},[25,1182,1183,1187],{},[324,1184,1186],{"href":1185},"\u002Fguides\u002Fcss-grid-tutorial","CSS Grid Tutorial"," — Step-by-step guide to grid areas, implicit grids, and responsive patterns",[25,1189,1190,1194],{},[324,1191,1193],{"href":1192},"\u002Fguides\u002Fcss-layout-systems","CSS Layout Systems"," — Grid vs Flexbox comparison and when to use each",[1196,1197,1198],"style",{},"html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}",{"title":97,"searchDepth":115,"depth":115,"links":1200},[1201,1202,1208,1214,1215,1220,1225],{"id":12,"depth":115,"text":13},{"id":42,"depth":115,"text":43,"children":1203},[1204,1205,1206,1207],{"id":50,"depth":131,"text":51},{"id":184,"depth":131,"text":185},{"id":251,"depth":131,"text":252},{"id":315,"depth":131,"text":316},{"id":332,"depth":115,"text":333,"children":1209},[1210,1211,1212,1213],{"id":339,"depth":131,"text":340},{"id":504,"depth":131,"text":505},{"id":613,"depth":131,"text":614},{"id":649,"depth":131,"text":650},{"id":707,"depth":115,"text":708},{"id":718,"depth":115,"text":719,"children":1216},[1217,1218,1219],{"id":722,"depth":131,"text":723},{"id":938,"depth":131,"text":939},{"id":1018,"depth":131,"text":1019},{"id":1142,"depth":115,"text":1143,"children":1221},[1222,1223,1224],{"id":1146,"depth":131,"text":1147},{"id":1153,"depth":131,"text":1154},{"id":1166,"depth":131,"text":1167},{"id":1177,"depth":115,"text":1178},"2026-05-28","Complete guide to using our CSS Grid Generator tool to create grid layouts visually.","md",{"immutable":678},"\u002Fguides\u002Fcss-grid-guide",{"title":5,"description":1227},"guides\u002Fcss-grid-guide","w-TiCL2xM-5S5Ompwc6fSt51Rpza1sSZLCDI_XYRQMo",1780401330996]