[{"data":1,"prerenderedAt":2299},["ShallowReactive",2],{"blog-ja-nest-row-in-col":3},{"id":4,"title":5,"author":6,"body":10,"date":885,"description":2265,"draft":2266,"extension":2267,"howTo":2268,"image":2289,"meta":2290,"navigation":469,"path":2291,"seo":2292,"stem":2293,"tags":2294,"updated":2289,"__hash__":2298},"blogJa/ja/blog/025.nest-row-in-col.md","Col の中に Row をネストする方法は?",{"name":7,"url":8,"avatar":9},"Taiki Noda","https://nadai.dev/ja/about","https://nadai.dev/og-default.png",{"type":11,"value":12,"toc":2252},"minimark",[13,17,49,52,95,99,108,415,445,449,452,1154,1170,1177,1183,1606,1625,1629,1639,1856,1869,1872,1887,1943,1959,1963,1969,2176,2183,2186,2212,2216,2219,2236,2248],[14,15,16],"h2",{"id":16},"質問を別の言葉で",[18,19,20,21,25,26,29,30,32,33,40,41,44,45,48],"p",{},"Bootstrap や Tailwind なら ",[22,23,24],"code",{},".row"," の中に ",[22,27,28],{},".col","、その中にまた ",[22,31,24],{},"、と自由にネストできる。",[34,35,39],"a",{"href":36,"rel":37},"https://github.com/gpdf-dev/gpdf",[38],"nofollow","gpdf"," でも同じ ",[22,42,43],{},"r.Col(span, fn)"," の文法が見えるので、Col のクロージャの中で ",[22,46,47],{},"c.Row(...)"," と書いてみる。補完が出ない。これは設計漏れですか?",[14,50,51],{"id":51},"結論",[18,53,54,55,59,60,63,64,67,68,67,71,67,74,67,77,67,80,83,84,67,87,90,91,94],{},"違います。",[56,57,58],"strong",{},"gpdf の 12 カラムグリッドは意図的にフラットです。"," ",[22,61,62],{},"ColBuilder"," が受け付けるのはコンテンツだけ — ",[22,65,66],{},"Text"," / ",[22,69,70],{},"Image",[22,72,73],{},"Table",[22,75,76],{},"Box",[22,78,79],{},"List",[22,81,82],{},"Spacer"," — で、",[22,85,86],{},"Row",[22,88,89],{},"AutoRow"," は ",[22,92,93],{},"PageBuilder"," 側にしかありません。シンタックスを探してここに来たなら、無いのが答えです。下では代替の 3 イディオムを紹介します。",[14,96,98],{"id":97},"api-の形","API の形",[18,100,101,103,104,107],{},[22,102,62],{}," のメソッド一覧 (",[22,105,106],{},"gpdf/template/grid.go",") はこうです:",[109,110,115],"pre",{"className":111,"code":112,"language":113,"meta":114,"style":114},"language-go shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","func (c *ColBuilder) Text(text string, opts ...TextOption)\nfunc (c *ColBuilder) Image(src []byte, opts ...ImageOption)\nfunc (c *ColBuilder) Box(fn func(c *ColBuilder), opts ...BoxOption)\nfunc (c *ColBuilder) Table(header []string, rows [][]string, opts ...TableOption)\nfunc (c *ColBuilder) Line(opts ...LineOption)\nfunc (c *ColBuilder) List(items []string, opts ...ListOption)\nfunc (c *ColBuilder) Spacer(height document.Value)\n// …PageNumber, TotalPages, RichText, QRCode, Barcode\n","go","",[22,116,117,171,211,257,306,336,374,408],{"__ignoreMap":114},[118,119,122,126,129,133,136,139,142,146,149,152,156,159,162,165,168],"span",{"class":120,"line":121},"line",1,[118,123,125],{"class":124},"sMK4o","func",[118,127,128],{"class":124}," (",[118,130,132],{"class":131},"sHdIc","c ",[118,134,135],{"class":124},"*",[118,137,62],{"class":138},"sBMFI",[118,140,141],{"class":124},")",[118,143,145],{"class":144},"s2Zo4"," Text",[118,147,148],{"class":124},"(",[118,150,151],{"class":131},"text",[118,153,155],{"class":154},"spNyl"," string",[118,157,158],{"class":124},",",[118,160,161],{"class":131}," opts",[118,163,164],{"class":124}," ...",[118,166,167],{"class":138},"TextOption",[118,169,170],{"class":124},")\n",[118,172,174,176,178,180,182,184,186,189,191,194,197,200,202,204,206,209],{"class":120,"line":173},2,[118,175,125],{"class":124},[118,177,128],{"class":124},[118,179,132],{"class":131},[118,181,135],{"class":124},[118,183,62],{"class":138},[118,185,141],{"class":124},[118,187,188],{"class":144}," Image",[118,190,148],{"class":124},[118,192,193],{"class":131},"src",[118,195,196],{"class":124}," []",[118,198,199],{"class":154},"byte",[118,201,158],{"class":124},[118,203,161],{"class":131},[118,205,164],{"class":124},[118,207,208],{"class":138},"ImageOption",[118,210,170],{"class":124},[118,212,214,216,218,220,222,224,226,229,231,234,237,240,243,245,248,250,252,255],{"class":120,"line":213},3,[118,215,125],{"class":124},[118,217,128],{"class":124},[118,219,132],{"class":131},[118,221,135],{"class":124},[118,223,62],{"class":138},[118,225,141],{"class":124},[118,227,228],{"class":144}," Box",[118,230,148],{"class":124},[118,232,233],{"class":131},"fn",[118,235,236],{"class":124}," func(",[118,238,239],{"class":131},"c",[118,241,242],{"class":124}," *",[118,244,62],{"class":138},[118,246,247],{"class":124},"),",[118,249,161],{"class":131},[118,251,164],{"class":124},[118,253,254],{"class":138},"BoxOption",[118,256,170],{"class":124},[118,258,260,262,264,266,268,270,272,275,277,280,282,285,287,290,293,295,297,299,301,304],{"class":120,"line":259},4,[118,261,125],{"class":124},[118,263,128],{"class":124},[118,265,132],{"class":131},[118,267,135],{"class":124},[118,269,62],{"class":138},[118,271,141],{"class":124},[118,273,274],{"class":144}," Table",[118,276,148],{"class":124},[118,278,279],{"class":131},"header",[118,281,196],{"class":124},[118,283,284],{"class":154},"string",[118,286,158],{"class":124},[118,288,289],{"class":131}," rows",[118,291,292],{"class":124}," [][]",[118,294,284],{"class":154},[118,296,158],{"class":124},[118,298,161],{"class":131},[118,300,164],{"class":124},[118,302,303],{"class":138},"TableOption",[118,305,170],{"class":124},[118,307,309,311,313,315,317,319,321,324,326,329,331,334],{"class":120,"line":308},5,[118,310,125],{"class":124},[118,312,128],{"class":124},[118,314,132],{"class":131},[118,316,135],{"class":124},[118,318,62],{"class":138},[118,320,141],{"class":124},[118,322,323],{"class":144}," Line",[118,325,148],{"class":124},[118,327,328],{"class":131},"opts",[118,330,164],{"class":124},[118,332,333],{"class":138},"LineOption",[118,335,170],{"class":124},[118,337,339,341,343,345,347,349,351,354,356,359,361,363,365,367,369,372],{"class":120,"line":338},6,[118,340,125],{"class":124},[118,342,128],{"class":124},[118,344,132],{"class":131},[118,346,135],{"class":124},[118,348,62],{"class":138},[118,350,141],{"class":124},[118,352,353],{"class":144}," List",[118,355,148],{"class":124},[118,357,358],{"class":131},"items",[118,360,196],{"class":124},[118,362,284],{"class":154},[118,364,158],{"class":124},[118,366,161],{"class":131},[118,368,164],{"class":124},[118,370,371],{"class":138},"ListOption",[118,373,170],{"class":124},[118,375,377,379,381,383,385,387,389,392,394,397,400,403,406],{"class":120,"line":376},7,[118,378,125],{"class":124},[118,380,128],{"class":124},[118,382,132],{"class":131},[118,384,135],{"class":124},[118,386,62],{"class":138},[118,388,141],{"class":124},[118,390,391],{"class":144}," Spacer",[118,393,148],{"class":124},[118,395,396],{"class":131},"height",[118,398,399],{"class":138}," document",[118,401,402],{"class":124},".",[118,404,405],{"class":138},"Value",[118,407,170],{"class":124},[118,409,411],{"class":120,"line":410},8,[118,412,414],{"class":413},"sHwdD","// …PageNumber, TotalPages, RichText, QRCode, Barcode\n",[18,416,417,419,420,422,423,426,427,430,431,433,434,437,438,441,442,444],{},[22,418,86],{}," がない。",[22,421,89],{}," もない。",[22,424,425],{},"Col"," も無い。Col → Row への経路はメソッドとして存在せず、最も近いのは ",[22,428,429],{},"c.Box(fn, ...)"," — ですが ",[22,432,76],{}," が受け取るのもまた ",[22,435,436],{},"*ColBuilder"," で、Row ではありません。",[56,439,440],{},"カラムをカラムに入れる","ことは(",[22,443,76],{}," 経由で擬似的に)できても、カラムの中に横並びの行を開くことはできません。これが制約です。",[14,446,448],{"id":447},"イディオム-1-ページレベルの兄弟-row","イディオム 1 — ページレベルの兄弟 Row",[18,450,451],{},"「ネスト Row」と書きたくなった場面の 9 割はこれで足ります。",[109,453,455],{"className":111,"code":454,"language":113,"meta":114,"style":114},"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    page := doc.AddPage()\n\n    // 書きたかったが書けないコード:\n    //\n    //   page.AutoRow(func(r *template.RowBuilder) {\n    //       r.Col(8, func(c *template.ColBuilder) {\n    //           c.Row(...) ❌ 存在しない\n    //       })\n    //   })\n\n    // 実際に書くコード:\n    page.AutoRow(func(r *template.RowBuilder) {\n        r.Col(8, func(c *template.ColBuilder) {\n            c.Text(\"記事タイトル\", template.FontSize(18), template.Bold())\n        })\n        r.Col(4, func(c *template.ColBuilder) {\n            c.Text(\"2026-05-16\")\n        })\n    })\n    page.AutoRow(func(r *template.RowBuilder) {\n        r.Col(8, func(c *template.ColBuilder) {\n            c.Text(\"リード段落は同じ 8 幅のカラムを使う。\")\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    _ = os.WriteFile(\"flat.pdf\", data, 0o644)\n}\n",[22,456,457,465,471,480,491,500,504,513,522,532,537,542,556,577,601,638,644,663,668,674,680,686,692,698,704,710,715,721,751,784,832,838,870,890,895,901,926,957,977,982,1013,1033,1038,1043,1048,1070,1086,1104,1110,1148],{"__ignoreMap":114},[118,458,459,462],{"class":120,"line":121},[118,460,461],{"class":124},"package",[118,463,464],{"class":138}," main\n",[118,466,467],{"class":120,"line":173},[118,468,470],{"emptyLinePlaceholder":469},true,"\n",[118,472,473,477],{"class":120,"line":213},[118,474,476],{"class":475},"s7zQu","import",[118,478,479],{"class":124}," (\n",[118,481,482,485,488],{"class":120,"line":259},[118,483,484],{"class":124},"    \"",[118,486,487],{"class":138},"log",[118,489,490],{"class":124},"\"\n",[118,492,493,495,498],{"class":120,"line":308},[118,494,484],{"class":124},[118,496,497],{"class":138},"os",[118,499,490],{"class":124},[118,501,502],{"class":120,"line":338},[118,503,470],{"emptyLinePlaceholder":469},[118,505,506,508,511],{"class":120,"line":376},[118,507,484],{"class":124},[118,509,510],{"class":138},"github.com/gpdf-dev/gpdf",[118,512,490],{"class":124},[118,514,515,517,520],{"class":120,"line":410},[118,516,484],{"class":124},[118,518,519],{"class":138},"github.com/gpdf-dev/gpdf/document",[118,521,490],{"class":124},[118,523,525,527,530],{"class":120,"line":524},9,[118,526,484],{"class":124},[118,528,529],{"class":138},"github.com/gpdf-dev/gpdf/template",[118,531,490],{"class":124},[118,533,535],{"class":120,"line":534},10,[118,536,170],{"class":124},[118,538,540],{"class":120,"line":539},11,[118,541,470],{"emptyLinePlaceholder":469},[118,543,545,547,550,553],{"class":120,"line":544},12,[118,546,125],{"class":124},[118,548,549],{"class":144}," main",[118,551,552],{"class":124},"()",[118,554,555],{"class":124}," {\n",[118,557,559,563,566,569,571,574],{"class":120,"line":558},13,[118,560,562],{"class":561},"sTEyZ","    doc ",[118,564,565],{"class":124},":=",[118,567,568],{"class":561}," gpdf",[118,570,402],{"class":124},[118,572,573],{"class":144},"NewDocument",[118,575,576],{"class":124},"(\n",[118,578,580,583,585,588,590,593,595,598],{"class":120,"line":579},14,[118,581,582],{"class":561},"        gpdf",[118,584,402],{"class":124},[118,586,587],{"class":144},"WithPageSize",[118,589,148],{"class":124},[118,591,592],{"class":561},"document",[118,594,402],{"class":124},[118,596,597],{"class":561},"A4",[118,599,600],{"class":124},"),\n",[118,602,604,606,608,611,613,615,617,620,622,624,626,629,631,635],{"class":120,"line":603},15,[118,605,582],{"class":561},[118,607,402],{"class":124},[118,609,610],{"class":144},"WithMargins",[118,612,148],{"class":124},[118,614,592],{"class":561},[118,616,402],{"class":124},[118,618,619],{"class":144},"UniformEdges",[118,621,148],{"class":124},[118,623,592],{"class":561},[118,625,402],{"class":124},[118,627,628],{"class":144},"Mm",[118,630,148],{"class":124},[118,632,634],{"class":633},"sbssI","15",[118,636,637],{"class":124},"))),\n",[118,639,641],{"class":120,"line":640},16,[118,642,643],{"class":124},"    )\n",[118,645,647,650,652,655,657,660],{"class":120,"line":646},17,[118,648,649],{"class":561},"    page ",[118,651,565],{"class":124},[118,653,654],{"class":561}," doc",[118,656,402],{"class":124},[118,658,659],{"class":144},"AddPage",[118,661,662],{"class":124},"()\n",[118,664,666],{"class":120,"line":665},18,[118,667,470],{"emptyLinePlaceholder":469},[118,669,671],{"class":120,"line":670},19,[118,672,673],{"class":413},"    // 書きたかったが書けないコード:\n",[118,675,677],{"class":120,"line":676},20,[118,678,679],{"class":413},"    //\n",[118,681,683],{"class":120,"line":682},21,[118,684,685],{"class":413},"    //   page.AutoRow(func(r *template.RowBuilder) {\n",[118,687,689],{"class":120,"line":688},22,[118,690,691],{"class":413},"    //       r.Col(8, func(c *template.ColBuilder) {\n",[118,693,695],{"class":120,"line":694},23,[118,696,697],{"class":413},"    //           c.Row(...) ❌ 存在しない\n",[118,699,701],{"class":120,"line":700},24,[118,702,703],{"class":413},"    //       })\n",[118,705,707],{"class":120,"line":706},25,[118,708,709],{"class":413},"    //   })\n",[118,711,713],{"class":120,"line":712},26,[118,714,470],{"emptyLinePlaceholder":469},[118,716,718],{"class":120,"line":717},27,[118,719,720],{"class":413},"    // 実際に書くコード:\n",[118,722,724,727,729,731,734,737,739,742,744,747,749],{"class":120,"line":723},28,[118,725,726],{"class":561},"    page",[118,728,402],{"class":124},[118,730,89],{"class":144},[118,732,733],{"class":124},"(func(",[118,735,736],{"class":131},"r",[118,738,242],{"class":124},[118,740,741],{"class":138},"template",[118,743,402],{"class":124},[118,745,746],{"class":138},"RowBuilder",[118,748,141],{"class":124},[118,750,555],{"class":124},[118,752,754,757,759,761,763,766,768,770,772,774,776,778,780,782],{"class":120,"line":753},29,[118,755,756],{"class":561},"        r",[118,758,402],{"class":124},[118,760,425],{"class":144},[118,762,148],{"class":124},[118,764,765],{"class":633},"8",[118,767,158],{"class":124},[118,769,236],{"class":124},[118,771,239],{"class":131},[118,773,242],{"class":124},[118,775,741],{"class":138},[118,777,402],{"class":124},[118,779,62],{"class":138},[118,781,141],{"class":124},[118,783,555],{"class":124},[118,785,787,790,792,794,796,799,803,805,807,810,812,815,817,820,822,824,826,829],{"class":120,"line":786},30,[118,788,789],{"class":561},"            c",[118,791,402],{"class":124},[118,793,66],{"class":144},[118,795,148],{"class":124},[118,797,798],{"class":124},"\"",[118,800,802],{"class":801},"sfazB","記事タイトル",[118,804,798],{"class":124},[118,806,158],{"class":124},[118,808,809],{"class":561}," template",[118,811,402],{"class":124},[118,813,814],{"class":144},"FontSize",[118,816,148],{"class":124},[118,818,819],{"class":633},"18",[118,821,247],{"class":124},[118,823,809],{"class":561},[118,825,402],{"class":124},[118,827,828],{"class":144},"Bold",[118,830,831],{"class":124},"())\n",[118,833,835],{"class":120,"line":834},31,[118,836,837],{"class":124},"        })\n",[118,839,841,843,845,847,849,852,854,856,858,860,862,864,866,868],{"class":120,"line":840},32,[118,842,756],{"class":561},[118,844,402],{"class":124},[118,846,425],{"class":144},[118,848,148],{"class":124},[118,850,851],{"class":633},"4",[118,853,158],{"class":124},[118,855,236],{"class":124},[118,857,239],{"class":131},[118,859,242],{"class":124},[118,861,741],{"class":138},[118,863,402],{"class":124},[118,865,62],{"class":138},[118,867,141],{"class":124},[118,869,555],{"class":124},[118,871,873,875,877,879,881,883,886,888],{"class":120,"line":872},33,[118,874,789],{"class":561},[118,876,402],{"class":124},[118,878,66],{"class":144},[118,880,148],{"class":124},[118,882,798],{"class":124},[118,884,885],{"class":801},"2026-05-16",[118,887,798],{"class":124},[118,889,170],{"class":124},[118,891,893],{"class":120,"line":892},34,[118,894,837],{"class":124},[118,896,898],{"class":120,"line":897},35,[118,899,900],{"class":124},"    })\n",[118,902,904,906,908,910,912,914,916,918,920,922,924],{"class":120,"line":903},36,[118,905,726],{"class":561},[118,907,402],{"class":124},[118,909,89],{"class":144},[118,911,733],{"class":124},[118,913,736],{"class":131},[118,915,242],{"class":124},[118,917,741],{"class":138},[118,919,402],{"class":124},[118,921,746],{"class":138},[118,923,141],{"class":124},[118,925,555],{"class":124},[118,927,929,931,933,935,937,939,941,943,945,947,949,951,953,955],{"class":120,"line":928},37,[118,930,756],{"class":561},[118,932,402],{"class":124},[118,934,425],{"class":144},[118,936,148],{"class":124},[118,938,765],{"class":633},[118,940,158],{"class":124},[118,942,236],{"class":124},[118,944,239],{"class":131},[118,946,242],{"class":124},[118,948,741],{"class":138},[118,950,402],{"class":124},[118,952,62],{"class":138},[118,954,141],{"class":124},[118,956,555],{"class":124},[118,958,960,962,964,966,968,970,973,975],{"class":120,"line":959},38,[118,961,789],{"class":561},[118,963,402],{"class":124},[118,965,66],{"class":144},[118,967,148],{"class":124},[118,969,798],{"class":124},[118,971,972],{"class":801},"リード段落は同じ 8 幅のカラムを使う。",[118,974,798],{"class":124},[118,976,170],{"class":124},[118,978,980],{"class":120,"line":979},39,[118,981,837],{"class":124},[118,983,985,987,989,991,993,995,997,999,1001,1003,1005,1007,1009,1011],{"class":120,"line":984},40,[118,986,756],{"class":561},[118,988,402],{"class":124},[118,990,425],{"class":144},[118,992,148],{"class":124},[118,994,851],{"class":633},[118,996,158],{"class":124},[118,998,236],{"class":124},[118,1000,239],{"class":131},[118,1002,242],{"class":124},[118,1004,741],{"class":138},[118,1006,402],{"class":124},[118,1008,62],{"class":138},[118,1010,141],{"class":124},[118,1012,555],{"class":124},[118,1014,1016,1018,1020,1022,1024,1026,1029,1031],{"class":120,"line":1015},41,[118,1017,789],{"class":561},[118,1019,402],{"class":124},[118,1021,66],{"class":144},[118,1023,148],{"class":124},[118,1025,798],{"class":124},[118,1027,1028],{"class":801},"著者: ノダ タイキ",[118,1030,798],{"class":124},[118,1032,170],{"class":124},[118,1034,1036],{"class":120,"line":1035},42,[118,1037,837],{"class":124},[118,1039,1041],{"class":120,"line":1040},43,[118,1042,900],{"class":124},[118,1044,1046],{"class":120,"line":1045},44,[118,1047,470],{"emptyLinePlaceholder":469},[118,1049,1051,1054,1056,1059,1061,1063,1065,1068],{"class":120,"line":1050},45,[118,1052,1053],{"class":561},"    data",[118,1055,158],{"class":124},[118,1057,1058],{"class":561}," err ",[118,1060,565],{"class":124},[118,1062,654],{"class":561},[118,1064,402],{"class":124},[118,1066,1067],{"class":144},"Generate",[118,1069,662],{"class":124},[118,1071,1073,1076,1078,1081,1084],{"class":120,"line":1072},46,[118,1074,1075],{"class":475},"    if",[118,1077,1058],{"class":561},[118,1079,1080],{"class":124},"!=",[118,1082,1083],{"class":124}," nil",[118,1085,555],{"class":124},[118,1087,1089,1092,1094,1097,1099,1102],{"class":120,"line":1088},47,[118,1090,1091],{"class":561},"        log",[118,1093,402],{"class":124},[118,1095,1096],{"class":144},"Fatal",[118,1098,148],{"class":124},[118,1100,1101],{"class":561},"err",[118,1103,170],{"class":124},[118,1105,1107],{"class":120,"line":1106},48,[118,1108,1109],{"class":124},"    }\n",[118,1111,1113,1116,1119,1122,1124,1127,1129,1131,1134,1136,1138,1141,1143,1146],{"class":120,"line":1112},49,[118,1114,1115],{"class":561},"    _ ",[118,1117,1118],{"class":124},"=",[118,1120,1121],{"class":561}," os",[118,1123,402],{"class":124},[118,1125,1126],{"class":144},"WriteFile",[118,1128,148],{"class":124},[118,1130,798],{"class":124},[118,1132,1133],{"class":801},"flat.pdf",[118,1135,798],{"class":124},[118,1137,158],{"class":124},[118,1139,1140],{"class":561}," data",[118,1142,158],{"class":124},[118,1144,1145],{"class":633}," 0o644",[118,1147,170],{"class":124},[118,1149,1151],{"class":120,"line":1150},50,[118,1152,1153],{"class":124},"}\n",[18,1155,1156,1157,1159,1160,1163,1164,25,1167,1169],{},"2 つの ",[22,1158,89],{}," が同じ ",[22,1161,1162],{},"8+4"," を共有しているので、視覚的にはカラムが揃って見えます。サブグリッドではなく、フラットに並んだ Row が同じカラム配分を使っているだけ。CSS で ",[22,1165,1166],{},".col-8",[22,1168,24],{}," を入れたときと出力は同じです — そもそもネストが買っていたのは構文上の局所性だけで、gpdf はその予算を「カラム幅の一致」に振り直しています。",[14,1171,1173,1174],{"id":1172},"イディオム-2-グルーピングは-cbox","イディオム 2 — グルーピングは ",[22,1175,1176],{},"c.Box",[18,1178,1179,1180,1182],{},"「このカラムの中に枠線付きの箱を置いて、中に 2 行積みたい」が本当の動機なら、欲しかったのは ",[22,1181,76],{}," です:",[109,1184,1186],{"className":111,"code":1185,"language":113,"meta":114,"style":114},"page.AutoRow(func(r *template.RowBuilder) {\n    r.Col(6, func(c *template.ColBuilder) {\n        c.Box(func(c *template.ColBuilder) {\n            c.Text(\"請求先\", template.Bold())\n            c.Text(\"株式会社アクメ\")\n            c.Text(\"東京都千代田区\")\n        },\n            template.WithBoxBorder(template.Border(\n                template.BorderWidth(document.Pt(1)),\n                template.BorderColor(pdf.RGBHex(0xBDBDBD)),\n            )),\n            template.WithBoxPadding(document.UniformEdges(document.Mm(4))),\n        )\n    })\n    r.Col(6, func(c *template.ColBuilder) {\n        c.Box(func(c *template.ColBuilder) {\n            c.Text(\"納品先\", template.Bold())\n            c.Text(\"請求先と同一\")\n        },\n            template.WithBoxPadding(document.UniformEdges(document.Mm(4))),\n        )\n    })\n})\n",[22,1187,1188,1213,1245,1270,1297,1316,1335,1340,1361,1388,1414,1419,1450,1455,1459,1489,1513,1540,1559,1563,1593,1597,1601],{"__ignoreMap":114},[118,1189,1190,1193,1195,1197,1199,1201,1203,1205,1207,1209,1211],{"class":120,"line":121},[118,1191,1192],{"class":561},"page",[118,1194,402],{"class":124},[118,1196,89],{"class":144},[118,1198,733],{"class":124},[118,1200,736],{"class":131},[118,1202,242],{"class":124},[118,1204,741],{"class":138},[118,1206,402],{"class":124},[118,1208,746],{"class":138},[118,1210,141],{"class":124},[118,1212,555],{"class":124},[118,1214,1215,1218,1220,1222,1224,1227,1229,1231,1233,1235,1237,1239,1241,1243],{"class":120,"line":173},[118,1216,1217],{"class":561},"    r",[118,1219,402],{"class":124},[118,1221,425],{"class":144},[118,1223,148],{"class":124},[118,1225,1226],{"class":633},"6",[118,1228,158],{"class":124},[118,1230,236],{"class":124},[118,1232,239],{"class":131},[118,1234,242],{"class":124},[118,1236,741],{"class":138},[118,1238,402],{"class":124},[118,1240,62],{"class":138},[118,1242,141],{"class":124},[118,1244,555],{"class":124},[118,1246,1247,1250,1252,1254,1256,1258,1260,1262,1264,1266,1268],{"class":120,"line":213},[118,1248,1249],{"class":561},"        c",[118,1251,402],{"class":124},[118,1253,76],{"class":144},[118,1255,733],{"class":124},[118,1257,239],{"class":131},[118,1259,242],{"class":124},[118,1261,741],{"class":138},[118,1263,402],{"class":124},[118,1265,62],{"class":138},[118,1267,141],{"class":124},[118,1269,555],{"class":124},[118,1271,1272,1274,1276,1278,1280,1282,1285,1287,1289,1291,1293,1295],{"class":120,"line":259},[118,1273,789],{"class":561},[118,1275,402],{"class":124},[118,1277,66],{"class":144},[118,1279,148],{"class":124},[118,1281,798],{"class":124},[118,1283,1284],{"class":801},"請求先",[118,1286,798],{"class":124},[118,1288,158],{"class":124},[118,1290,809],{"class":561},[118,1292,402],{"class":124},[118,1294,828],{"class":144},[118,1296,831],{"class":124},[118,1298,1299,1301,1303,1305,1307,1309,1312,1314],{"class":120,"line":308},[118,1300,789],{"class":561},[118,1302,402],{"class":124},[118,1304,66],{"class":144},[118,1306,148],{"class":124},[118,1308,798],{"class":124},[118,1310,1311],{"class":801},"株式会社アクメ",[118,1313,798],{"class":124},[118,1315,170],{"class":124},[118,1317,1318,1320,1322,1324,1326,1328,1331,1333],{"class":120,"line":338},[118,1319,789],{"class":561},[118,1321,402],{"class":124},[118,1323,66],{"class":144},[118,1325,148],{"class":124},[118,1327,798],{"class":124},[118,1329,1330],{"class":801},"東京都千代田区",[118,1332,798],{"class":124},[118,1334,170],{"class":124},[118,1336,1337],{"class":120,"line":376},[118,1338,1339],{"class":124},"        },\n",[118,1341,1342,1345,1347,1350,1352,1354,1356,1359],{"class":120,"line":410},[118,1343,1344],{"class":561},"            template",[118,1346,402],{"class":124},[118,1348,1349],{"class":144},"WithBoxBorder",[118,1351,148],{"class":124},[118,1353,741],{"class":561},[118,1355,402],{"class":124},[118,1357,1358],{"class":144},"Border",[118,1360,576],{"class":124},[118,1362,1363,1366,1368,1371,1373,1375,1377,1380,1382,1385],{"class":120,"line":524},[118,1364,1365],{"class":561},"                template",[118,1367,402],{"class":124},[118,1369,1370],{"class":144},"BorderWidth",[118,1372,148],{"class":124},[118,1374,592],{"class":561},[118,1376,402],{"class":124},[118,1378,1379],{"class":144},"Pt",[118,1381,148],{"class":124},[118,1383,1384],{"class":633},"1",[118,1386,1387],{"class":124},")),\n",[118,1389,1390,1392,1394,1397,1399,1402,1404,1407,1409,1412],{"class":120,"line":534},[118,1391,1365],{"class":561},[118,1393,402],{"class":124},[118,1395,1396],{"class":144},"BorderColor",[118,1398,148],{"class":124},[118,1400,1401],{"class":561},"pdf",[118,1403,402],{"class":124},[118,1405,1406],{"class":144},"RGBHex",[118,1408,148],{"class":124},[118,1410,1411],{"class":633},"0xBDBDBD",[118,1413,1387],{"class":124},[118,1415,1416],{"class":120,"line":539},[118,1417,1418],{"class":124},"            )),\n",[118,1420,1421,1423,1425,1428,1430,1432,1434,1436,1438,1440,1442,1444,1446,1448],{"class":120,"line":544},[118,1422,1344],{"class":561},[118,1424,402],{"class":124},[118,1426,1427],{"class":144},"WithBoxPadding",[118,1429,148],{"class":124},[118,1431,592],{"class":561},[118,1433,402],{"class":124},[118,1435,619],{"class":144},[118,1437,148],{"class":124},[118,1439,592],{"class":561},[118,1441,402],{"class":124},[118,1443,628],{"class":144},[118,1445,148],{"class":124},[118,1447,851],{"class":633},[118,1449,637],{"class":124},[118,1451,1452],{"class":120,"line":558},[118,1453,1454],{"class":124},"        )\n",[118,1456,1457],{"class":120,"line":579},[118,1458,900],{"class":124},[118,1460,1461,1463,1465,1467,1469,1471,1473,1475,1477,1479,1481,1483,1485,1487],{"class":120,"line":603},[118,1462,1217],{"class":561},[118,1464,402],{"class":124},[118,1466,425],{"class":144},[118,1468,148],{"class":124},[118,1470,1226],{"class":633},[118,1472,158],{"class":124},[118,1474,236],{"class":124},[118,1476,239],{"class":131},[118,1478,242],{"class":124},[118,1480,741],{"class":138},[118,1482,402],{"class":124},[118,1484,62],{"class":138},[118,1486,141],{"class":124},[118,1488,555],{"class":124},[118,1490,1491,1493,1495,1497,1499,1501,1503,1505,1507,1509,1511],{"class":120,"line":640},[118,1492,1249],{"class":561},[118,1494,402],{"class":124},[118,1496,76],{"class":144},[118,1498,733],{"class":124},[118,1500,239],{"class":131},[118,1502,242],{"class":124},[118,1504,741],{"class":138},[118,1506,402],{"class":124},[118,1508,62],{"class":138},[118,1510,141],{"class":124},[118,1512,555],{"class":124},[118,1514,1515,1517,1519,1521,1523,1525,1528,1530,1532,1534,1536,1538],{"class":120,"line":646},[118,1516,789],{"class":561},[118,1518,402],{"class":124},[118,1520,66],{"class":144},[118,1522,148],{"class":124},[118,1524,798],{"class":124},[118,1526,1527],{"class":801},"納品先",[118,1529,798],{"class":124},[118,1531,158],{"class":124},[118,1533,809],{"class":561},[118,1535,402],{"class":124},[118,1537,828],{"class":144},[118,1539,831],{"class":124},[118,1541,1542,1544,1546,1548,1550,1552,1555,1557],{"class":120,"line":665},[118,1543,789],{"class":561},[118,1545,402],{"class":124},[118,1547,66],{"class":144},[118,1549,148],{"class":124},[118,1551,798],{"class":124},[118,1553,1554],{"class":801},"請求先と同一",[118,1556,798],{"class":124},[118,1558,170],{"class":124},[118,1560,1561],{"class":120,"line":670},[118,1562,1339],{"class":124},[118,1564,1565,1567,1569,1571,1573,1575,1577,1579,1581,1583,1585,1587,1589,1591],{"class":120,"line":676},[118,1566,1344],{"class":561},[118,1568,402],{"class":124},[118,1570,1427],{"class":144},[118,1572,148],{"class":124},[118,1574,592],{"class":561},[118,1576,402],{"class":124},[118,1578,619],{"class":144},[118,1580,148],{"class":124},[118,1582,592],{"class":561},[118,1584,402],{"class":124},[118,1586,628],{"class":144},[118,1588,148],{"class":124},[118,1590,851],{"class":633},[118,1592,637],{"class":124},[118,1594,1595],{"class":120,"line":682},[118,1596,1454],{"class":124},[118,1598,1599],{"class":120,"line":688},[118,1600,900],{"class":124},[118,1602,1603],{"class":120,"line":694},[118,1604,1605],{"class":124},"})\n",[18,1607,1608,1610,1611,1613,1614,1617,1618,1621,1622,1624],{},[22,1609,76],{}," が受け取る ",[22,1612,436],{}," の中身は",[56,1615,1616],{},"縦積み","です。Box を横分割することもできません — 横分割が欲しければイディオム 1 に戻ります。ただし「カード」状の見た目を欲しがってネスト Row を書こうとしたなら、正解はこれです。",[22,1619,1620],{},"grid.go:246"," の ",[22,1623,1176],{}," がグリッドが許可している唯一のネストで、それは意図的に一次元です。",[14,1626,1628],{"id":1627},"イディオム-3-サブグリッドは-12-カラムで直接書く","イディオム 3 — サブグリッドは 12 カラムで直接書く",[18,1630,1631,1632,1635,1636,1182],{},"「ページ左半分の中で 2 カラムにしたい — サムネとキャプションを左半分に並べて、本文を右半分に置く」というケース。直感は ",[22,1633,1634],{},"Col(6) > Row > Col(6) + Col(6)"," ですが、フラット版は単に ",[22,1637,1638],{},"Col(3) + Col(3) + Col(6)",[109,1640,1642],{"className":111,"code":1641,"language":113,"meta":114,"style":114},"page.AutoRow(func(r *template.RowBuilder) {\n    r.Col(3, func(c *template.ColBuilder) {\n        c.Image(thumbBytes)\n    })\n    r.Col(3, func(c *template.ColBuilder) {\n        c.Text(\"Photo by Ansel Adams\", template.Italic())\n        c.Text(\"1942\")\n    })\n    r.Col(6, func(c *template.ColBuilder) {\n        c.Text(\"本文段落はページの右半分を占める。\")\n    })\n})\n",[22,1643,1644,1668,1699,1714,1718,1748,1776,1795,1799,1829,1848,1852],{"__ignoreMap":114},[118,1645,1646,1648,1650,1652,1654,1656,1658,1660,1662,1664,1666],{"class":120,"line":121},[118,1647,1192],{"class":561},[118,1649,402],{"class":124},[118,1651,89],{"class":144},[118,1653,733],{"class":124},[118,1655,736],{"class":131},[118,1657,242],{"class":124},[118,1659,741],{"class":138},[118,1661,402],{"class":124},[118,1663,746],{"class":138},[118,1665,141],{"class":124},[118,1667,555],{"class":124},[118,1669,1670,1672,1674,1676,1678,1681,1683,1685,1687,1689,1691,1693,1695,1697],{"class":120,"line":173},[118,1671,1217],{"class":561},[118,1673,402],{"class":124},[118,1675,425],{"class":144},[118,1677,148],{"class":124},[118,1679,1680],{"class":633},"3",[118,1682,158],{"class":124},[118,1684,236],{"class":124},[118,1686,239],{"class":131},[118,1688,242],{"class":124},[118,1690,741],{"class":138},[118,1692,402],{"class":124},[118,1694,62],{"class":138},[118,1696,141],{"class":124},[118,1698,555],{"class":124},[118,1700,1701,1703,1705,1707,1709,1712],{"class":120,"line":213},[118,1702,1249],{"class":561},[118,1704,402],{"class":124},[118,1706,70],{"class":144},[118,1708,148],{"class":124},[118,1710,1711],{"class":561},"thumbBytes",[118,1713,170],{"class":124},[118,1715,1716],{"class":120,"line":259},[118,1717,900],{"class":124},[118,1719,1720,1722,1724,1726,1728,1730,1732,1734,1736,1738,1740,1742,1744,1746],{"class":120,"line":308},[118,1721,1217],{"class":561},[118,1723,402],{"class":124},[118,1725,425],{"class":144},[118,1727,148],{"class":124},[118,1729,1680],{"class":633},[118,1731,158],{"class":124},[118,1733,236],{"class":124},[118,1735,239],{"class":131},[118,1737,242],{"class":124},[118,1739,741],{"class":138},[118,1741,402],{"class":124},[118,1743,62],{"class":138},[118,1745,141],{"class":124},[118,1747,555],{"class":124},[118,1749,1750,1752,1754,1756,1758,1760,1763,1765,1767,1769,1771,1774],{"class":120,"line":338},[118,1751,1249],{"class":561},[118,1753,402],{"class":124},[118,1755,66],{"class":144},[118,1757,148],{"class":124},[118,1759,798],{"class":124},[118,1761,1762],{"class":801},"Photo by Ansel Adams",[118,1764,798],{"class":124},[118,1766,158],{"class":124},[118,1768,809],{"class":561},[118,1770,402],{"class":124},[118,1772,1773],{"class":144},"Italic",[118,1775,831],{"class":124},[118,1777,1778,1780,1782,1784,1786,1788,1791,1793],{"class":120,"line":376},[118,1779,1249],{"class":561},[118,1781,402],{"class":124},[118,1783,66],{"class":144},[118,1785,148],{"class":124},[118,1787,798],{"class":124},[118,1789,1790],{"class":801},"1942",[118,1792,798],{"class":124},[118,1794,170],{"class":124},[118,1796,1797],{"class":120,"line":410},[118,1798,900],{"class":124},[118,1800,1801,1803,1805,1807,1809,1811,1813,1815,1817,1819,1821,1823,1825,1827],{"class":120,"line":524},[118,1802,1217],{"class":561},[118,1804,402],{"class":124},[118,1806,425],{"class":144},[118,1808,148],{"class":124},[118,1810,1226],{"class":633},[118,1812,158],{"class":124},[118,1814,236],{"class":124},[118,1816,239],{"class":131},[118,1818,242],{"class":124},[118,1820,741],{"class":138},[118,1822,402],{"class":124},[118,1824,62],{"class":138},[118,1826,141],{"class":124},[118,1828,555],{"class":124},[118,1830,1831,1833,1835,1837,1839,1841,1844,1846],{"class":120,"line":534},[118,1832,1249],{"class":561},[118,1834,402],{"class":124},[118,1836,66],{"class":144},[118,1838,148],{"class":124},[118,1840,798],{"class":124},[118,1842,1843],{"class":801},"本文段落はページの右半分を占める。",[118,1845,798],{"class":124},[118,1847,170],{"class":124},[118,1849,1850],{"class":120,"line":539},[118,1851,900],{"class":124},[118,1853,1854],{"class":120,"line":544},[118,1855,1605],{"class":124},[18,1857,1858,1861,1862,1864,1865,1868],{},[22,1859,1860],{},"3 + 3"," が合計で ",[22,1863,1226],{}," なので、サムネ + キャプションのペアは正確にページ左半分に収まります。12 は 2 / 3 / 4 / 6 で割り切れるので、ネスト構造はほぼ常にフラットに展開できます。",[22,1866,1867],{},"Col(8) > Row > Col(7) + Col(5)"," のような展開しにくい数字を選んでいたなら、それは実際の紙の上でも意味のある比率ではないはず。展開できるフラット版を選びましょう。",[14,1870,1871],{"id":1871},"なぜネストしないのか",[18,1873,1874,1875,1878,1879,1882,1883,1886],{},"フラットグリッドは幅を 1 パスで解決できます。Row は (ページ幅 − マージン) のパーセンテージ、各 ",[22,1876,1877],{},"Col(span)"," はその ",[22,1880,1881],{},"span / 12","。これだけ。再帰なし、幅 of 幅 of 幅 なし、レイアウトエンジンに親コンテキストを引き回す必要なし。",[22,1884,1885],{},"grid.go"," でカラム幅を計算している行は文字通り 1 行です:",[109,1888,1890],{"className":111,"code":1889,"language":113,"meta":114,"style":114},"Width: document.Pct(float64(col.span) / float64(gridColumns) * 100),\n",[22,1891,1892],{"__ignoreMap":114},[118,1893,1894,1897,1900,1902,1904,1907,1909,1912,1914,1917,1919,1921,1923,1926,1929,1931,1934,1936,1938,1941],{"class":120,"line":121},[118,1895,1896],{"class":561},"Width",[118,1898,1899],{"class":124},":",[118,1901,399],{"class":561},[118,1903,402],{"class":124},[118,1905,1906],{"class":144},"Pct",[118,1908,148],{"class":124},[118,1910,1911],{"class":154},"float64",[118,1913,148],{"class":124},[118,1915,1916],{"class":561},"col",[118,1918,402],{"class":124},[118,1920,118],{"class":561},[118,1922,141],{"class":124},[118,1924,1925],{"class":124}," /",[118,1927,1928],{"class":154}," float64",[118,1930,148],{"class":124},[118,1932,1933],{"class":561},"gridColumns",[118,1935,141],{"class":124},[118,1937,242],{"class":124},[118,1939,1940],{"class":633}," 100",[118,1942,600],{"class":124},[18,1944,1945,1946,1949,1950,1949,1953,1621,1956,1958],{},"ネストを許すと、この 1 行が木の探索になります。",[22,1947,1948],{},"Col(12)"," の中の ",[22,1951,1952],{},"Col(8)",[22,1954,1955],{},"Col(6)",[22,1957,1226],{}," は親カラムの 50% なのか、Row の 50% なのか、ページの 50% なのか — その判断が必要になる。Bootstrap は「親の 50%」を選び、それを耐えうるものにするためにブレイクポイントとガター (gutter) を入れました。PDF にはブレイクポイントがありません。流動コンテナもありません。ネストの構文を借りると、解決すべきでない 3 つの問題を、必要のない構文糖と引き換えに抱え込むことになります。",[14,1960,1962],{"id":1961},"でも構文の局所性が欲しい","「でも構文の局所性が欲しい」",[18,1964,1965,1966,1968],{},"分かります。フラットにする欠点は、概念的に一緒の 2 つの ",[22,1967,89],{}," が編集を重ねるうちにソース上で離れていくこと。これはヘルパー関数で詰められます:",[109,1970,1972],{"className":111,"code":1971,"language":113,"meta":114,"style":114},"func card(page *template.PageBuilder, title, body string) {\n    page.AutoRow(func(r *template.RowBuilder) {\n        r.Col(12, func(c *template.ColBuilder) {\n            c.Text(title, template.Bold())\n        })\n    })\n    page.AutoRow(func(r *template.RowBuilder) {\n        r.Col(12, func(c *template.ColBuilder) {\n            c.Text(body)\n        })\n    })\n}\n",[22,1973,1974,2009,2033,2064,2087,2091,2095,2119,2149,2164,2168,2172],{"__ignoreMap":114},[118,1975,1976,1978,1981,1983,1985,1987,1989,1991,1993,1995,1998,2000,2003,2005,2007],{"class":120,"line":121},[118,1977,125],{"class":124},[118,1979,1980],{"class":144}," card",[118,1982,148],{"class":124},[118,1984,1192],{"class":131},[118,1986,242],{"class":124},[118,1988,741],{"class":138},[118,1990,402],{"class":124},[118,1992,93],{"class":138},[118,1994,158],{"class":124},[118,1996,1997],{"class":131}," title",[118,1999,158],{"class":124},[118,2001,2002],{"class":131}," body",[118,2004,155],{"class":154},[118,2006,141],{"class":124},[118,2008,555],{"class":124},[118,2010,2011,2013,2015,2017,2019,2021,2023,2025,2027,2029,2031],{"class":120,"line":173},[118,2012,726],{"class":561},[118,2014,402],{"class":124},[118,2016,89],{"class":144},[118,2018,733],{"class":124},[118,2020,736],{"class":131},[118,2022,242],{"class":124},[118,2024,741],{"class":138},[118,2026,402],{"class":124},[118,2028,746],{"class":138},[118,2030,141],{"class":124},[118,2032,555],{"class":124},[118,2034,2035,2037,2039,2041,2043,2046,2048,2050,2052,2054,2056,2058,2060,2062],{"class":120,"line":213},[118,2036,756],{"class":561},[118,2038,402],{"class":124},[118,2040,425],{"class":144},[118,2042,148],{"class":124},[118,2044,2045],{"class":633},"12",[118,2047,158],{"class":124},[118,2049,236],{"class":124},[118,2051,239],{"class":131},[118,2053,242],{"class":124},[118,2055,741],{"class":138},[118,2057,402],{"class":124},[118,2059,62],{"class":138},[118,2061,141],{"class":124},[118,2063,555],{"class":124},[118,2065,2066,2068,2070,2072,2074,2077,2079,2081,2083,2085],{"class":120,"line":259},[118,2067,789],{"class":561},[118,2069,402],{"class":124},[118,2071,66],{"class":144},[118,2073,148],{"class":124},[118,2075,2076],{"class":561},"title",[118,2078,158],{"class":124},[118,2080,809],{"class":561},[118,2082,402],{"class":124},[118,2084,828],{"class":144},[118,2086,831],{"class":124},[118,2088,2089],{"class":120,"line":308},[118,2090,837],{"class":124},[118,2092,2093],{"class":120,"line":338},[118,2094,900],{"class":124},[118,2096,2097,2099,2101,2103,2105,2107,2109,2111,2113,2115,2117],{"class":120,"line":376},[118,2098,726],{"class":561},[118,2100,402],{"class":124},[118,2102,89],{"class":144},[118,2104,733],{"class":124},[118,2106,736],{"class":131},[118,2108,242],{"class":124},[118,2110,741],{"class":138},[118,2112,402],{"class":124},[118,2114,746],{"class":138},[118,2116,141],{"class":124},[118,2118,555],{"class":124},[118,2120,2121,2123,2125,2127,2129,2131,2133,2135,2137,2139,2141,2143,2145,2147],{"class":120,"line":410},[118,2122,756],{"class":561},[118,2124,402],{"class":124},[118,2126,425],{"class":144},[118,2128,148],{"class":124},[118,2130,2045],{"class":633},[118,2132,158],{"class":124},[118,2134,236],{"class":124},[118,2136,239],{"class":131},[118,2138,242],{"class":124},[118,2140,741],{"class":138},[118,2142,402],{"class":124},[118,2144,62],{"class":138},[118,2146,141],{"class":124},[118,2148,555],{"class":124},[118,2150,2151,2153,2155,2157,2159,2162],{"class":120,"line":524},[118,2152,789],{"class":561},[118,2154,402],{"class":124},[118,2156,66],{"class":144},[118,2158,148],{"class":124},[118,2160,2161],{"class":561},"body",[118,2163,170],{"class":124},[118,2165,2166],{"class":120,"line":534},[118,2167,837],{"class":124},[118,2169,2170],{"class":120,"line":539},[118,2171,900],{"class":124},[118,2173,2174],{"class":120,"line":544},[118,2175,1153],{"class":124},[18,2177,2178,2179,2182],{},"局所性はあなたの関数の中にあって、API の中にはない。gpdf が ",[22,2180,2181],{},"card"," を同梱しないのは、3 行で書ける上にあなたのドキュメントに合わせて書いた版の方が、私たちが用意する版より絶対に良いからです。",[14,2184,2185],{"id":2185},"関連レシピ",[2187,2188,2189,2197,2204],"ul",{},[2190,2191,2192,2196],"li",{},[34,2193,2195],{"href":2194},"/ja/blog/12-column-grid","12 カラムグリッドの動き方"," — グリッド本体の詳しい説明",[2190,2198,2199,2203],{},[34,2200,2202],{"href":2201},"/ja/blog/invoice-pdf-go-under-50-lines","請求書 PDF を Go で 50 行以内に作る"," — フラットグリッドでドキュメント 1 枚を組む例",[2190,2205,2206,2211],{},[34,2207,2210],{"href":2208,"rel":2209},"https://gpdf.dev/docs/guide/layout",[38],"Layout guide"," — Row / Col / Box のリファレンス",[14,2213,2215],{"id":2214},"gpdf-を試す","gpdf を試す",[18,2217,2218],{},"gpdf は Go の PDF 生成ライブラリ。MIT、外部依存ゼロ、日本語ネイティブ対応。",[109,2220,2224],{"className":2221,"code":2222,"language":2223,"meta":114,"style":114},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","go get github.com/gpdf-dev/gpdf\n","bash",[22,2225,2226],{"__ignoreMap":114},[118,2227,2228,2230,2233],{"class":120,"line":121},[118,2229,113],{"class":138},[118,2231,2232],{"class":801}," get",[118,2234,2235],{"class":801}," github.com/gpdf-dev/gpdf\n",[18,2237,2238,2242,2243],{},[34,2239,2241],{"href":36,"rel":2240},[38],"⭐ GitHub で Star"," · ",[34,2244,2247],{"href":2245,"rel":2246},"https://gpdf.dev/ja/docs/quickstart",[38],"ドキュメントを読む",[2249,2250,2251],"style",{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}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 .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}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 .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);}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 .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 .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}",{"title":114,"searchDepth":173,"depth":173,"links":2253},[2254,2255,2256,2257,2258,2260,2261,2262,2263,2264],{"id":16,"depth":173,"text":16},{"id":51,"depth":173,"text":51},{"id":97,"depth":173,"text":98},{"id":447,"depth":173,"text":448},{"id":1172,"depth":173,"text":2259},"イディオム 2 — グルーピングは c.Box",{"id":1627,"depth":173,"text":1628},{"id":1871,"depth":173,"text":1871},{"id":1961,"depth":173,"text":1962},{"id":2185,"depth":173,"text":2185},{"id":2214,"depth":173,"text":2215},"できません。gpdf の ColBuilder に Row メソッドはなく、12 カラムグリッドは意図的にフラットです。代わりに使う 3 つのイディオムを示します。",false,"md",{"name":2269,"totalTime":2270,"tools":2271,"steps":2273},"gpdf でネスト Row 構造をフラットグリッドのイディオムに置き換える","PT10M",[2272,510],"Go 1.22+",[2274,2277,2280,2283,2286],{"name":2275,"text":2276},"c.Row を諦める","ColBuilder には Row も AutoRow もありません。page.AutoRow と page.Row は PageBuilder のメソッドだけです。エディタの補完に c.Row が出ないのは import 漏れではなく API の答えです。",{"name":2278,"text":2279},"本当に欲しかったものを切り分ける","3 パターンでほぼ網羅できます。(1) カラム境界を共有する 2 行 — サブレイアウト。(2) カード内の見出し + 本文 — 視覚的グルーピング。(3) 1 つの Col の中の 2×2 — サブグリッド。",{"name":2281,"text":2282},"サブレイアウトなら兄弟 AutoRow を並べる","同じ Col スパンを持つ page.AutoRow を 2 つ並べると、行幅が同じなので列が自然に揃います。Row は元々独立した単位なので、フラット化で失うものはありません。",{"name":2284,"text":2285},"グルーピングなら c.Box を使う","c.Box(fn, WithBoxBorder, WithBoxBackground, WithBoxPadding) はスタイル付きコンテナで内側のスタックを包みます。サブグリッドではなく、Text / Image / Table を縦積みできるだけですが、ネスト Row の 8 割はこれで足ります。",{"name":2287,"text":2288},"本当にサブグリッドなら 12 カラムを細かく刻む","Col(6) の中に 6+6 を入れる代わりに、最初から 3+3+6 と書きます。12 は 2/3/4/6 で割り切れるので、ほとんどのネスト構造はフラットな 1 行に綺麗に展開できます。",null,{},"/ja/blog/nest-row-in-col",{"title":5,"description":2265},"ja/blog/025.nest-row-in-col",[2295,2296,2297],"recipe","tutorial","templates","nEKflaRZ6hk4BihLZtfk6un27yKj8VxlLVP-mQ-ipYs",1779199019567]