[{"data":1,"prerenderedAt":1548},["ShallowReactive",2],{"blog-pt-12-column-grid":3},{"id":4,"title":5,"author":6,"body":9,"date":615,"description":1514,"draft":1515,"extension":1516,"howTo":1517,"image":1538,"meta":1539,"navigation":80,"path":1540,"seo":1541,"stem":1542,"tags":1543,"updated":1538,"__hash__":1547},"blogPt/pt/blog/005.12-column-grid.md","Como funciona o grid de 12 colunas do gpdf?",{"name":7,"url":8},"gpdf team","https://gpdf.dev",{"type":10,"value":11,"toc":1502},"minimark",[12,17,30,34,49,53,1134,1141,1145,1152,1156,1175,1189,1193,1196,1212,1226,1230,1236,1242,1401,1405,1411,1422,1425,1431,1435,1461,1465,1468,1485,1498],[13,14,16],"h2",{"id":15},"a-pergunta-em-outras-palavras","A pergunta, em outras palavras",[18,19,20,21,25,26,29],"p",{},"Você já viu a API do gpdf — page builder, row builder, column builder — e o construtor da coluna recebe um número: ",[22,23,24],"code",{},"r.Col(4, fn)",", ",[22,27,28],{},"r.Col(8, fn)",". O que é esse número, o que acontece se os spans não somarem 12, e como isso se compara ao grid que você já conhece do CSS?",[13,31,33],{"id":32},"resposta-curta","Resposta curta",[18,35,36,39,40,43,44,48],{},[22,37,38],{},"r.Col(span, fn)"," recebe um inteiro de 1 a 12. Esse inteiro é a fatia da linha que a coluna ocupa — ",[22,41,42],{},"span / 12"," da largura disponível. Valores abaixo de 1 são fixados em 1, acima de 12 em 12, e ",[45,46,47],"strong",{},"a biblioteca não força que os spans somem 12 por linha",". O grid tem 12 divisões fixas; o resto é você decidindo como cortar cada linha.",[13,50,52],{"id":51},"um-exemplo-que-funciona","Um exemplo que funciona",[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    // Largura total\n    page.AutoRow(func(r *template.RowBuilder) {\n        r.Col(12, func(c *template.ColBuilder) {\n            c.Text(\"Nota Fiscal #2026-0416\", template.FontSize(18), template.Bold())\n        })\n    })\n\n    // Cabeçalho em duas colunas (6 + 6)\n    page.AutoRow(func(r *template.RowBuilder) {\n        r.Col(6, func(c *template.ColBuilder) {\n            c.Text(\"Destinatário\")\n            c.Text(\"Acme Ltda.\")\n        })\n        r.Col(6, func(c *template.ColBuilder) {\n            c.Text(\"Data de emissão\")\n            c.Text(\"2026-04-16\")\n        })\n    })\n\n    // Resumo em três colunas (4 + 4 + 4)\n    page.AutoRow(func(r *template.RowBuilder) {\n        r.Col(4, func(c *template.ColBuilder) {\n            c.Text(\"Subtotal\")\n        })\n        r.Col(4, func(c *template.ColBuilder) {\n            c.Text(\"Imposto\")\n        })\n        r.Col(4, func(c *template.ColBuilder) {\n            c.Text(\"Total\")\n        })\n    })\n\n    // Assimétrica (8 + 4) — corpo + painel lateral\n    page.AutoRow(func(r *template.RowBuilder) {\n        r.Col(8, func(c *template.ColBuilder) {\n            c.Text(\"Os itens aparecem aqui\")\n        })\n        r.Col(4, func(c *template.ColBuilder) {\n            c.Text(\"Observações\")\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","    // Largura total\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","Nota Fiscal #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},"    // Cabeçalho em duas colunas (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},"Destinatário",[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 Ltda.",[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},"Data de emissão",[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},"    // Resumo em três colunas (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},"Subtotal",[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},"Imposto",[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},"Total",[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},"    // Assimétrica (8 + 4) — corpo + painel lateral\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},"Os itens aparecem aqui",[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},"Observações",[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,1137,1140],{},"Rode ",[22,1138,1139],{},"go run main.go",". Você obtém uma página com quatro linhas, cada uma dividida de um jeito diferente.",[13,1142,1144],{"id":1143},"por-que-12","Por que 12",[18,1146,1147,1148,1151],{},"12 é divisível por 2, 3, 4 e 6 sem sobra. Isso cobre quase todo layout real: metades (6+6), terços (4+4+4), quartos (3+3+3+3), sidebar + corpo (3+9 ou 4+8), corpo + trilho (8+4). Pegue um número com menos fatores e uma dessas composições deixa de sair barata. O Bootstrap fixou 12 em 2011 pela mesma razão, e hoje \"grid de 12 colunas\" é o vocabulário comum que designer e engenheiro de frontend já falam. O gpdf importa o idioma de propósito — ",[45,1149,1150],{},"um layout de PDF não é um modelo mental diferente do layout web",", mesmo que o destino de render seja papel de largura fixa.",[13,1153,1155],{"id":1154},"a-matemática-explicitada","A matemática, explicitada",[18,1157,1158,1159,1162,1163,1166,1167,1170,1171,1174],{},"Com A4 retrato e 15 mm de margem uniforme, a largura útil é 180 mm. Um ",[22,1160,1161],{},"Col(4)"," dentro de uma linha ocupa 4/12 disso — 60 mm. ",[22,1164,1165],{},"Col(8)"," ocupa 120 mm. Entre colunas não há gutter por padrão. Se quiser respiro, adicione um ",[22,1168,1169],{},"c.Spacer"," dentro da coluna mais curta ou deixe um ",[22,1172,1173],{},"Col(1)"," vazio.",[18,1176,1177,1178,1181,1182,1185,1186,191],{},"A largura é computada como porcentagem em tempo de build (a implementação está em ",[22,1179,1180],{},"gpdf/template/grid.go",") e o motor de layout converte para pontos usando a largura atual da página menos as margens. Ou seja, o mesmo ",[22,1183,1184],{},"r.Col(6, fn)"," tem largura física diferente em A4 e Letter, mas ",[45,1187,1188],{},"a mesma proporção da linha",[13,1190,1192],{"id":1191},"quando-a-soma-não-dá-12","Quando a soma não dá 12",[18,1194,1195],{},"gpdf não valida a soma dos spans. É proposital.",[1197,1198,1199,1206],"ul",{},[1200,1201,1202,1205],"li",{},[45,1203,1204],{},"Soma \u003C 12",": o lado direito da linha fica em branco. Útil quando você quer ancorar uma coluna à borda esquerda e deixar o resto vazio de propósito.",[1200,1207,1208,1211],{},[45,1209,1210],{},"Soma > 12",": a última coluna vaza a margem direita. Geralmente é bug. O PDF sai torto, mas não há crash.",[18,1213,1214,1215,1218,1219,1222,1223,1225],{},"A maioria dos layouts fecha em exatamente 12 por linha, porque é o que preenche a página. Mas quando você quer um bloco de largura 6 centralizado, o jeito natural é ",[22,1216,1217],{},"Col(3)"," vazia, ",[22,1220,1221],{},"Col(6)"," conteúdo, ",[22,1224,1217],{}," vazia — o grid foi desenhado para esse tipo de notação curta.",[13,1227,1229],{"id":1228},"autorow-vs-row","AutoRow vs Row",[18,1231,1232,1235],{},[22,1233,1234],{},"page.AutoRow(fn)"," cresce verticalmente até a coluna mais alta. A maioria das linhas deve usar isso.",[18,1237,1238,1241],{},[22,1239,1240],{},"page.Row(height, fn)"," fixa a altura. Conteúdo que passa é cortado. Use para cabeçalhos de nota fiscal que precisam ter exatamente 30 mm para alinhar o grampeamento downstream, e para qualquer situação em que consistência visual pesa mais do que liberdade de conteúdo.",[54,1243,1245],{"className":56,"code":1244,"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(\"Logo\")\n    })\n    r.Col(4, func(c *template.ColBuilder) {\n        c.Text(\"Nº da nota\")\n    })\n})\n",[22,1246,1247,1288,1319,1339,1343,1373,1392,1396],{"__ignoreMap":59},[63,1248,1249,1252,1254,1257,1259,1261,1263,1265,1267,1270,1272,1274,1276,1278,1280,1282,1284,1286],{"class":65,"line":66},[63,1250,1251],{"class":181},"page",[63,1253,191],{"class":69},[63,1255,1256],{"class":168},"Row",[63,1258,211],{"class":69},[63,1260,214],{"class":181},[63,1262,191],{"class":69},[63,1264,250],{"class":168},[63,1266,211],{"class":69},[63,1268,1269],{"class":255},"30",[63,1271,413],{"class":69},[63,1273,357],{"class":69},[63,1275,319],{"class":318},[63,1277,322],{"class":69},[63,1279,325],{"class":73},[63,1281,191],{"class":69},[63,1283,330],{"class":73},[63,1285,333],{"class":69},[63,1287,175],{"class":69},[63,1289,1290,1293,1295,1297,1299,1301,1303,1305,1307,1309,1311,1313,1315,1317],{"class":65,"line":77},[63,1291,1292],{"class":181},"    r",[63,1294,191],{"class":69},[63,1296,346],{"class":168},[63,1298,211],{"class":69},[63,1300,889],{"class":255},[63,1302,354],{"class":69},[63,1304,357],{"class":69},[63,1306,360],{"class":318},[63,1308,322],{"class":69},[63,1310,325],{"class":73},[63,1312,191],{"class":69},[63,1314,369],{"class":73},[63,1316,333],{"class":69},[63,1318,175],{"class":69},[63,1320,1321,1324,1326,1328,1330,1332,1335,1337],{"class":65,"line":84},[63,1322,1323],{"class":181},"        c",[63,1325,191],{"class":69},[63,1327,384],{"class":168},[63,1329,211],{"class":69},[63,1331,389],{"class":69},[63,1333,1334],{"class":392},"Logo",[63,1336,389],{"class":69},[63,1338,154],{"class":69},[63,1340,1341],{"class":65,"line":94},[63,1342,435],{"class":69},[63,1344,1345,1347,1349,1351,1353,1355,1357,1359,1361,1363,1365,1367,1369,1371],{"class":65,"line":106},[63,1346,1292],{"class":181},[63,1348,191],{"class":69},[63,1350,346],{"class":168},[63,1352,211],{"class":69},[63,1354,679],{"class":255},[63,1356,354],{"class":69},[63,1358,357],{"class":69},[63,1360,360],{"class":318},[63,1362,322],{"class":69},[63,1364,325],{"class":73},[63,1366,191],{"class":69},[63,1368,369],{"class":73},[63,1370,333],{"class":69},[63,1372,175],{"class":69},[63,1374,1375,1377,1379,1381,1383,1385,1388,1390],{"class":65,"line":116},[63,1376,1323],{"class":181},[63,1378,191],{"class":69},[63,1380,384],{"class":168},[63,1382,211],{"class":69},[63,1384,389],{"class":69},[63,1386,1387],{"class":392},"Nº da nota",[63,1389,389],{"class":69},[63,1391,154],{"class":69},[63,1393,1394],{"class":65,"line":121},[63,1395,435],{"class":69},[63,1397,1398],{"class":65,"line":131},[63,1399,1400],{"class":69},"})\n",[13,1402,1404],{"id":1403},"o-que-o-grid-não-faz","O que o grid não faz",[18,1406,1407,1408,1410],{},"Sem aninhamento. O ",[22,1409,369],{}," aceita elementos de conteúdo (Text / Image / Table / List / Spacer), mas não outra linha dentro. Layouts que parecem pedir aninhamento normalmente ficam mais limpos expressos como duas linhas irmãs no nível da página.",[18,1412,1413,1414,1417,1418,1421],{},"Sem colunas de offset. O ",[22,1415,1416],{},".offset-2"," do Bootstrap não existe aqui. Para empurrar conteúdo para a direita, deixe um ",[22,1419,1420],{},"Col(n)"," vazio à esquerda.",[18,1423,1424],{},"Sem breakpoints. Páginas PDF não redimensionam. O grid produz o mesmo layout em qualquer dispositivo porque a saída é um raster de coordenadas fixas, não um DOM que re-flua.",[18,1426,1427,1430],{},[45,1428,1429],{},"Essas ausências são o ponto",". Cada recurso que o grid não tem é uma classe de ambiguidade que o PDF final não precisa raciocinar.",[13,1432,1434],{"id":1433},"leitura-relacionada","Leitura relacionada",[1197,1436,1437,1445,1452],{},[1200,1438,1439,1444],{},[1440,1441,1443],"a",{"href":1442},"/pt/blog/embed-japanese-font","Como embutir uma fonte japonesa no gpdf?"," — CJK dentro de colunas do grid",[1200,1446,1447,1451],{},[1440,1448,1450],{"href":1449},"/pt/blog/go-pdf-library-showdown-2026","Comparativo de bibliotecas Go PDF 2026"," — como a API Builder se compara a gofpdf, gopdf e Maroto",[1200,1453,1454,1460],{},[1440,1455,1459],{"href":1456,"rel":1457},"https://gpdf.dev/pt/docs/guide/layout",[1458],"nofollow","Guia de layout"," — referência completa de linhas, colunas e espaçamento",[13,1462,1464],{"id":1463},"experimente-o-gpdf","Experimente o gpdf",[18,1466,1467],{},"gpdf é uma biblioteca Go para gerar PDFs. Licença MIT, zero dependências externas, suporte nativo a CJK.",[54,1469,1473],{"className":1470,"code":1471,"language":1472,"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,1474,1475],{"__ignoreMap":59},[63,1476,1477,1479,1482],{"class":65,"line":66},[63,1478,58],{"class":73},[63,1480,1481],{"class":392}," get",[63,1483,1484],{"class":392}," github.com/gpdf-dev/gpdf\n",[18,1486,1487,1492,1493],{},[1440,1488,1491],{"href":1489,"rel":1490},"https://github.com/gpdf-dev/gpdf",[1458],"⭐ Favoritar no GitHub"," · ",[1440,1494,1497],{"href":1495,"rel":1496},"https://gpdf.dev/pt/docs/quickstart",[1458],"Ler a documentação",[1499,1500,1501],"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":1503},[1504,1505,1506,1507,1508,1509,1510,1511,1512,1513],{"id":15,"depth":77,"text":16},{"id":32,"depth":77,"text":33},{"id":51,"depth":77,"text":52},{"id":1143,"depth":77,"text":1144},{"id":1154,"depth":77,"text":1155},{"id":1191,"depth":77,"text":1192},{"id":1228,"depth":77,"text":1229},{"id":1403,"depth":77,"text":1404},{"id":1433,"depth":77,"text":1434},{"id":1463,"depth":77,"text":1464},"O grid de 12 colunas do gpdf usa r.Col(span, fn) com span de 1 a 12. A largura da coluna é (span/12) da linha. Sem breakpoints, sem gutter, previsível por design.",false,"md",{"name":1518,"totalTime":1519,"tools":1520,"steps":1522},"Diagramar uma página com o grid de 12 colunas do gpdf","PT10M",[1521,126],"Go 1.22+",[1523,1526,1529,1532,1535],{"name":1524,"text":1525},"Abrir uma linha na página","Chame page.AutoRow(fn) para que a altura cresça até a coluna mais alta, ou page.Row(height, fn) quando quiser fixar a altura.",{"name":1527,"text":1528},"Declarar colunas com r.Col(span, fn)","Dentro da linha, chame r.Col(span, fn) uma vez por coluna. span é um inteiro de 1 a 12 — a fração da largura da linha que aquela coluna ocupa.",{"name":1530,"text":1531},"Mantenha a soma dos spans por linha em 12 ou menos","Se a soma for menor que 12, o lado direito fica vazio. Se passar de 12, a última coluna extrapola a linha — geralmente um bug.",{"name":1533,"text":1534},"Preencher a coluna com conteúdo","No callback do ColBuilder chame c.Text, c.Image, c.Table ou c.Spacer. O conteúdo se empilha verticalmente na ordem em que você adiciona.",{"name":1536,"text":1537},"Começar a próxima linha","Chame page.AutoRow de novo para a próxima linha visual. Linhas são independentes — uma linha 4+8 pode ficar logo acima de uma 3+3+3+3.",null,{},"/pt/blog/12-column-grid",{"title":5,"description":1514},"pt/blog/005.12-column-grid",[1544,1545,1546],"recipe","tutorial","templates","ya25Z5i-crbHMa_HX6ACdaPzNhVvVz0WnaAV0aXgajo",1776529275912]