[{"data":1,"prerenderedAt":1546},["ShallowReactive",2],{"blog-ko-12-column-grid":3},{"id":4,"title":5,"author":6,"body":9,"date":615,"description":1512,"draft":1513,"extension":1514,"howTo":1515,"image":1536,"meta":1537,"navigation":80,"path":1538,"seo":1539,"stem":1540,"tags":1541,"updated":1536,"__hash__":1545},"blogKo/ko/blog/005.12-column-grid.md","gpdf의 12 컬럼 그리드는 어떻게 동작하나요?",{"name":7,"url":8},"gpdf team","https://gpdf.dev",{"type":10,"value":11,"toc":1500},"minimark",[12,17,30,34,49,53,1134,1140,1144,1150,1154,1173,1187,1191,1194,1210,1224,1228,1234,1240,1399,1403,1409,1420,1423,1429,1433,1459,1463,1466,1483,1496],[13,14,16],"h2",{"id":15},"질문을-다시-말하면","질문을 다시 말하면",[18,19,20,21,25,26,29],"p",{},"gpdf API를 보면 — 페이지 빌더, 로우 빌더, 컬럼 빌더 — 컬럼 생성자가 숫자를 받습니다: ",[22,23,24],"code",{},"r.Col(4, fn)",", ",[22,27,28],{},"r.Col(8, fn)",". 이 숫자는 무엇이고, 합이 12가 안 되면 어떻게 되며, CSS에서 익숙한 그리드와는 어떻게 다른가?",[13,31,33],{"id":32},"짧은-답","짧은 답",[18,35,36,39,40,43,44,48],{},[22,37,38],{},"r.Col(span, fn)","은 1부터 12까지의 정수를 받습니다. 이 정수가 행 너비에서 해당 컬럼이 차지하는 비율 — ",[22,41,42],{},"span / 12",". 1 미만은 1로, 12 초과는 12로 클램프되고, ",[45,46,47],"strong",{},"행별 합계를 12로 맞출지 여부를 라이브러리는 강제하지 않습니다",". 그리드는 12 분할로 고정되어 있을 뿐, 나머지는 행을 어떻게 자를지에 대한 선택입니다.",[13,50,52],{"id":51},"동작하는-예제","동작하는 예제",[54,55,60],"pre",{"className":56,"code":57,"language":58,"meta":59,"style":59},"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(\"Acme 주식회사\")\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","",[22,61,62,75,82,92,104,114,119,129,139,149,155,160,176,198,223,260,266,271,290,295,302,336,374,424,430,436,441,447,472,504,524,544,549,580,600,620,625,630,635,641,666,698,718,723,754,774,779,810,830,835,840,845,851,876,908,928,933,964,984,989,994,999,1021,1037,1055,1061,1108,1123,1128],{"__ignoreMap":59},[63,64,67,71],"span",{"class":65,"line":66},"line",1,[63,68,70],{"class":69},"sMK4o","package",[63,72,74],{"class":73},"sBMFI"," main\n",[63,76,78],{"class":65,"line":77},2,[63,79,81],{"emptyLinePlaceholder":80},true,"\n",[63,83,85,89],{"class":65,"line":84},3,[63,86,88],{"class":87},"s7zQu","import",[63,90,91],{"class":69}," (\n",[63,93,95,98,101],{"class":65,"line":94},4,[63,96,97],{"class":69},"    \"",[63,99,100],{"class":73},"log",[63,102,103],{"class":69},"\"\n",[63,105,107,109,112],{"class":65,"line":106},5,[63,108,97],{"class":69},[63,110,111],{"class":73},"os",[63,113,103],{"class":69},[63,115,117],{"class":65,"line":116},6,[63,118,81],{"emptyLinePlaceholder":80},[63,120,122,124,127],{"class":65,"line":121},7,[63,123,97],{"class":69},[63,125,126],{"class":73},"github.com/gpdf-dev/gpdf",[63,128,103],{"class":69},[63,130,132,134,137],{"class":65,"line":131},8,[63,133,97],{"class":69},[63,135,136],{"class":73},"github.com/gpdf-dev/gpdf/document",[63,138,103],{"class":69},[63,140,142,144,147],{"class":65,"line":141},9,[63,143,97],{"class":69},[63,145,146],{"class":73},"github.com/gpdf-dev/gpdf/template",[63,148,103],{"class":69},[63,150,152],{"class":65,"line":151},10,[63,153,154],{"class":69},")\n",[63,156,158],{"class":65,"line":157},11,[63,159,81],{"emptyLinePlaceholder":80},[63,161,163,166,170,173],{"class":65,"line":162},12,[63,164,165],{"class":69},"func",[63,167,169],{"class":168},"s2Zo4"," main",[63,171,172],{"class":69},"()",[63,174,175],{"class":69}," {\n",[63,177,179,183,186,189,192,195],{"class":65,"line":178},13,[63,180,182],{"class":181},"sTEyZ","    doc ",[63,184,185],{"class":69},":=",[63,187,188],{"class":181}," gpdf",[63,190,191],{"class":69},".",[63,193,194],{"class":168},"NewDocument",[63,196,197],{"class":69},"(\n",[63,199,201,204,206,209,212,215,217,220],{"class":65,"line":200},14,[63,202,203],{"class":181},"        gpdf",[63,205,191],{"class":69},[63,207,208],{"class":168},"WithPageSize",[63,210,211],{"class":69},"(",[63,213,214],{"class":181},"document",[63,216,191],{"class":69},[63,218,219],{"class":181},"A4",[63,221,222],{"class":69},"),\n",[63,224,226,228,230,233,235,237,239,242,244,246,248,251,253,257],{"class":65,"line":225},15,[63,227,203],{"class":181},[63,229,191],{"class":69},[63,231,232],{"class":168},"WithMargins",[63,234,211],{"class":69},[63,236,214],{"class":181},[63,238,191],{"class":69},[63,240,241],{"class":168},"UniformEdges",[63,243,211],{"class":69},[63,245,214],{"class":181},[63,247,191],{"class":69},[63,249,250],{"class":168},"Mm",[63,252,211],{"class":69},[63,254,256],{"class":255},"sbssI","15",[63,258,259],{"class":69},"))),\n",[63,261,263],{"class":65,"line":262},16,[63,264,265],{"class":69},"    )\n",[63,267,269],{"class":65,"line":268},17,[63,270,81],{"emptyLinePlaceholder":80},[63,272,274,277,279,282,284,287],{"class":65,"line":273},18,[63,275,276],{"class":181},"    page ",[63,278,185],{"class":69},[63,280,281],{"class":181}," doc",[63,283,191],{"class":69},[63,285,286],{"class":168},"AddPage",[63,288,289],{"class":69},"()\n",[63,291,293],{"class":65,"line":292},19,[63,294,81],{"emptyLinePlaceholder":80},[63,296,298],{"class":65,"line":297},20,[63,299,301],{"class":300},"sHwdD","    // 전체 너비\n",[63,303,305,308,310,313,316,320,323,326,328,331,334],{"class":65,"line":304},21,[63,306,307],{"class":181},"    page",[63,309,191],{"class":69},[63,311,312],{"class":168},"AutoRow",[63,314,315],{"class":69},"(func(",[63,317,319],{"class":318},"sHdIc","r",[63,321,322],{"class":69}," *",[63,324,325],{"class":73},"template",[63,327,191],{"class":69},[63,329,330],{"class":73},"RowBuilder",[63,332,333],{"class":69},")",[63,335,175],{"class":69},[63,337,339,342,344,347,349,352,355,358,361,363,365,367,370,372],{"class":65,"line":338},22,[63,340,341],{"class":181},"        r",[63,343,191],{"class":69},[63,345,346],{"class":168},"Col",[63,348,211],{"class":69},[63,350,351],{"class":255},"12",[63,353,354],{"class":69},",",[63,356,357],{"class":69}," func(",[63,359,360],{"class":318},"c",[63,362,322],{"class":69},[63,364,325],{"class":73},[63,366,191],{"class":69},[63,368,369],{"class":73},"ColBuilder",[63,371,333],{"class":69},[63,373,175],{"class":69},[63,375,377,380,382,385,387,390,394,396,398,401,403,406,408,411,414,416,418,421],{"class":65,"line":376},23,[63,378,379],{"class":181},"            c",[63,381,191],{"class":69},[63,383,384],{"class":168},"Text",[63,386,211],{"class":69},[63,388,389],{"class":69},"\"",[63,391,393],{"class":392},"sfazB","세금계산서 #2026-0416",[63,395,389],{"class":69},[63,397,354],{"class":69},[63,399,400],{"class":181}," template",[63,402,191],{"class":69},[63,404,405],{"class":168},"FontSize",[63,407,211],{"class":69},[63,409,410],{"class":255},"18",[63,412,413],{"class":69},"),",[63,415,400],{"class":181},[63,417,191],{"class":69},[63,419,420],{"class":168},"Bold",[63,422,423],{"class":69},"())\n",[63,425,427],{"class":65,"line":426},24,[63,428,429],{"class":69},"        })\n",[63,431,433],{"class":65,"line":432},25,[63,434,435],{"class":69},"    })\n",[63,437,439],{"class":65,"line":438},26,[63,440,81],{"emptyLinePlaceholder":80},[63,442,444],{"class":65,"line":443},27,[63,445,446],{"class":300},"    // 2 컬럼 헤더 (6 + 6)\n",[63,448,450,452,454,456,458,460,462,464,466,468,470],{"class":65,"line":449},28,[63,451,307],{"class":181},[63,453,191],{"class":69},[63,455,312],{"class":168},[63,457,315],{"class":69},[63,459,319],{"class":318},[63,461,322],{"class":69},[63,463,325],{"class":73},[63,465,191],{"class":69},[63,467,330],{"class":73},[63,469,333],{"class":69},[63,471,175],{"class":69},[63,473,475,477,479,481,483,486,488,490,492,494,496,498,500,502],{"class":65,"line":474},29,[63,476,341],{"class":181},[63,478,191],{"class":69},[63,480,346],{"class":168},[63,482,211],{"class":69},[63,484,485],{"class":255},"6",[63,487,354],{"class":69},[63,489,357],{"class":69},[63,491,360],{"class":318},[63,493,322],{"class":69},[63,495,325],{"class":73},[63,497,191],{"class":69},[63,499,369],{"class":73},[63,501,333],{"class":69},[63,503,175],{"class":69},[63,505,507,509,511,513,515,517,520,522],{"class":65,"line":506},30,[63,508,379],{"class":181},[63,510,191],{"class":69},[63,512,384],{"class":168},[63,514,211],{"class":69},[63,516,389],{"class":69},[63,518,519],{"class":392},"공급받는자",[63,521,389],{"class":69},[63,523,154],{"class":69},[63,525,527,529,531,533,535,537,540,542],{"class":65,"line":526},31,[63,528,379],{"class":181},[63,530,191],{"class":69},[63,532,384],{"class":168},[63,534,211],{"class":69},[63,536,389],{"class":69},[63,538,539],{"class":392},"Acme 주식회사",[63,541,389],{"class":69},[63,543,154],{"class":69},[63,545,547],{"class":65,"line":546},32,[63,548,429],{"class":69},[63,550,552,554,556,558,560,562,564,566,568,570,572,574,576,578],{"class":65,"line":551},33,[63,553,341],{"class":181},[63,555,191],{"class":69},[63,557,346],{"class":168},[63,559,211],{"class":69},[63,561,485],{"class":255},[63,563,354],{"class":69},[63,565,357],{"class":69},[63,567,360],{"class":318},[63,569,322],{"class":69},[63,571,325],{"class":73},[63,573,191],{"class":69},[63,575,369],{"class":73},[63,577,333],{"class":69},[63,579,175],{"class":69},[63,581,583,585,587,589,591,593,596,598],{"class":65,"line":582},34,[63,584,379],{"class":181},[63,586,191],{"class":69},[63,588,384],{"class":168},[63,590,211],{"class":69},[63,592,389],{"class":69},[63,594,595],{"class":392},"발행일",[63,597,389],{"class":69},[63,599,154],{"class":69},[63,601,603,605,607,609,611,613,616,618],{"class":65,"line":602},35,[63,604,379],{"class":181},[63,606,191],{"class":69},[63,608,384],{"class":168},[63,610,211],{"class":69},[63,612,389],{"class":69},[63,614,615],{"class":392},"2026-04-16",[63,617,389],{"class":69},[63,619,154],{"class":69},[63,621,623],{"class":65,"line":622},36,[63,624,429],{"class":69},[63,626,628],{"class":65,"line":627},37,[63,629,435],{"class":69},[63,631,633],{"class":65,"line":632},38,[63,634,81],{"emptyLinePlaceholder":80},[63,636,638],{"class":65,"line":637},39,[63,639,640],{"class":300},"    // 3 컬럼 요약 (4 + 4 + 4)\n",[63,642,644,646,648,650,652,654,656,658,660,662,664],{"class":65,"line":643},40,[63,645,307],{"class":181},[63,647,191],{"class":69},[63,649,312],{"class":168},[63,651,315],{"class":69},[63,653,319],{"class":318},[63,655,322],{"class":69},[63,657,325],{"class":73},[63,659,191],{"class":69},[63,661,330],{"class":73},[63,663,333],{"class":69},[63,665,175],{"class":69},[63,667,669,671,673,675,677,680,682,684,686,688,690,692,694,696],{"class":65,"line":668},41,[63,670,341],{"class":181},[63,672,191],{"class":69},[63,674,346],{"class":168},[63,676,211],{"class":69},[63,678,679],{"class":255},"4",[63,681,354],{"class":69},[63,683,357],{"class":69},[63,685,360],{"class":318},[63,687,322],{"class":69},[63,689,325],{"class":73},[63,691,191],{"class":69},[63,693,369],{"class":73},[63,695,333],{"class":69},[63,697,175],{"class":69},[63,699,701,703,705,707,709,711,714,716],{"class":65,"line":700},42,[63,702,379],{"class":181},[63,704,191],{"class":69},[63,706,384],{"class":168},[63,708,211],{"class":69},[63,710,389],{"class":69},[63,712,713],{"class":392},"소계",[63,715,389],{"class":69},[63,717,154],{"class":69},[63,719,721],{"class":65,"line":720},43,[63,722,429],{"class":69},[63,724,726,728,730,732,734,736,738,740,742,744,746,748,750,752],{"class":65,"line":725},44,[63,727,341],{"class":181},[63,729,191],{"class":69},[63,731,346],{"class":168},[63,733,211],{"class":69},[63,735,679],{"class":255},[63,737,354],{"class":69},[63,739,357],{"class":69},[63,741,360],{"class":318},[63,743,322],{"class":69},[63,745,325],{"class":73},[63,747,191],{"class":69},[63,749,369],{"class":73},[63,751,333],{"class":69},[63,753,175],{"class":69},[63,755,757,759,761,763,765,767,770,772],{"class":65,"line":756},45,[63,758,379],{"class":181},[63,760,191],{"class":69},[63,762,384],{"class":168},[63,764,211],{"class":69},[63,766,389],{"class":69},[63,768,769],{"class":392},"부가세",[63,771,389],{"class":69},[63,773,154],{"class":69},[63,775,777],{"class":65,"line":776},46,[63,778,429],{"class":69},[63,780,782,784,786,788,790,792,794,796,798,800,802,804,806,808],{"class":65,"line":781},47,[63,783,341],{"class":181},[63,785,191],{"class":69},[63,787,346],{"class":168},[63,789,211],{"class":69},[63,791,679],{"class":255},[63,793,354],{"class":69},[63,795,357],{"class":69},[63,797,360],{"class":318},[63,799,322],{"class":69},[63,801,325],{"class":73},[63,803,191],{"class":69},[63,805,369],{"class":73},[63,807,333],{"class":69},[63,809,175],{"class":69},[63,811,813,815,817,819,821,823,826,828],{"class":65,"line":812},48,[63,814,379],{"class":181},[63,816,191],{"class":69},[63,818,384],{"class":168},[63,820,211],{"class":69},[63,822,389],{"class":69},[63,824,825],{"class":392},"합계",[63,827,389],{"class":69},[63,829,154],{"class":69},[63,831,833],{"class":65,"line":832},49,[63,834,429],{"class":69},[63,836,838],{"class":65,"line":837},50,[63,839,435],{"class":69},[63,841,843],{"class":65,"line":842},51,[63,844,81],{"emptyLinePlaceholder":80},[63,846,848],{"class":65,"line":847},52,[63,849,850],{"class":300},"    // 비대칭 (8 + 4) — 본문 + 사이드 패널\n",[63,852,854,856,858,860,862,864,866,868,870,872,874],{"class":65,"line":853},53,[63,855,307],{"class":181},[63,857,191],{"class":69},[63,859,312],{"class":168},[63,861,315],{"class":69},[63,863,319],{"class":318},[63,865,322],{"class":69},[63,867,325],{"class":73},[63,869,191],{"class":69},[63,871,330],{"class":73},[63,873,333],{"class":69},[63,875,175],{"class":69},[63,877,879,881,883,885,887,890,892,894,896,898,900,902,904,906],{"class":65,"line":878},54,[63,880,341],{"class":181},[63,882,191],{"class":69},[63,884,346],{"class":168},[63,886,211],{"class":69},[63,888,889],{"class":255},"8",[63,891,354],{"class":69},[63,893,357],{"class":69},[63,895,360],{"class":318},[63,897,322],{"class":69},[63,899,325],{"class":73},[63,901,191],{"class":69},[63,903,369],{"class":73},[63,905,333],{"class":69},[63,907,175],{"class":69},[63,909,911,913,915,917,919,921,924,926],{"class":65,"line":910},55,[63,912,379],{"class":181},[63,914,191],{"class":69},[63,916,384],{"class":168},[63,918,211],{"class":69},[63,920,389],{"class":69},[63,922,923],{"class":392},"품목은 여기에 나열됩니다",[63,925,389],{"class":69},[63,927,154],{"class":69},[63,929,931],{"class":65,"line":930},56,[63,932,429],{"class":69},[63,934,936,938,940,942,944,946,948,950,952,954,956,958,960,962],{"class":65,"line":935},57,[63,937,341],{"class":181},[63,939,191],{"class":69},[63,941,346],{"class":168},[63,943,211],{"class":69},[63,945,679],{"class":255},[63,947,354],{"class":69},[63,949,357],{"class":69},[63,951,360],{"class":318},[63,953,322],{"class":69},[63,955,325],{"class":73},[63,957,191],{"class":69},[63,959,369],{"class":73},[63,961,333],{"class":69},[63,963,175],{"class":69},[63,965,967,969,971,973,975,977,980,982],{"class":65,"line":966},58,[63,968,379],{"class":181},[63,970,191],{"class":69},[63,972,384],{"class":168},[63,974,211],{"class":69},[63,976,389],{"class":69},[63,978,979],{"class":392},"비고",[63,981,389],{"class":69},[63,983,154],{"class":69},[63,985,987],{"class":65,"line":986},59,[63,988,429],{"class":69},[63,990,992],{"class":65,"line":991},60,[63,993,435],{"class":69},[63,995,997],{"class":65,"line":996},61,[63,998,81],{"emptyLinePlaceholder":80},[63,1000,1002,1005,1007,1010,1012,1014,1016,1019],{"class":65,"line":1001},62,[63,1003,1004],{"class":181},"    data",[63,1006,354],{"class":69},[63,1008,1009],{"class":181}," err ",[63,1011,185],{"class":69},[63,1013,281],{"class":181},[63,1015,191],{"class":69},[63,1017,1018],{"class":168},"Generate",[63,1020,289],{"class":69},[63,1022,1024,1027,1029,1032,1035],{"class":65,"line":1023},63,[63,1025,1026],{"class":87},"    if",[63,1028,1009],{"class":181},[63,1030,1031],{"class":69},"!=",[63,1033,1034],{"class":69}," nil",[63,1036,175],{"class":69},[63,1038,1040,1043,1045,1048,1050,1053],{"class":65,"line":1039},64,[63,1041,1042],{"class":181},"        log",[63,1044,191],{"class":69},[63,1046,1047],{"class":168},"Fatal",[63,1049,211],{"class":69},[63,1051,1052],{"class":181},"err",[63,1054,154],{"class":69},[63,1056,1058],{"class":65,"line":1057},65,[63,1059,1060],{"class":69},"    }\n",[63,1062,1064,1066,1068,1070,1073,1075,1078,1080,1082,1085,1087,1089,1092,1094,1097,1100,1102,1104,1106],{"class":65,"line":1063},66,[63,1065,1026],{"class":87},[63,1067,1009],{"class":181},[63,1069,185],{"class":69},[63,1071,1072],{"class":181}," os",[63,1074,191],{"class":69},[63,1076,1077],{"class":168},"WriteFile",[63,1079,211],{"class":69},[63,1081,389],{"class":69},[63,1083,1084],{"class":392},"layout.pdf",[63,1086,389],{"class":69},[63,1088,354],{"class":69},[63,1090,1091],{"class":181}," data",[63,1093,354],{"class":69},[63,1095,1096],{"class":255}," 0o644",[63,1098,1099],{"class":69},");",[63,1101,1009],{"class":181},[63,1103,1031],{"class":69},[63,1105,1034],{"class":69},[63,1107,175],{"class":69},[63,1109,1111,1113,1115,1117,1119,1121],{"class":65,"line":1110},67,[63,1112,1042],{"class":181},[63,1114,191],{"class":69},[63,1116,1047],{"class":168},[63,1118,211],{"class":69},[63,1120,1052],{"class":181},[63,1122,154],{"class":69},[63,1124,1126],{"class":65,"line":1125},68,[63,1127,1060],{"class":69},[63,1129,1131],{"class":65,"line":1130},69,[63,1132,1133],{"class":69},"}\n",[18,1135,1136,1139],{},[22,1137,1138],{},"go run main.go","를 실행하면 서로 다르게 분할된 네 개의 행이 있는 한 페이지 PDF가 나옵니다.",[13,1141,1143],{"id":1142},"왜-12인가","왜 12인가",[18,1145,1146,1147,191],{},"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는 이 관용 표현을 의도적으로 가져왔습니다 — ",[45,1148,1149],{},"출력이 고정 너비의 종이라고 해서 레이아웃의 사고방식이 웹과 다를 이유는 없습니다",[13,1151,1153],{"id":1152},"계산을-구체적으로","계산을 구체적으로",[18,1155,1156,1157,1160,1161,1164,1165,1168,1169,1172],{},"A4 세로에 사면 15 mm 균일 여백이면 사용 가능한 너비는 180 mm. 행 안의 ",[22,1158,1159],{},"Col(4)","는 그중 4/12, 즉 60 mm. ",[22,1162,1163],{},"Col(8)","은 120 mm. 컬럼 사이 거터는 기본적으로 없습니다. 여백을 두고 싶다면 짧은 쪽 컬럼 안에 ",[22,1166,1167],{},"c.Spacer","를 넣거나, ",[22,1170,1171],{},"Col(1)","을 비워두세요.",[18,1174,1175,1176,1179,1180,1183,1184,191],{},"너비는 빌드 시점에 백분율로 계산되고 (구현은 ",[22,1177,1178],{},"gpdf/template/grid.go","), 레이아웃 엔진이 \"현재 페이지 너비에서 여백을 뺀 값\"을 기준으로 실제 포인트 값으로 해석합니다. 따라서 같은 ",[22,1181,1182],{},"r.Col(6, fn)","이라도 A4와 Letter에서 물리 너비는 다르지만 ",[45,1185,1186],{},"행에 대한 비율은 동일합니다",[13,1188,1190],{"id":1189},"합이-12가-아닐-때","합이 12가 아닐 때",[18,1192,1193],{},"gpdf는 span의 합을 검증하지 않습니다. 의도적인 선택입니다.",[1195,1196,1197,1204],"ul",{},[1198,1199,1200,1203],"li",{},[45,1201,1202],{},"합 \u003C 12",": 행 오른쪽이 빕니다. 왼쪽 끝에만 요소를 고정하고 나머지를 의도적으로 비워두고 싶을 때 유용합니다.",[1198,1205,1206,1209],{},[45,1207,1208],{},"합 > 12",": 마지막 컬럼이 오른쪽 여백을 넘어갑니다. 대개 버그입니다. PDF가 어긋나 보이지만 크래시는 나지 않습니다.",[18,1211,1212,1213,1216,1217,1220,1221,1223],{},"대부분의 레이아웃은 행당 정확히 12로 채워집니다. 그게 페이지를 꽉 채우는 방식이기 때문입니다. 다만 \"행 가운데에 폭 6짜리 블록만 두고 싶다\"면 ",[22,1214,1215],{},"Col(3)"," 빔, ",[22,1218,1219],{},"Col(6)"," 내용, ",[22,1222,1215],{}," 빔 — 이런 약식 표기가 가장 자연스럽습니다. 그리드는 이런 표현을 염두에 두고 설계되었습니다.",[13,1225,1227],{"id":1226},"autorow와-row의-차이","AutoRow와 Row의 차이",[18,1229,1230,1233],{},[22,1231,1232],{},"page.AutoRow(fn)","은 가장 키가 큰 컬럼에 맞춰 행 높이가 늘어납니다. 대부분의 행은 이걸 쓰면 됩니다.",[18,1235,1236,1239],{},[22,1237,1238],{},"page.Row(height, fn)","은 높이를 고정합니다. 높이를 넘는 콘텐츠는 잘립니다. 후공정의 스테이플 위치를 맞추기 위해 헤더를 반드시 30 mm로 유지해야 하는 경우처럼 \"시각적 일관성 > 콘텐츠 자유도\"인 상황에서 씁니다.",[54,1241,1243],{"className":56,"code":1242,"language":58,"meta":59,"style":59},"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",[22,1244,1245,1286,1317,1337,1341,1371,1390,1394],{"__ignoreMap":59},[63,1246,1247,1250,1252,1255,1257,1259,1261,1263,1265,1268,1270,1272,1274,1276,1278,1280,1282,1284],{"class":65,"line":66},[63,1248,1249],{"class":181},"page",[63,1251,191],{"class":69},[63,1253,1254],{"class":168},"Row",[63,1256,211],{"class":69},[63,1258,214],{"class":181},[63,1260,191],{"class":69},[63,1262,250],{"class":168},[63,1264,211],{"class":69},[63,1266,1267],{"class":255},"30",[63,1269,413],{"class":69},[63,1271,357],{"class":69},[63,1273,319],{"class":318},[63,1275,322],{"class":69},[63,1277,325],{"class":73},[63,1279,191],{"class":69},[63,1281,330],{"class":73},[63,1283,333],{"class":69},[63,1285,175],{"class":69},[63,1287,1288,1291,1293,1295,1297,1299,1301,1303,1305,1307,1309,1311,1313,1315],{"class":65,"line":77},[63,1289,1290],{"class":181},"    r",[63,1292,191],{"class":69},[63,1294,346],{"class":168},[63,1296,211],{"class":69},[63,1298,889],{"class":255},[63,1300,354],{"class":69},[63,1302,357],{"class":69},[63,1304,360],{"class":318},[63,1306,322],{"class":69},[63,1308,325],{"class":73},[63,1310,191],{"class":69},[63,1312,369],{"class":73},[63,1314,333],{"class":69},[63,1316,175],{"class":69},[63,1318,1319,1322,1324,1326,1328,1330,1333,1335],{"class":65,"line":84},[63,1320,1321],{"class":181},"        c",[63,1323,191],{"class":69},[63,1325,384],{"class":168},[63,1327,211],{"class":69},[63,1329,389],{"class":69},[63,1331,1332],{"class":392},"로고",[63,1334,389],{"class":69},[63,1336,154],{"class":69},[63,1338,1339],{"class":65,"line":94},[63,1340,435],{"class":69},[63,1342,1343,1345,1347,1349,1351,1353,1355,1357,1359,1361,1363,1365,1367,1369],{"class":65,"line":106},[63,1344,1290],{"class":181},[63,1346,191],{"class":69},[63,1348,346],{"class":168},[63,1350,211],{"class":69},[63,1352,679],{"class":255},[63,1354,354],{"class":69},[63,1356,357],{"class":69},[63,1358,360],{"class":318},[63,1360,322],{"class":69},[63,1362,325],{"class":73},[63,1364,191],{"class":69},[63,1366,369],{"class":73},[63,1368,333],{"class":69},[63,1370,175],{"class":69},[63,1372,1373,1375,1377,1379,1381,1383,1386,1388],{"class":65,"line":116},[63,1374,1321],{"class":181},[63,1376,191],{"class":69},[63,1378,384],{"class":168},[63,1380,211],{"class":69},[63,1382,389],{"class":69},[63,1384,1385],{"class":392},"세금계산서 번호",[63,1387,389],{"class":69},[63,1389,154],{"class":69},[63,1391,1392],{"class":65,"line":121},[63,1393,435],{"class":69},[63,1395,1396],{"class":65,"line":131},[63,1397,1398],{"class":69},"})\n",[13,1400,1402],{"id":1401},"그리드가-하지-않는-것","그리드가 하지 않는 것",[18,1404,1405,1406,1408],{},"중첩 불가. ",[22,1407,369],{},"는 콘텐츠 요소 (Text / Image / Table / List / Spacer)를 받지만, 안에 또 다른 행을 넣을 수는 없습니다. 중첩이 필요해 보이는 구조는 보통 페이지 레벨에서 두 형제 행으로 나누는 편이 더 깔끔합니다.",[18,1410,1411,1412,1415,1416,1419],{},"오프셋 컬럼 없음. Bootstrap의 ",[22,1413,1414],{},".offset-2","에 대응하는 기능은 없습니다. 오른쪽으로 밀고 싶다면 왼쪽에 빈 ",[22,1417,1418],{},"Col(n)","을 두세요.",[18,1421,1422],{},"브레이크포인트 없음. PDF 페이지는 리사이즈되지 않습니다. 어떤 기기에서 열든 동일한 레이아웃 — 출력이 재배치되는 DOM이 아니라 고정 좌표의 래스터이기 때문입니다.",[18,1424,1425,1428],{},[45,1426,1427],{},"이 \"없음\"들이 설계의 핵심입니다",". 그리드가 갖지 않는 기능 하나당, PDF 결과를 읽을 때 추론해야 할 모호성이 하나씩 줄어듭니다.",[13,1430,1432],{"id":1431},"관련-글","관련 글",[1195,1434,1435,1443,1450],{},[1198,1436,1437,1442],{},[1438,1439,1441],"a",{"href":1440},"/ko/blog/embed-japanese-font","gpdf에 일본어 폰트를 임베드하려면?"," — 그리드 컬럼 안에서 CJK 다루기",[1198,1444,1445,1449],{},[1438,1446,1448],{"href":1447},"/ko/blog/go-pdf-library-showdown-2026","Go PDF 라이브러리 비교 2026"," — Builder API와 gofpdf / gopdf / Maroto 비교",[1198,1451,1452,1458],{},[1438,1453,1457],{"href":1454,"rel":1455},"https://gpdf.dev/ko/docs/guide/layout",[1456],"nofollow","레이아웃 가이드"," — 행, 컬럼, 간격의 전체 레퍼런스",[13,1460,1462],{"id":1461},"gpdf-써보기","gpdf 써보기",[18,1464,1465],{},"gpdf는 Go PDF 생성 라이브러리입니다. MIT 라이선스, 외부 의존성 0, 네이티브 CJK 지원.",[54,1467,1471],{"className":1468,"code":1469,"language":1470,"meta":59,"style":59},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","go get github.com/gpdf-dev/gpdf\n","bash",[22,1472,1473],{"__ignoreMap":59},[63,1474,1475,1477,1480],{"class":65,"line":66},[63,1476,58],{"class":73},[63,1478,1479],{"class":392}," get",[63,1481,1482],{"class":392}," github.com/gpdf-dev/gpdf\n",[18,1484,1485,1490,1491],{},[1438,1486,1489],{"href":1487,"rel":1488},"https://github.com/gpdf-dev/gpdf",[1456],"⭐ GitHub에서 별 누르기"," · ",[1438,1492,1495],{"href":1493,"rel":1494},"https://gpdf.dev/ko/docs/quickstart",[1456],"문서 읽기",[1497,1498,1499],"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":59,"searchDepth":77,"depth":77,"links":1501},[1502,1503,1504,1505,1506,1507,1508,1509,1510,1511],{"id":15,"depth":77,"text":16},{"id":32,"depth":77,"text":33},{"id":51,"depth":77,"text":52},{"id":1142,"depth":77,"text":1143},{"id":1152,"depth":77,"text":1153},{"id":1189,"depth":77,"text":1190},{"id":1226,"depth":77,"text":1227},{"id":1401,"depth":77,"text":1402},{"id":1431,"depth":77,"text":1432},{"id":1461,"depth":77,"text":1462},"gpdf의 12 컬럼 그리드는 r.Col(span, fn)에 1–12 정수를 넘깁니다. 컬럼 너비는 span/12 비율, 거터도 브레이크포인트도 없는 PDF 전용 설계.",false,"md",{"name":1516,"totalTime":1517,"tools":1518,"steps":1520},"gpdf의 12 컬럼 그리드로 페이지 레이아웃 잡기","PT10M",[1519,126],"Go 1.22+",[1521,1524,1527,1530,1533],{"name":1522,"text":1523},"페이지에 행 열기","가장 키가 큰 컬럼에 맞춰 행 높이가 자동으로 늘어나길 원하면 page.AutoRow(fn)을, 높이를 고정하려면 page.Row(height, fn)을 호출합니다.",{"name":1525,"text":1526},"r.Col(span, fn)으로 컬럼 선언","행 안에서 컬럼 수만큼 r.Col(span, fn)을 호출합니다. span은 1~12 정수로, 해당 컬럼이 행 너비에서 차지하는 비율을 나타냅니다.",{"name":1528,"text":1529},"행당 span 합을 12 이하로 유지","합이 12 미만이면 오른쪽이 비고, 12를 초과하면 마지막 컬럼이 오른쪽 여백을 넘어갑니다 — 보통 버그 신호입니다.",{"name":1531,"text":1532},"컬럼 안에 콘텐츠 채우기","ColBuilder 콜백 안에서 c.Text, c.Image, c.Table, c.Spacer를 호출합니다. 추가한 순서대로 세로로 쌓입니다.",{"name":1534,"text":1535},"다음 행 시작","다음 시각적 행은 page.AutoRow를 다시 호출합니다. 행은 서로 독립적이어서 4+8 행 바로 밑에 3+3+3+3 행을 두어도 됩니다.",null,{},"/ko/blog/12-column-grid",{"title":5,"description":1512},"ko/blog/005.12-column-grid",[1542,1543,1544],"recipe","tutorial","templates","jV5hmGH71S2Zm14imSGwJ_DwbGJm7lp3L2qR0JsZpJc",1776529266611]