[{"data":1,"prerenderedAt":1547},["ShallowReactive",2],{"blog-es-12-column-grid":3},{"id":4,"title":5,"author":6,"body":9,"date":615,"description":1513,"draft":1514,"extension":1515,"howTo":1516,"image":1537,"meta":1538,"navigation":80,"path":1539,"seo":1540,"stem":1541,"tags":1542,"updated":1537,"__hash__":1546},"blogEs/es/blog/005.12-column-grid.md","¿Cómo funciona la cuadrícula de 12 columnas de gpdf?",{"name":7,"url":8},"gpdf team","https://gpdf.dev",{"type":10,"value":11,"toc":1501},"minimark",[12,17,30,34,49,53,1134,1141,1145,1152,1156,1174,1188,1192,1195,1211,1225,1229,1235,1241,1400,1404,1410,1421,1424,1430,1434,1460,1464,1467,1484,1497],[13,14,16],"h2",{"id":15},"la-pregunta-dicha-de-otra-forma","La pregunta, dicha de otra forma",[18,19,20,21,25,26,29],"p",{},"Ya conoces la API de gpdf — constructor de página, de fila, de columna — y el constructor de columna recibe un número: ",[22,23,24],"code",{},"r.Col(4, fn)",", ",[22,27,28],{},"r.Col(8, fn)",". ¿Qué es ese número, qué pasa si los spans no suman 12, y en qué se parece a la cuadrícula que ya conoces de CSS?",[13,31,33],{"id":32},"respuesta-corta","Respuesta corta",[18,35,36,39,40,43,44,48],{},[22,37,38],{},"r.Col(span, fn)"," recibe un entero de 1 a 12. Ese entero es la parte de la fila que ocupa la columna — ",[22,41,42],{},"span / 12"," del ancho disponible. Valores por debajo de 1 se recortan a 1, por encima de 12 se recortan a 12, y ",[45,46,47],"strong",{},"la librería no obliga a que los spans sumen 12 por fila",". La cuadrícula está fijada en 12 divisiones; lo demás es decisión tuya sobre cómo cortar cada fila.",[13,50,52],{"id":51},"un-ejemplo-que-funciona","Un ejemplo 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    // Ancho completo\n    page.AutoRow(func(r *template.RowBuilder) {\n        r.Col(12, func(c *template.ColBuilder) {\n            c.Text(\"Factura #2026-0416\", template.FontSize(18), template.Bold())\n        })\n    })\n\n    // Cabecera a dos columnas (6 + 6)\n    page.AutoRow(func(r *template.RowBuilder) {\n        r.Col(6, func(c *template.ColBuilder) {\n            c.Text(\"Facturado a\")\n            c.Text(\"Acme S.L.\")\n        })\n        r.Col(6, func(c *template.ColBuilder) {\n            c.Text(\"Fecha de emisión\")\n            c.Text(\"2026-04-16\")\n        })\n    })\n\n    // Resumen a tres columnas (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(\"IVA\")\n        })\n        r.Col(4, func(c *template.ColBuilder) {\n            c.Text(\"Total\")\n        })\n    })\n\n    // Asimétrica (8 + 4) — cuerpo + panel lateral\n    page.AutoRow(func(r *template.RowBuilder) {\n        r.Col(8, func(c *template.ColBuilder) {\n            c.Text(\"Las líneas aparecen aquí\")\n        })\n        r.Col(4, func(c *template.ColBuilder) {\n            c.Text(\"Notas\")\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","    // Ancho completo\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","Factura #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},"    // Cabecera a dos columnas (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},"Facturado a",[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 S.L.",[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},"Fecha de emisión",[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},"    // Resumen a tres columnas (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},"IVA",[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},"    // Asimétrica (8 + 4) — cuerpo + panel 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},"Las líneas aparecen aquí",[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},"Notas",[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],{},"Ejecuta ",[22,1138,1139],{},"go run main.go",". Obtienes una página con cuatro filas, cada una dividida de manera distinta.",[13,1142,1144],{"id":1143},"por-qué-12","Por qué 12",[18,1146,1147,1148,1151],{},"12 se divide limpiamente entre 2, 3, 4 y 6. Eso cubre casi cualquier maquetación real: mitades (6+6), tercios (4+4+4), cuartos (3+3+3+3), barra lateral + cuerpo (3+9 o 4+8), cuerpo + columna auxiliar (8+4). Con un número de menos factores pierdes una de esas combinaciones. Bootstrap se decantó por doce en 2011 por la misma razón, y hoy \"cuadrícula de 12 columnas\" es la lingua franca que cualquier diseñador o ingeniero de frontend ya habla. gpdf toma prestado ese modismo a propósito — ",[45,1149,1150],{},"una maquetación PDF no es un modelo mental distinto al de la web",", aunque el destino de renderizado sea papel de ancho fijo.",[13,1153,1155],{"id":1154},"la-cuenta-escrita","La cuenta, escrita",[18,1157,1158,1159,1162,1163,1166,1167,1170,1171,191],{},"Con A4 vertical y márgenes uniformes de 15 mm, el ancho útil es de 180 mm. Un ",[22,1160,1161],{},"Col(4)"," dentro de una fila ocupa 4/12 de eso — 60 mm. ",[22,1164,1165],{},"Col(8)"," ocupa 120 mm. Entre columnas no hay canalón (gutter) por defecto. Si quieres aire, añade un ",[22,1168,1169],{},"c.Spacer"," dentro de la columna más corta o deja vacío un ",[22,1172,1173],{},"Col(1)",[18,1175,1176,1177,1180,1181,1184,1185,191],{},"El ancho se calcula como porcentaje en tiempo de construcción (la implementación está en ",[22,1178,1179],{},"gpdf/template/grid.go",") y el motor de layout lo resuelve a puntos usando el ancho de página actual menos los márgenes. Es decir, el mismo ",[22,1182,1183],{},"r.Col(6, fn)"," tiene distinto ancho físico en A4 o Letter, pero ",[45,1186,1187],{},"la misma proporción de fila",[13,1189,1191],{"id":1190},"cuando-la-suma-no-da-12","Cuando la suma no da 12",[18,1193,1194],{},"gpdf no valida que los spans sumen. Es intencionado.",[1196,1197,1198,1205],"ul",{},[1199,1200,1201,1204],"li",{},[45,1202,1203],{},"Suma \u003C 12",": el lado derecho queda en blanco. Útil cuando quieres anclar una columna al borde izquierdo y dejar el resto vacío a propósito.",[1199,1206,1207,1210],{},[45,1208,1209],{},"Suma > 12",": la última columna se sale del margen derecho. Casi siempre un bug. El PDF sale torcido, pero no hay crash.",[18,1212,1213,1214,1217,1218,1221,1222,1224],{},"La mayoría de las maquetaciones acaban sumando exactamente 12 por fila, porque es lo que llena la página. Pero cuando quieres un bloque de ancho 6 en el centro de la línea, lo natural es escribir ",[22,1215,1216],{},"Col(3)"," vacía, ",[22,1219,1220],{},"Col(6)"," contenido, ",[22,1223,1216],{}," vacía — la cuadrícula está pensada para ese tipo de taquigrafía.",[13,1226,1228],{"id":1227},"autorow-vs-row","AutoRow vs Row",[18,1230,1231,1234],{},[22,1232,1233],{},"page.AutoRow(fn)"," crece verticalmente hasta la columna más alta. La mayoría de filas deberían usarlo.",[18,1236,1237,1240],{},[22,1238,1239],{},"page.Row(height, fn)"," fija la altura. El contenido que sobresalga se recorta. Úsalo para cabeceras de factura que deben medir exactamente 30 mm para que cuadre el grapado posterior, y para cualquier situación en la que la consistencia visual pese más que la libertad del contenido.",[54,1242,1244],{"className":56,"code":1243,"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º de factura\")\n    })\n})\n",[22,1245,1246,1287,1318,1338,1342,1372,1391,1395],{"__ignoreMap":59},[63,1247,1248,1251,1253,1256,1258,1260,1262,1264,1266,1269,1271,1273,1275,1277,1279,1281,1283,1285],{"class":65,"line":66},[63,1249,1250],{"class":181},"page",[63,1252,191],{"class":69},[63,1254,1255],{"class":168},"Row",[63,1257,211],{"class":69},[63,1259,214],{"class":181},[63,1261,191],{"class":69},[63,1263,250],{"class":168},[63,1265,211],{"class":69},[63,1267,1268],{"class":255},"30",[63,1270,413],{"class":69},[63,1272,357],{"class":69},[63,1274,319],{"class":318},[63,1276,322],{"class":69},[63,1278,325],{"class":73},[63,1280,191],{"class":69},[63,1282,330],{"class":73},[63,1284,333],{"class":69},[63,1286,175],{"class":69},[63,1288,1289,1292,1294,1296,1298,1300,1302,1304,1306,1308,1310,1312,1314,1316],{"class":65,"line":77},[63,1290,1291],{"class":181},"    r",[63,1293,191],{"class":69},[63,1295,346],{"class":168},[63,1297,211],{"class":69},[63,1299,889],{"class":255},[63,1301,354],{"class":69},[63,1303,357],{"class":69},[63,1305,360],{"class":318},[63,1307,322],{"class":69},[63,1309,325],{"class":73},[63,1311,191],{"class":69},[63,1313,369],{"class":73},[63,1315,333],{"class":69},[63,1317,175],{"class":69},[63,1319,1320,1323,1325,1327,1329,1331,1334,1336],{"class":65,"line":84},[63,1321,1322],{"class":181},"        c",[63,1324,191],{"class":69},[63,1326,384],{"class":168},[63,1328,211],{"class":69},[63,1330,389],{"class":69},[63,1332,1333],{"class":392},"Logo",[63,1335,389],{"class":69},[63,1337,154],{"class":69},[63,1339,1340],{"class":65,"line":94},[63,1341,435],{"class":69},[63,1343,1344,1346,1348,1350,1352,1354,1356,1358,1360,1362,1364,1366,1368,1370],{"class":65,"line":106},[63,1345,1291],{"class":181},[63,1347,191],{"class":69},[63,1349,346],{"class":168},[63,1351,211],{"class":69},[63,1353,679],{"class":255},[63,1355,354],{"class":69},[63,1357,357],{"class":69},[63,1359,360],{"class":318},[63,1361,322],{"class":69},[63,1363,325],{"class":73},[63,1365,191],{"class":69},[63,1367,369],{"class":73},[63,1369,333],{"class":69},[63,1371,175],{"class":69},[63,1373,1374,1376,1378,1380,1382,1384,1387,1389],{"class":65,"line":116},[63,1375,1322],{"class":181},[63,1377,191],{"class":69},[63,1379,384],{"class":168},[63,1381,211],{"class":69},[63,1383,389],{"class":69},[63,1385,1386],{"class":392},"Nº de factura",[63,1388,389],{"class":69},[63,1390,154],{"class":69},[63,1392,1393],{"class":65,"line":121},[63,1394,435],{"class":69},[63,1396,1397],{"class":65,"line":131},[63,1398,1399],{"class":69},"})\n",[13,1401,1403],{"id":1402},"lo-que-la-cuadrícula-no-hace","Lo que la cuadrícula no hace",[18,1405,1406,1407,1409],{},"Sin anidación. ",[22,1408,369],{}," acepta elementos de contenido (Text / Image / Table / List / Spacer), pero no otra fila dentro. Las maquetaciones que parecen necesitar anidación suelen quedar mejor como dos filas hermanas al nivel de la página.",[18,1411,1412,1413,1416,1417,1420],{},"Sin columnas de offset. Bootstrap tiene ",[22,1414,1415],{},".offset-2","; gpdf no. Si quieres empujar contenido a la derecha, deja un ",[22,1418,1419],{},"Col(n)"," vacío a la izquierda.",[18,1422,1423],{},"Sin breakpoints. Las páginas PDF no cambian de tamaño. La cuadrícula produce la misma maquetación en cualquier dispositivo porque la salida es un ráster de coordenadas fijas, no un DOM que re-fluya.",[18,1425,1426,1429],{},[45,1427,1428],{},"Estas ausencias son el punto",". Cada función que la cuadrícula no tiene es una clase de ambigüedad que la salida PDF no tiene que razonar.",[13,1431,1433],{"id":1432},"lecturas-relacionadas","Lecturas relacionadas",[1196,1435,1436,1444,1451],{},[1199,1437,1438,1443],{},[1439,1440,1442],"a",{"href":1441},"/es/blog/embed-japanese-font","¿Cómo incrusto una fuente japonesa en gpdf?"," — CJK dentro de columnas de cuadrícula",[1199,1445,1446,1450],{},[1439,1447,1449],{"href":1448},"/es/blog/go-pdf-library-showdown-2026","Comparativa de librerías Go PDF 2026"," — cómo se compara la API Builder con gofpdf, gopdf y Maroto",[1199,1452,1453,1459],{},[1439,1454,1458],{"href":1455,"rel":1456},"https://gpdf.dev/es/docs/guide/layout",[1457],"nofollow","Guía de layout"," — referencia completa de filas, columnas y espaciado",[13,1461,1463],{"id":1462},"prueba-gpdf","Prueba gpdf",[18,1465,1466],{},"gpdf es una librería Go para generar PDFs. Licencia MIT, cero dependencias externas, soporte CJK nativo.",[54,1468,1472],{"className":1469,"code":1470,"language":1471,"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,1473,1474],{"__ignoreMap":59},[63,1475,1476,1478,1481],{"class":65,"line":66},[63,1477,58],{"class":73},[63,1479,1480],{"class":392}," get",[63,1482,1483],{"class":392}," github.com/gpdf-dev/gpdf\n",[18,1485,1486,1491,1492],{},[1439,1487,1490],{"href":1488,"rel":1489},"https://github.com/gpdf-dev/gpdf",[1457],"⭐ Dale estrella en GitHub"," · ",[1439,1493,1496],{"href":1494,"rel":1495},"https://gpdf.dev/es/docs/quickstart",[1457],"Lee la documentación",[1498,1499,1500],"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":1502},[1503,1504,1505,1506,1507,1508,1509,1510,1511,1512],{"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":1190,"depth":77,"text":1191},{"id":1227,"depth":77,"text":1228},{"id":1402,"depth":77,"text":1403},{"id":1432,"depth":77,"text":1433},{"id":1462,"depth":77,"text":1463},"La cuadrícula de 12 columnas de gpdf usa r.Col(span, fn) con span de 1 a 12. El ancho de columna es (span/12) de la fila. Sin breakpoints ni canalones, diseñada para PDF.",false,"md",{"name":1517,"totalTime":1518,"tools":1519,"steps":1521},"Maquetar una página con la cuadrícula de 12 columnas de gpdf","PT10M",[1520,126],"Go 1.22+",[1522,1525,1528,1531,1534],{"name":1523,"text":1524},"Abrir una fila en la página","Llama a page.AutoRow(fn) para que la altura crezca hasta la columna más alta, o page.Row(height, fn) cuando quieras fijar la altura.",{"name":1526,"text":1527},"Declarar columnas con r.Col(span, fn)","Dentro de la fila, llama a r.Col(span, fn) una vez por columna. span es un entero de 1 a 12 — la fracción del ancho de fila que ocupa esa columna.",{"name":1529,"text":1530},"Mantén la suma de spans por fila en 12 o menos","Si la suma es menor que 12, la derecha queda vacía. Si es mayor que 12, la última columna se sale de la fila — casi siempre un bug.",{"name":1532,"text":1533},"Rellenar la columna con contenido","Dentro del callback de ColBuilder, llama a c.Text, c.Image, c.Table o c.Spacer. El contenido se apila verticalmente en el orden en que lo añades.",{"name":1535,"text":1536},"Empezar la siguiente fila","Llama a page.AutoRow otra vez para la fila siguiente. Las filas son independientes — una fila 4+8 puede ir justo encima de una 3+3+3+3.",null,{},"/es/blog/12-column-grid",{"title":5,"description":1513},"es/blog/005.12-column-grid",[1543,1544,1545],"recipe","tutorial","templates","WSe8LHMlGqL7j17GG7xxsk77_atkU3RQwMqZsbdnW5o",1776529274211]