如何为所有Grid项目添加边框线条?
如何为所有Grid项目添加边框线条?
你可以直接给每个Grid项目外层包裹一个带边框样式的容器,替代原来用页面背景grid实现的方式,这样每个单元格都能正确显示边框。修改后的完整代码如下:
// template #set page(height: 16.5cm, width: 18cm, margin: (left: 1cm, right: 1cm, top: 1cm, bottom: 1cm)) #set text(14pt, fill: rgb("#444444")) #let conf( authors: (), doc, ) = { let count = authors.len() let ncols = calc.min(count, 2) let nrows = 4 set align(center) grid( columns: (1fr,) * ncols, rows: (1fr,) * nrows, row-gutter: 1cm, column-gutter: 1cm, // 添加上列间距,避免左右单元格边框重叠 ..authors.map(author => [ // 给每个项目套一个带边框的容器 #block( height: 100%, width: 100%, stroke: (paint: silver, thickness: 1pt, dash: "dashed"), padding: 0.5cm, // 内容和边框之间留间距,提升美观度 [ #author.name \ #author.affiliation \ #link("mailto:" + author.email) ] ) ]) ) } // values #show: doc => conf( authors: ( ( name: "Theresa Tungsten", affiliation: "Artos Institute", email: "tung@artos.edu", ), ( name: "Eugene Deklan", affiliation: "Honduras State", email: "e.deklan@hstate.hn", ), ( name: "Eugene Deklan", affiliation: "Honduras State", email: "e.deklan@hstate.hn", ), ( name: "Eugene Deklan", affiliation: "Honduras State", email: "e.deklan@hstate.hn", ), ), doc, )
关键改动说明:
- 移除了页面背景的grid,避免重复绘制边框导致的视觉错乱
- 给每个作者项外层添加
block容器,直接通过stroke属性设置边框样式 - 新增
column-gutter列间距,防止左右单元格边框重叠 - 添加
padding让内容和边框之间保留留白,优化排版观感
内容的提问来源于stack exchange,提问作者mindlessgreen
相关产品推荐
相关产品推荐

