[{"data":1,"prerenderedAt":1542},["ShallowReactive",2],{"blog-zh-12-column-grid":3},{"id":4,"title":5,"author":6,"body":9,"date":612,"description":1508,"draft":1509,"extension":1510,"howTo":1511,"image":1532,"meta":1533,"navigation":77,"path":1534,"seo":1535,"stem":1536,"tags":1537,"updated":1532,"__hash__":1541},"blogZh/zh/blog/005.12-column-grid.md","gpdf 的 12 列网格是怎么工作的？",{"name":7,"url":8},"gpdf team","https://gpdf.dev",{"type":10,"value":11,"toc":1496},"minimark",[12,16,29,32,47,50,1131,1138,1142,1149,1152,1171,1186,1190,1193,1209,1223,1227,1233,1239,1398,1401,1407,1417,1420,1426,1429,1455,1459,1462,1479,1492],[13,14,15],"h2",{"id":15},"换个说法的问题",[17,18,19,20,24,25,28],"p",{},"你用过 gpdf 的 API——页面构建器、行构建器、列构建器——列的构造函数接收一个数字：",[21,22,23],"code",{},"r.Col(4, fn)","、",[21,26,27],{},"r.Col(8, fn)","。这个数字是什么？总和不到 12 会怎样？和你已经熟悉的 CSS 网格有什么区别？",[13,30,31],{"id":31},"短答",[17,33,34,37,38,41,42,46],{},[21,35,36],{},"r.Col(span, fn)"," 接收 1 到 12 的整数。这个整数代表此列在行里的占比——",[21,39,40],{},"span / 12"," 的可用宽度。小于 1 会被夹到 1，大于 12 会被夹到 12，",[43,44,45],"strong",{},"每行总和是否为 12 由你决定，库本身不强制","。网格被固定为 12 个分格，剩下的就是你如何切行的问题。",[13,48,49],{"id":49},"完整示例",[51,52,57],"pre",{"className":53,"code":54,"language":55,"meta":56,"style":56},"language-go shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","package main\n\nimport (\n    \"log\"\n    \"os\"\n\n    \"github.com/gpdf-dev/gpdf\"\n    \"github.com/gpdf-dev/gpdf/document\"\n    \"github.com/gpdf-dev/gpdf/template\"\n)\n\nfunc main() {\n    doc := gpdf.NewDocument(\n        gpdf.WithPageSize(document.A4),\n        gpdf.WithMargins(document.UniformEdges(document.Mm(15))),\n    )\n\n    page := doc.AddPage()\n\n    // 整行\n    page.AutoRow(func(r *template.RowBuilder) {\n        r.Col(12, func(c *template.ColBuilder) {\n            c.Text(\"发票 #2026-0416\", template.FontSize(18), template.Bold())\n        })\n    })\n\n    // 两列表头 (6 + 6)\n    page.AutoRow(func(r *template.RowBuilder) {\n        r.Col(6, func(c *template.ColBuilder) {\n            c.Text(\"收票方\")\n            c.Text(\"Acme 有限公司\")\n        })\n        r.Col(6, func(c *template.ColBuilder) {\n            c.Text(\"开票日期\")\n            c.Text(\"2026-04-16\")\n        })\n    })\n\n    // 三列摘要 (4 + 4 + 4)\n    page.AutoRow(func(r *template.RowBuilder) {\n        r.Col(4, func(c *template.ColBuilder) {\n            c.Text(\"小计\")\n        })\n        r.Col(4, func(c *template.ColBuilder) {\n            c.Text(\"税额\")\n        })\n        r.Col(4, func(c *template.ColBuilder) {\n            c.Text(\"合计\")\n        })\n    })\n\n    // 非对称 (8 + 4) — 正文 + 侧栏\n    page.AutoRow(func(r *template.RowBuilder) {\n        r.Col(8, func(c *template.ColBuilder) {\n            c.Text(\"明细在这里列出\")\n        })\n        r.Col(4, func(c *template.ColBuilder) {\n            c.Text(\"备注\")\n        })\n    })\n\n    data, err := doc.Generate()\n    if err != nil {\n        log.Fatal(err)\n    }\n    if err := os.WriteFile(\"layout.pdf\", data, 0o644); err != nil {\n        log.Fatal(err)\n    }\n}\n","go","",[21,58,59,72,79,89,101,111,116,126,136,146,152,157,173,195,220,257,263,268,287,292,299,333,371,421,427,433,438,444,469,501,521,541,546,577,597,617,622,627,632,638,663,695,715,720,751,771,776,807,827,832,837,842,848,873,905,925,930,961,981,986,991,996,1018,1034,1052,1058,1105,1120,1125],{"__ignoreMap":56},[60,61,64,68],"span",{"class":62,"line":63},"line",1,[60,65,67],{"class":66},"sMK4o","package",[60,69,71],{"class":70},"sBMFI"," main\n",[60,73,75],{"class":62,"line":74},2,[60,76,78],{"emptyLinePlaceholder":77},true,"\n",[60,80,82,86],{"class":62,"line":81},3,[60,83,85],{"class":84},"s7zQu","import",[60,87,88],{"class":66}," (\n",[60,90,92,95,98],{"class":62,"line":91},4,[60,93,94],{"class":66},"    \"",[60,96,97],{"class":70},"log",[60,99,100],{"class":66},"\"\n",[60,102,104,106,109],{"class":62,"line":103},5,[60,105,94],{"class":66},[60,107,108],{"class":70},"os",[60,110,100],{"class":66},[60,112,114],{"class":62,"line":113},6,[60,115,78],{"emptyLinePlaceholder":77},[60,117,119,121,124],{"class":62,"line":118},7,[60,120,94],{"class":66},[60,122,123],{"class":70},"github.com/gpdf-dev/gpdf",[60,125,100],{"class":66},[60,127,129,131,134],{"class":62,"line":128},8,[60,130,94],{"class":66},[60,132,133],{"class":70},"github.com/gpdf-dev/gpdf/document",[60,135,100],{"class":66},[60,137,139,141,144],{"class":62,"line":138},9,[60,140,94],{"class":66},[60,142,143],{"class":70},"github.com/gpdf-dev/gpdf/template",[60,145,100],{"class":66},[60,147,149],{"class":62,"line":148},10,[60,150,151],{"class":66},")\n",[60,153,155],{"class":62,"line":154},11,[60,156,78],{"emptyLinePlaceholder":77},[60,158,160,163,167,170],{"class":62,"line":159},12,[60,161,162],{"class":66},"func",[60,164,166],{"class":165},"s2Zo4"," main",[60,168,169],{"class":66},"()",[60,171,172],{"class":66}," {\n",[60,174,176,180,183,186,189,192],{"class":62,"line":175},13,[60,177,179],{"class":178},"sTEyZ","    doc ",[60,181,182],{"class":66},":=",[60,184,185],{"class":178}," gpdf",[60,187,188],{"class":66},".",[60,190,191],{"class":165},"NewDocument",[60,193,194],{"class":66},"(\n",[60,196,198,201,203,206,209,212,214,217],{"class":62,"line":197},14,[60,199,200],{"class":178},"        gpdf",[60,202,188],{"class":66},[60,204,205],{"class":165},"WithPageSize",[60,207,208],{"class":66},"(",[60,210,211],{"class":178},"document",[60,213,188],{"class":66},[60,215,216],{"class":178},"A4",[60,218,219],{"class":66},"),\n",[60,221,223,225,227,230,232,234,236,239,241,243,245,248,250,254],{"class":62,"line":222},15,[60,224,200],{"class":178},[60,226,188],{"class":66},[60,228,229],{"class":165},"WithMargins",[60,231,208],{"class":66},[60,233,211],{"class":178},[60,235,188],{"class":66},[60,237,238],{"class":165},"UniformEdges",[60,240,208],{"class":66},[60,242,211],{"class":178},[60,244,188],{"class":66},[60,246,247],{"class":165},"Mm",[60,249,208],{"class":66},[60,251,253],{"class":252},"sbssI","15",[60,255,256],{"class":66},"))),\n",[60,258,260],{"class":62,"line":259},16,[60,261,262],{"class":66},"    )\n",[60,264,266],{"class":62,"line":265},17,[60,267,78],{"emptyLinePlaceholder":77},[60,269,271,274,276,279,281,284],{"class":62,"line":270},18,[60,272,273],{"class":178},"    page ",[60,275,182],{"class":66},[60,277,278],{"class":178}," doc",[60,280,188],{"class":66},[60,282,283],{"class":165},"AddPage",[60,285,286],{"class":66},"()\n",[60,288,290],{"class":62,"line":289},19,[60,291,78],{"emptyLinePlaceholder":77},[60,293,295],{"class":62,"line":294},20,[60,296,298],{"class":297},"sHwdD","    // 整行\n",[60,300,302,305,307,310,313,317,320,323,325,328,331],{"class":62,"line":301},21,[60,303,304],{"class":178},"    page",[60,306,188],{"class":66},[60,308,309],{"class":165},"AutoRow",[60,311,312],{"class":66},"(func(",[60,314,316],{"class":315},"sHdIc","r",[60,318,319],{"class":66}," *",[60,321,322],{"class":70},"template",[60,324,188],{"class":66},[60,326,327],{"class":70},"RowBuilder",[60,329,330],{"class":66},")",[60,332,172],{"class":66},[60,334,336,339,341,344,346,349,352,355,358,360,362,364,367,369],{"class":62,"line":335},22,[60,337,338],{"class":178},"        r",[60,340,188],{"class":66},[60,342,343],{"class":165},"Col",[60,345,208],{"class":66},[60,347,348],{"class":252},"12",[60,350,351],{"class":66},",",[60,353,354],{"class":66}," func(",[60,356,357],{"class":315},"c",[60,359,319],{"class":66},[60,361,322],{"class":70},[60,363,188],{"class":66},[60,365,366],{"class":70},"ColBuilder",[60,368,330],{"class":66},[60,370,172],{"class":66},[60,372,374,377,379,382,384,387,391,393,395,398,400,403,405,408,411,413,415,418],{"class":62,"line":373},23,[60,375,376],{"class":178},"            c",[60,378,188],{"class":66},[60,380,381],{"class":165},"Text",[60,383,208],{"class":66},[60,385,386],{"class":66},"\"",[60,388,390],{"class":389},"sfazB","发票 #2026-0416",[60,392,386],{"class":66},[60,394,351],{"class":66},[60,396,397],{"class":178}," template",[60,399,188],{"class":66},[60,401,402],{"class":165},"FontSize",[60,404,208],{"class":66},[60,406,407],{"class":252},"18",[60,409,410],{"class":66},"),",[60,412,397],{"class":178},[60,414,188],{"class":66},[60,416,417],{"class":165},"Bold",[60,419,420],{"class":66},"())\n",[60,422,424],{"class":62,"line":423},24,[60,425,426],{"class":66},"        })\n",[60,428,430],{"class":62,"line":429},25,[60,431,432],{"class":66},"    })\n",[60,434,436],{"class":62,"line":435},26,[60,437,78],{"emptyLinePlaceholder":77},[60,439,441],{"class":62,"line":440},27,[60,442,443],{"class":297},"    // 两列表头 (6 + 6)\n",[60,445,447,449,451,453,455,457,459,461,463,465,467],{"class":62,"line":446},28,[60,448,304],{"class":178},[60,450,188],{"class":66},[60,452,309],{"class":165},[60,454,312],{"class":66},[60,456,316],{"class":315},[60,458,319],{"class":66},[60,460,322],{"class":70},[60,462,188],{"class":66},[60,464,327],{"class":70},[60,466,330],{"class":66},[60,468,172],{"class":66},[60,470,472,474,476,478,480,483,485,487,489,491,493,495,497,499],{"class":62,"line":471},29,[60,473,338],{"class":178},[60,475,188],{"class":66},[60,477,343],{"class":165},[60,479,208],{"class":66},[60,481,482],{"class":252},"6",[60,484,351],{"class":66},[60,486,354],{"class":66},[60,488,357],{"class":315},[60,490,319],{"class":66},[60,492,322],{"class":70},[60,494,188],{"class":66},[60,496,366],{"class":70},[60,498,330],{"class":66},[60,500,172],{"class":66},[60,502,504,506,508,510,512,514,517,519],{"class":62,"line":503},30,[60,505,376],{"class":178},[60,507,188],{"class":66},[60,509,381],{"class":165},[60,511,208],{"class":66},[60,513,386],{"class":66},[60,515,516],{"class":389},"收票方",[60,518,386],{"class":66},[60,520,151],{"class":66},[60,522,524,526,528,530,532,534,537,539],{"class":62,"line":523},31,[60,525,376],{"class":178},[60,527,188],{"class":66},[60,529,381],{"class":165},[60,531,208],{"class":66},[60,533,386],{"class":66},[60,535,536],{"class":389},"Acme 有限公司",[60,538,386],{"class":66},[60,540,151],{"class":66},[60,542,544],{"class":62,"line":543},32,[60,545,426],{"class":66},[60,547,549,551,553,555,557,559,561,563,565,567,569,571,573,575],{"class":62,"line":548},33,[60,550,338],{"class":178},[60,552,188],{"class":66},[60,554,343],{"class":165},[60,556,208],{"class":66},[60,558,482],{"class":252},[60,560,351],{"class":66},[60,562,354],{"class":66},[60,564,357],{"class":315},[60,566,319],{"class":66},[60,568,322],{"class":70},[60,570,188],{"class":66},[60,572,366],{"class":70},[60,574,330],{"class":66},[60,576,172],{"class":66},[60,578,580,582,584,586,588,590,593,595],{"class":62,"line":579},34,[60,581,376],{"class":178},[60,583,188],{"class":66},[60,585,381],{"class":165},[60,587,208],{"class":66},[60,589,386],{"class":66},[60,591,592],{"class":389},"开票日期",[60,594,386],{"class":66},[60,596,151],{"class":66},[60,598,600,602,604,606,608,610,613,615],{"class":62,"line":599},35,[60,601,376],{"class":178},[60,603,188],{"class":66},[60,605,381],{"class":165},[60,607,208],{"class":66},[60,609,386],{"class":66},[60,611,612],{"class":389},"2026-04-16",[60,614,386],{"class":66},[60,616,151],{"class":66},[60,618,620],{"class":62,"line":619},36,[60,621,426],{"class":66},[60,623,625],{"class":62,"line":624},37,[60,626,432],{"class":66},[60,628,630],{"class":62,"line":629},38,[60,631,78],{"emptyLinePlaceholder":77},[60,633,635],{"class":62,"line":634},39,[60,636,637],{"class":297},"    // 三列摘要 (4 + 4 + 4)\n",[60,639,641,643,645,647,649,651,653,655,657,659,661],{"class":62,"line":640},40,[60,642,304],{"class":178},[60,644,188],{"class":66},[60,646,309],{"class":165},[60,648,312],{"class":66},[60,650,316],{"class":315},[60,652,319],{"class":66},[60,654,322],{"class":70},[60,656,188],{"class":66},[60,658,327],{"class":70},[60,660,330],{"class":66},[60,662,172],{"class":66},[60,664,666,668,670,672,674,677,679,681,683,685,687,689,691,693],{"class":62,"line":665},41,[60,667,338],{"class":178},[60,669,188],{"class":66},[60,671,343],{"class":165},[60,673,208],{"class":66},[60,675,676],{"class":252},"4",[60,678,351],{"class":66},[60,680,354],{"class":66},[60,682,357],{"class":315},[60,684,319],{"class":66},[60,686,322],{"class":70},[60,688,188],{"class":66},[60,690,366],{"class":70},[60,692,330],{"class":66},[60,694,172],{"class":66},[60,696,698,700,702,704,706,708,711,713],{"class":62,"line":697},42,[60,699,376],{"class":178},[60,701,188],{"class":66},[60,703,381],{"class":165},[60,705,208],{"class":66},[60,707,386],{"class":66},[60,709,710],{"class":389},"小计",[60,712,386],{"class":66},[60,714,151],{"class":66},[60,716,718],{"class":62,"line":717},43,[60,719,426],{"class":66},[60,721,723,725,727,729,731,733,735,737,739,741,743,745,747,749],{"class":62,"line":722},44,[60,724,338],{"class":178},[60,726,188],{"class":66},[60,728,343],{"class":165},[60,730,208],{"class":66},[60,732,676],{"class":252},[60,734,351],{"class":66},[60,736,354],{"class":66},[60,738,357],{"class":315},[60,740,319],{"class":66},[60,742,322],{"class":70},[60,744,188],{"class":66},[60,746,366],{"class":70},[60,748,330],{"class":66},[60,750,172],{"class":66},[60,752,754,756,758,760,762,764,767,769],{"class":62,"line":753},45,[60,755,376],{"class":178},[60,757,188],{"class":66},[60,759,381],{"class":165},[60,761,208],{"class":66},[60,763,386],{"class":66},[60,765,766],{"class":389},"税额",[60,768,386],{"class":66},[60,770,151],{"class":66},[60,772,774],{"class":62,"line":773},46,[60,775,426],{"class":66},[60,777,779,781,783,785,787,789,791,793,795,797,799,801,803,805],{"class":62,"line":778},47,[60,780,338],{"class":178},[60,782,188],{"class":66},[60,784,343],{"class":165},[60,786,208],{"class":66},[60,788,676],{"class":252},[60,790,351],{"class":66},[60,792,354],{"class":66},[60,794,357],{"class":315},[60,796,319],{"class":66},[60,798,322],{"class":70},[60,800,188],{"class":66},[60,802,366],{"class":70},[60,804,330],{"class":66},[60,806,172],{"class":66},[60,808,810,812,814,816,818,820,823,825],{"class":62,"line":809},48,[60,811,376],{"class":178},[60,813,188],{"class":66},[60,815,381],{"class":165},[60,817,208],{"class":66},[60,819,386],{"class":66},[60,821,822],{"class":389},"合计",[60,824,386],{"class":66},[60,826,151],{"class":66},[60,828,830],{"class":62,"line":829},49,[60,831,426],{"class":66},[60,833,835],{"class":62,"line":834},50,[60,836,432],{"class":66},[60,838,840],{"class":62,"line":839},51,[60,841,78],{"emptyLinePlaceholder":77},[60,843,845],{"class":62,"line":844},52,[60,846,847],{"class":297},"    // 非对称 (8 + 4) — 正文 + 侧栏\n",[60,849,851,853,855,857,859,861,863,865,867,869,871],{"class":62,"line":850},53,[60,852,304],{"class":178},[60,854,188],{"class":66},[60,856,309],{"class":165},[60,858,312],{"class":66},[60,860,316],{"class":315},[60,862,319],{"class":66},[60,864,322],{"class":70},[60,866,188],{"class":66},[60,868,327],{"class":70},[60,870,330],{"class":66},[60,872,172],{"class":66},[60,874,876,878,880,882,884,887,889,891,893,895,897,899,901,903],{"class":62,"line":875},54,[60,877,338],{"class":178},[60,879,188],{"class":66},[60,881,343],{"class":165},[60,883,208],{"class":66},[60,885,886],{"class":252},"8",[60,888,351],{"class":66},[60,890,354],{"class":66},[60,892,357],{"class":315},[60,894,319],{"class":66},[60,896,322],{"class":70},[60,898,188],{"class":66},[60,900,366],{"class":70},[60,902,330],{"class":66},[60,904,172],{"class":66},[60,906,908,910,912,914,916,918,921,923],{"class":62,"line":907},55,[60,909,376],{"class":178},[60,911,188],{"class":66},[60,913,381],{"class":165},[60,915,208],{"class":66},[60,917,386],{"class":66},[60,919,920],{"class":389},"明细在这里列出",[60,922,386],{"class":66},[60,924,151],{"class":66},[60,926,928],{"class":62,"line":927},56,[60,929,426],{"class":66},[60,931,933,935,937,939,941,943,945,947,949,951,953,955,957,959],{"class":62,"line":932},57,[60,934,338],{"class":178},[60,936,188],{"class":66},[60,938,343],{"class":165},[60,940,208],{"class":66},[60,942,676],{"class":252},[60,944,351],{"class":66},[60,946,354],{"class":66},[60,948,357],{"class":315},[60,950,319],{"class":66},[60,952,322],{"class":70},[60,954,188],{"class":66},[60,956,366],{"class":70},[60,958,330],{"class":66},[60,960,172],{"class":66},[60,962,964,966,968,970,972,974,977,979],{"class":62,"line":963},58,[60,965,376],{"class":178},[60,967,188],{"class":66},[60,969,381],{"class":165},[60,971,208],{"class":66},[60,973,386],{"class":66},[60,975,976],{"class":389},"备注",[60,978,386],{"class":66},[60,980,151],{"class":66},[60,982,984],{"class":62,"line":983},59,[60,985,426],{"class":66},[60,987,989],{"class":62,"line":988},60,[60,990,432],{"class":66},[60,992,994],{"class":62,"line":993},61,[60,995,78],{"emptyLinePlaceholder":77},[60,997,999,1002,1004,1007,1009,1011,1013,1016],{"class":62,"line":998},62,[60,1000,1001],{"class":178},"    data",[60,1003,351],{"class":66},[60,1005,1006],{"class":178}," err ",[60,1008,182],{"class":66},[60,1010,278],{"class":178},[60,1012,188],{"class":66},[60,1014,1015],{"class":165},"Generate",[60,1017,286],{"class":66},[60,1019,1021,1024,1026,1029,1032],{"class":62,"line":1020},63,[60,1022,1023],{"class":84},"    if",[60,1025,1006],{"class":178},[60,1027,1028],{"class":66},"!=",[60,1030,1031],{"class":66}," nil",[60,1033,172],{"class":66},[60,1035,1037,1040,1042,1045,1047,1050],{"class":62,"line":1036},64,[60,1038,1039],{"class":178},"        log",[60,1041,188],{"class":66},[60,1043,1044],{"class":165},"Fatal",[60,1046,208],{"class":66},[60,1048,1049],{"class":178},"err",[60,1051,151],{"class":66},[60,1053,1055],{"class":62,"line":1054},65,[60,1056,1057],{"class":66},"    }\n",[60,1059,1061,1063,1065,1067,1070,1072,1075,1077,1079,1082,1084,1086,1089,1091,1094,1097,1099,1101,1103],{"class":62,"line":1060},66,[60,1062,1023],{"class":84},[60,1064,1006],{"class":178},[60,1066,182],{"class":66},[60,1068,1069],{"class":178}," os",[60,1071,188],{"class":66},[60,1073,1074],{"class":165},"WriteFile",[60,1076,208],{"class":66},[60,1078,386],{"class":66},[60,1080,1081],{"class":389},"layout.pdf",[60,1083,386],{"class":66},[60,1085,351],{"class":66},[60,1087,1088],{"class":178}," data",[60,1090,351],{"class":66},[60,1092,1093],{"class":252}," 0o644",[60,1095,1096],{"class":66},");",[60,1098,1006],{"class":178},[60,1100,1028],{"class":66},[60,1102,1031],{"class":66},[60,1104,172],{"class":66},[60,1106,1108,1110,1112,1114,1116,1118],{"class":62,"line":1107},67,[60,1109,1039],{"class":178},[60,1111,188],{"class":66},[60,1113,1044],{"class":165},[60,1115,208],{"class":66},[60,1117,1049],{"class":178},[60,1119,151],{"class":66},[60,1121,1123],{"class":62,"line":1122},68,[60,1124,1057],{"class":66},[60,1126,1128],{"class":62,"line":1127},69,[60,1129,1130],{"class":66},"}\n",[17,1132,1133,1134,1137],{},"运行 ",[21,1135,1136],{},"go run main.go"," 即得一页 PDF，四行各用不同方式切分。",[13,1139,1141],{"id":1140},"为什么是-12","为什么是 12",[17,1143,1144,1145,1148],{},"12 可以干净地被 2、3、4、6 整除。一半 (6+6)、三等分 (4+4+4)、四等分 (3+3+3+3)、带侧栏 (3+9 或 4+8)、正文加边栏 (8+4)——真实世界的版式几乎全都落在这些组合里。如果选因子少的数字，这些组合里会有一种直接失效。Bootstrap 在 2011 年就定下了 12 列，到今天\"12 列网格\"已经是设计师和前端工程师共享的行话。gpdf 特意沿用这个习语——",[43,1146,1147],{},"PDF 布局和网页布局在思维模型上并无本质差别","，哪怕输出的是固定宽度的纸张。",[13,1150,1151],{"id":1151},"把数学写清楚",[17,1153,1154,1155,1158,1159,1162,1163,1166,1167,1170],{},"A4 纵向、四边各 15 mm 的话，可用宽度是 180 mm。行内的 ",[21,1156,1157],{},"Col(4)"," 占 4/12，也就是 60 mm。",[21,1160,1161],{},"Col(8)"," 占 120 mm。列与列之间默认没有槽宽 (gutter)。如果想要留白，就在较短的列里放一个 ",[21,1164,1165],{},"c.Spacer","，或把一个 ",[21,1168,1169],{},"Col(1)"," 留空。",[17,1172,1173,1174,1177,1178,1181,1182,1185],{},"宽度在构建期按百分比计算（相关实现在 ",[21,1175,1176],{},"gpdf/template/grid.go","），布局引擎再用\"当前页宽减去边距\"换算为实际的点值。也就是说同样的 ",[21,1179,1180],{},"r.Col(6, fn)","，在 A4 和 Letter 上物理宽度不同，但",[43,1183,1184],{},"占行的比例始终不变","。",[13,1187,1189],{"id":1188},"总和不是-12-会怎样","总和不是 12 会怎样",[17,1191,1192],{},"gpdf 并不校验 span 的合计。这是有意的。",[1194,1195,1196,1203],"ul",{},[1197,1198,1199,1202],"li",{},[43,1200,1201],{},"合计 \u003C 12","：行的右侧留空。想让元素贴在左边、其余留白时用得上。",[1197,1204,1205,1208],{},[43,1206,1207],{},"合计 > 12","：最后一列溢出右边距。通常是 bug。PDF 看起来会错位，但不会 crash。",[17,1210,1211,1212,1215,1216,1219,1220,1222],{},"多数布局正好是每行 12，因为那样能填满页面。但你想\"在行中间只放一块 6 宽的内容\"时，最直接的写法就是 ",[21,1213,1214],{},"Col(3)"," 空、",[21,1217,1218],{},"Col(6)"," 内容、",[21,1221,1214],{}," 空——这个网格本来就是为这种简写设计的。",[13,1224,1226],{"id":1225},"autorow-与-row-的区别","AutoRow 与 Row 的区别",[17,1228,1229,1232],{},[21,1230,1231],{},"page.AutoRow(fn)"," 的高度随最高的列伸展。大多数行都应该用它。",[17,1234,1235,1238],{},[21,1236,1237],{},"page.Row(height, fn)"," 固定高度，超出的内容会被裁剪。用在\"发票表头必须刚好 30 mm 以便后续装订对齐\"之类的场景——视觉一致性优先于内容自由度。",[51,1240,1242],{"className":53,"code":1241,"language":55,"meta":56,"style":56},"page.Row(document.Mm(30), func(r *template.RowBuilder) {\n    r.Col(8, func(c *template.ColBuilder) {\n        c.Text(\"Logo\")\n    })\n    r.Col(4, func(c *template.ColBuilder) {\n        c.Text(\"发票号\")\n    })\n})\n",[21,1243,1244,1285,1316,1336,1340,1370,1389,1393],{"__ignoreMap":56},[60,1245,1246,1249,1251,1254,1256,1258,1260,1262,1264,1267,1269,1271,1273,1275,1277,1279,1281,1283],{"class":62,"line":63},[60,1247,1248],{"class":178},"page",[60,1250,188],{"class":66},[60,1252,1253],{"class":165},"Row",[60,1255,208],{"class":66},[60,1257,211],{"class":178},[60,1259,188],{"class":66},[60,1261,247],{"class":165},[60,1263,208],{"class":66},[60,1265,1266],{"class":252},"30",[60,1268,410],{"class":66},[60,1270,354],{"class":66},[60,1272,316],{"class":315},[60,1274,319],{"class":66},[60,1276,322],{"class":70},[60,1278,188],{"class":66},[60,1280,327],{"class":70},[60,1282,330],{"class":66},[60,1284,172],{"class":66},[60,1286,1287,1290,1292,1294,1296,1298,1300,1302,1304,1306,1308,1310,1312,1314],{"class":62,"line":74},[60,1288,1289],{"class":178},"    r",[60,1291,188],{"class":66},[60,1293,343],{"class":165},[60,1295,208],{"class":66},[60,1297,886],{"class":252},[60,1299,351],{"class":66},[60,1301,354],{"class":66},[60,1303,357],{"class":315},[60,1305,319],{"class":66},[60,1307,322],{"class":70},[60,1309,188],{"class":66},[60,1311,366],{"class":70},[60,1313,330],{"class":66},[60,1315,172],{"class":66},[60,1317,1318,1321,1323,1325,1327,1329,1332,1334],{"class":62,"line":81},[60,1319,1320],{"class":178},"        c",[60,1322,188],{"class":66},[60,1324,381],{"class":165},[60,1326,208],{"class":66},[60,1328,386],{"class":66},[60,1330,1331],{"class":389},"Logo",[60,1333,386],{"class":66},[60,1335,151],{"class":66},[60,1337,1338],{"class":62,"line":91},[60,1339,432],{"class":66},[60,1341,1342,1344,1346,1348,1350,1352,1354,1356,1358,1360,1362,1364,1366,1368],{"class":62,"line":103},[60,1343,1289],{"class":178},[60,1345,188],{"class":66},[60,1347,343],{"class":165},[60,1349,208],{"class":66},[60,1351,676],{"class":252},[60,1353,351],{"class":66},[60,1355,354],{"class":66},[60,1357,357],{"class":315},[60,1359,319],{"class":66},[60,1361,322],{"class":70},[60,1363,188],{"class":66},[60,1365,366],{"class":70},[60,1367,330],{"class":66},[60,1369,172],{"class":66},[60,1371,1372,1374,1376,1378,1380,1382,1385,1387],{"class":62,"line":113},[60,1373,1320],{"class":178},[60,1375,188],{"class":66},[60,1377,381],{"class":165},[60,1379,208],{"class":66},[60,1381,386],{"class":66},[60,1383,1384],{"class":389},"发票号",[60,1386,386],{"class":66},[60,1388,151],{"class":66},[60,1390,1391],{"class":62,"line":118},[60,1392,432],{"class":66},[60,1394,1395],{"class":62,"line":128},[60,1396,1397],{"class":66},"})\n",[13,1399,1400],{"id":1400},"网格没做的事",[17,1402,1403,1404,1406],{},"不支持嵌套。",[21,1405,366],{}," 接收内容元素 (Text / Image / Table / List / Spacer)，但不能塞一个子行进去。看似需要嵌套的结构，通常用页面层面的两个兄弟行就能更清爽地表达。",[17,1408,1409,1410,1413,1414,1185],{},"没有偏移列。Bootstrap 的 ",[21,1411,1412],{},".offset-2"," 在 gpdf 里不存在。要把内容推到右边，就在左边放一个空的 ",[21,1415,1416],{},"Col(n)",[17,1418,1419],{},"没有断点。PDF 页面不会自适应。在任何设备上打开都是同一版式——因为输出是定坐标的光栅，而不是会重新流式布局的 DOM。",[17,1421,1422,1425],{},[43,1423,1424],{},"这些\"没有\"正是设计的核心","。网格少一个特性，读 PDF 结果时就少一类需要推理的歧义。",[13,1427,1428],{"id":1428},"延伸阅读",[1194,1430,1431,1439,1446],{},[1197,1432,1433,1438],{},[1434,1435,1437],"a",{"href":1436},"/zh/blog/embed-japanese-font","如何在 gpdf 中嵌入日文字体？"," — 在网格列里处理 CJK",[1197,1440,1441,1445],{},[1434,1442,1444],{"href":1443},"/zh/blog/go-pdf-library-showdown-2026","Go PDF 库横评 2026"," — Builder API 与 gofpdf / gopdf / Maroto 的对比",[1197,1447,1448,1454],{},[1434,1449,1453],{"href":1450,"rel":1451},"https://gpdf.dev/zh/docs/guide/layout",[1452],"nofollow","布局指南"," — 行、列、间距的完整参考",[13,1456,1458],{"id":1457},"试用-gpdf","试用 gpdf",[17,1460,1461],{},"gpdf 是一个 Go 语言的 PDF 生成库。MIT 许可、零外部依赖、原生 CJK 支持。",[51,1463,1467],{"className":1464,"code":1465,"language":1466,"meta":56,"style":56},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","go get github.com/gpdf-dev/gpdf\n","bash",[21,1468,1469],{"__ignoreMap":56},[60,1470,1471,1473,1476],{"class":62,"line":63},[60,1472,55],{"class":70},[60,1474,1475],{"class":389}," get",[60,1477,1478],{"class":389}," github.com/gpdf-dev/gpdf\n",[17,1480,1481,1486,1487],{},[1434,1482,1485],{"href":1483,"rel":1484},"https://github.com/gpdf-dev/gpdf",[1452],"⭐ 在 GitHub 加星"," · ",[1434,1488,1491],{"href":1489,"rel":1490},"https://gpdf.dev/zh/docs/quickstart",[1452],"查看文档",[1493,1494,1495],"style",{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}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);}",{"title":56,"searchDepth":74,"depth":74,"links":1497},[1498,1499,1500,1501,1502,1503,1504,1505,1506,1507],{"id":15,"depth":74,"text":15},{"id":31,"depth":74,"text":31},{"id":49,"depth":74,"text":49},{"id":1140,"depth":74,"text":1141},{"id":1151,"depth":74,"text":1151},{"id":1188,"depth":74,"text":1189},{"id":1225,"depth":74,"text":1226},{"id":1400,"depth":74,"text":1400},{"id":1428,"depth":74,"text":1428},{"id":1457,"depth":74,"text":1458},"gpdf 的 12 列网格用 r.Col(span, fn) 接收 1–12 的整数。列宽为 span/12 的比例，没有断点、没有槽宽间距，为 PDF 固定宽度设计。",false,"md",{"name":1512,"totalTime":1513,"tools":1514,"steps":1516},"用 gpdf 的 12 列网格布局一页 PDF","PT10M",[1515,123],"Go 1.22+",[1517,1520,1523,1526,1529],{"name":1518,"text":1519},"在页面上开一行","若要让行高随最高的列自动伸展，调用 page.AutoRow(fn)；若要固定行高，调用 page.Row(height, fn)。",{"name":1521,"text":1522},"用 r.Col(span, fn) 声明列","在行内按列的数量调用 r.Col(span, fn)。span 是 1 到 12 的整数，表示该列占行宽的份额。",{"name":1524,"text":1525},"让每行的 span 总和不超过 12","若总和小于 12，右侧留空。若总和大于 12，最后一列会越过右边距——通常是 bug 的信号。",{"name":1527,"text":1528},"在列里填入内容","在 ColBuilder 的回调里调用 c.Text、c.Image、c.Table 或 c.Spacer。内容按添加顺序垂直堆叠。",{"name":1530,"text":1531},"开启下一行","下一个视觉行再调用一次 page.AutoRow。行与行彼此独立——4+8 的行可以直接压在 3+3+3+3 的行上面。",null,{},"/zh/blog/12-column-grid",{"title":5,"description":1508},"zh/blog/005.12-column-grid",[1538,1539,1540],"recipe","tutorial","templates","IGZV8tU2CRvHTI6HGihwe-y0oR-_SOZHikShsgE1lwk",1776529262269]