[{"data":1,"prerenderedAt":1538},["ShallowReactive",2],{"blog-ja-12-column-grid":3},{"id":4,"title":5,"author":6,"body":9,"date":612,"description":1504,"draft":1505,"extension":1506,"howTo":1507,"image":1528,"meta":1529,"navigation":77,"path":1530,"seo":1531,"stem":1532,"tags":1533,"updated":1528,"__hash__":1537},"blogJa/ja/blog/005.12-column-grid.md","gpdf の 12 列グリッドはどう動くのか？",{"name":7,"url":8},"gpdf team","https://gpdf.dev",{"type":10,"value":11,"toc":1492},"minimark",[12,16,29,32,47,50,1131,1137,1141,1148,1151,1170,1184,1188,1191,1207,1221,1225,1231,1237,1396,1399,1405,1416,1419,1422,1425,1451,1455,1458,1475,1488],[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    // 2 列ヘッダー (6 + 6)\n    page.AutoRow(func(r *template.RowBuilder) {\n        r.Col(6, func(c *template.ColBuilder) {\n            c.Text(\"請求先\")\n            c.Text(\"株式会社アクメ\")\n        })\n        r.Col(6, func(c *template.ColBuilder) {\n            c.Text(\"発行日\")\n            c.Text(\"2026-04-16\")\n        })\n    })\n\n    // 3 列サマリー (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},"    // 2 列ヘッダー (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},"株式会社アクメ",[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},"    // 3 列サマリー (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,1136],{},[21,1134,1135],{},"go run main.go"," で 1 ページの PDF が出る。4 つの行がそれぞれ違う割り方をしている。",[13,1138,1140],{"id":1139},"なぜ-12-なのか","なぜ 12 なのか",[17,1142,1143,1144,1147],{},"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,1145,1146],{},"出力が固定幅の紙だろうと、レイアウトの考え方は Web と別物ではない","。",[13,1149,1150],{"id":1150},"計算を具体的に",[17,1152,1153,1154,1157,1158,1161,1162,1165,1166,1169],{},"A4 縦で 15 mm のマージンを四辺に置くと、使える幅は 180 mm。行の中の ",[21,1155,1156],{},"Col(4)"," はそのうち 4/12 つまり 60 mm。",[21,1159,1160],{},"Col(8)"," は 120 mm。列と列の間にガターは入らない (デフォルト 0)。隙間が欲しければ短い方の列の中に ",[21,1163,1164],{},"c.Spacer"," を追加するか、",[21,1167,1168],{},"Col(1)"," を空のまま挟む。",[17,1171,1172,1173,1176,1177,1180,1181,1147],{},"幅の計算はビルド時に百分率で行われ (該当箇所は ",[21,1174,1175],{},"gpdf/template/grid.go",")、レイアウトエンジンが現在のページ幅からマージンを引いた値に対して実際のポイントに解決する。つまり同じ ",[21,1178,1179],{},"r.Col(6, fn)"," でも A4 と Letter では物理的な幅は変わるが、",[43,1182,1183],{},"行に対する比率は変わらない",[13,1185,1187],{"id":1186},"合計が-12-に届かない-超える","合計が 12 に届かない / 超える",[17,1189,1190],{},"gpdf は span の合計を検証しない。これは意図的な設計。",[1192,1193,1194,1201],"ul",{},[1195,1196,1197,1200],"li",{},[43,1198,1199],{},"合計 \u003C 12",": 行の右側が空く。左端にだけ要素を置いて残りを意図的に空けたい場合に便利。",[1195,1202,1203,1206],{},[43,1204,1205],{},"合計 > 12",": 最後の列が右マージンからはみ出す。たいていバグで、PDF の見た目はおかしくなるがクラッシュはしない。",[17,1208,1209,1210,1213,1214,1217,1218,1220],{},"ほとんどのレイアウトは行あたり 12 でぴったり埋まる。ただし「中央に 6 幅の塊だけ置きたい」なら ",[21,1211,1212],{},"Col(3)"," 空、",[21,1215,1216],{},"Col(6)"," 本体、",[21,1219,1212],{}," 空、というショートハンドが自然に書ける — このグリッドはそういう表現を狙って作られている。",[13,1222,1224],{"id":1223},"autorow-と-row-の違い","AutoRow と Row の違い",[17,1226,1227,1230],{},[21,1228,1229],{},"page.AutoRow(fn)"," は一番高い列に合わせて行の高さが伸びる。ほとんどの行はこれでいい。",[17,1232,1233,1236],{},[21,1234,1235],{},"page.Row(height, fn)"," は高さを固定する。高さを超えたコンテンツはクリップされる。後工程のステープル位置を合わせるためにヘッダーを必ず 30 mm にしたい、といった「見た目の一貫性 > コンテンツの自由度」の場面で使う。",[51,1238,1240],{"className":53,"code":1239,"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(\"ロゴ\")\n    })\n    r.Col(4, func(c *template.ColBuilder) {\n        c.Text(\"請求番号\")\n    })\n})\n",[21,1241,1242,1283,1314,1334,1338,1368,1387,1391],{"__ignoreMap":56},[60,1243,1244,1247,1249,1252,1254,1256,1258,1260,1262,1265,1267,1269,1271,1273,1275,1277,1279,1281],{"class":62,"line":63},[60,1245,1246],{"class":178},"page",[60,1248,188],{"class":66},[60,1250,1251],{"class":165},"Row",[60,1253,208],{"class":66},[60,1255,211],{"class":178},[60,1257,188],{"class":66},[60,1259,247],{"class":165},[60,1261,208],{"class":66},[60,1263,1264],{"class":252},"30",[60,1266,410],{"class":66},[60,1268,354],{"class":66},[60,1270,316],{"class":315},[60,1272,319],{"class":66},[60,1274,322],{"class":70},[60,1276,188],{"class":66},[60,1278,327],{"class":70},[60,1280,330],{"class":66},[60,1282,172],{"class":66},[60,1284,1285,1288,1290,1292,1294,1296,1298,1300,1302,1304,1306,1308,1310,1312],{"class":62,"line":74},[60,1286,1287],{"class":178},"    r",[60,1289,188],{"class":66},[60,1291,343],{"class":165},[60,1293,208],{"class":66},[60,1295,886],{"class":252},[60,1297,351],{"class":66},[60,1299,354],{"class":66},[60,1301,357],{"class":315},[60,1303,319],{"class":66},[60,1305,322],{"class":70},[60,1307,188],{"class":66},[60,1309,366],{"class":70},[60,1311,330],{"class":66},[60,1313,172],{"class":66},[60,1315,1316,1319,1321,1323,1325,1327,1330,1332],{"class":62,"line":81},[60,1317,1318],{"class":178},"        c",[60,1320,188],{"class":66},[60,1322,381],{"class":165},[60,1324,208],{"class":66},[60,1326,386],{"class":66},[60,1328,1329],{"class":389},"ロゴ",[60,1331,386],{"class":66},[60,1333,151],{"class":66},[60,1335,1336],{"class":62,"line":91},[60,1337,432],{"class":66},[60,1339,1340,1342,1344,1346,1348,1350,1352,1354,1356,1358,1360,1362,1364,1366],{"class":62,"line":103},[60,1341,1287],{"class":178},[60,1343,188],{"class":66},[60,1345,343],{"class":165},[60,1347,208],{"class":66},[60,1349,676],{"class":252},[60,1351,351],{"class":66},[60,1353,354],{"class":66},[60,1355,357],{"class":315},[60,1357,319],{"class":66},[60,1359,322],{"class":70},[60,1361,188],{"class":66},[60,1363,366],{"class":70},[60,1365,330],{"class":66},[60,1367,172],{"class":66},[60,1369,1370,1372,1374,1376,1378,1380,1383,1385],{"class":62,"line":113},[60,1371,1318],{"class":178},[60,1373,188],{"class":66},[60,1375,381],{"class":165},[60,1377,208],{"class":66},[60,1379,386],{"class":66},[60,1381,1382],{"class":389},"請求番号",[60,1384,386],{"class":66},[60,1386,151],{"class":66},[60,1388,1389],{"class":62,"line":118},[60,1390,432],{"class":66},[60,1392,1393],{"class":62,"line":128},[60,1394,1395],{"class":66},"})\n",[13,1397,1398],{"id":1398},"グリッドにないもの",[17,1400,1401,1402,1404],{},"ネストはできない。",[21,1403,366],{}," はコンテンツ要素 (Text / Image / Table / List / Spacer) を受け取るが、中に別の行を入れることはできない。ネストが必要に見える構造は、ページ直下の兄弟行として 2 行に分けた方がすっきりすることが多い。",[17,1406,1407,1408,1411,1412,1415],{},"オフセット列もない。Bootstrap の ",[21,1409,1410],{},".offset-2"," 相当は提供していない。右に寄せたければ空の ",[21,1413,1414],{},"Col(n)"," を左に挟む。",[17,1417,1418],{},"ブレークポイントもない。PDF はリサイズしない。どの端末で開いても同じレイアウトになる — 出力が DOM ではなく固定座標のラスタなので、再レイアウトという概念が存在しない。",[17,1420,1421],{},"この「ないもの」が設計上の利点になっている。グリッドが持たない機能ごとに、PDF の出力結果を読むときに考えなくていい曖昧さが 1 つずつ減っていく。",[13,1423,1424],{"id":1424},"関連記事",[1192,1426,1427,1435,1442],{},[1195,1428,1429,1434],{},[1430,1431,1433],"a",{"href":1432},"/ja/blog/embed-japanese-font","gpdf で日本語フォントを埋め込むには？"," — グリッド列の中で CJK を扱う",[1195,1436,1437,1441],{},[1430,1438,1440],{"href":1439},"/ja/blog/go-pdf-library-showdown-2026","Go PDF ライブラリ比較 2026"," — Builder API が gofpdf / gopdf / Maroto とどう違うか",[1195,1443,1444,1450],{},[1430,1445,1449],{"href":1446,"rel":1447},"https://gpdf.dev/ja/docs/guide/layout",[1448],"nofollow","レイアウトガイド"," — 行・列・スペーシングの完全リファレンス",[13,1452,1454],{"id":1453},"gpdf-を使ってみる","gpdf を使ってみる",[17,1456,1457],{},"gpdf は Go の PDF 生成ライブラリ。MIT、ゼロ依存、CJK 対応。",[51,1459,1463],{"className":1460,"code":1461,"language":1462,"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,1464,1465],{"__ignoreMap":56},[60,1466,1467,1469,1472],{"class":62,"line":63},[60,1468,55],{"class":70},[60,1470,1471],{"class":389}," get",[60,1473,1474],{"class":389}," github.com/gpdf-dev/gpdf\n",[17,1476,1477,1482,1483],{},[1430,1478,1481],{"href":1479,"rel":1480},"https://github.com/gpdf-dev/gpdf",[1448],"⭐ Star on GitHub"," · ",[1430,1484,1487],{"href":1485,"rel":1486},"https://gpdf.dev/ja/docs/quickstart",[1448],"ドキュメントを読む",[1489,1490,1491],"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":1493},[1494,1495,1496,1497,1498,1499,1500,1501,1502,1503],{"id":15,"depth":74,"text":15},{"id":31,"depth":74,"text":31},{"id":49,"depth":74,"text":49},{"id":1139,"depth":74,"text":1140},{"id":1150,"depth":74,"text":1150},{"id":1186,"depth":74,"text":1187},{"id":1223,"depth":74,"text":1224},{"id":1398,"depth":74,"text":1398},{"id":1424,"depth":74,"text":1424},{"id":1453,"depth":74,"text":1454},"gpdf の 12 列グリッドは r.Col(span, fn) に 1–12 の整数を渡すだけ。幅は span/12、ガターもブレークポイントもない PDF 向けの割り切った設計。",false,"md",{"name":1508,"totalTime":1509,"tools":1510,"steps":1512},"gpdf の 12 列グリッドでページをレイアウトする","PT10M",[1511,123],"Go 1.22+",[1513,1516,1519,1522,1525],{"name":1514,"text":1515},"ページに行を開く","一番高い列に合わせて行の高さを可変にしたいなら page.AutoRow(fn)、固定したいなら page.Row(height, fn) を呼ぶ。",{"name":1517,"text":1518},"r.Col(span, fn) で列を宣言する","行の中で r.Col(span, fn) を列の数だけ呼ぶ。span は 1〜12 の整数で、行幅に対するその列の取り分を表す。",{"name":1520,"text":1521},"行ごとの span 合計を 12 以下に収める","合計が 12 未満なら右側が空く。12 を超えると最後の列が行からはみ出す — たいていバグの兆候。",{"name":1523,"text":1524},"列にコンテンツを詰める","ColBuilder のコールバック内で c.Text / c.Image / c.Table / c.Spacer を呼ぶ。追加した順に縦積みされる。",{"name":1526,"text":1527},"次の行を開く","次の視覚行は page.AutoRow をもう一度呼ぶ。行は独立していて、4+8 の行のすぐ下に 3+3+3+3 の行を置いて問題ない。",null,{},"/ja/blog/12-column-grid",{"title":5,"description":1504},"ja/blog/005.12-column-grid",[1534,1535,1536],"recipe","tutorial","templates","-lx6YfUHIibbueChcrBeJmAI6Vbt1sGp5RzBMpkaoGc",1776529264031]