使用Angular Gridster 2构建自定义网格布局的合理性咨询

你想要在Angular项目中实现如下网格布局：

当前代码 #

HTML模板 #

<div class="gridster-container">
  <gridster [options]="options">
    <gridster-item *ngFor="let w of widgets" [item]="w">
      <ng-container [widget]="w"></ng-container>
    </gridster-item>
  </gridster>
</div>

TypeScript代码 #

options: GridsterConfig = {
  gridType: 'scrollVertical',
  draggable: {
    enabled: false
  }
};

widgets: { x: number, y: number, name: string, cols?: number, rows?: number }[] = [
{
  x: 0,
  y: 0,
  cols: 1,
  rows: 1,
  name: 'Calendar'
},
{
  x: 1,
  y: 0,
  cols: 1,
  rows: 1,
  name: 'Favorites'
}, 
{
  x: 2,
  y: 0,
  cols: 1,
  rows: 1,
  name: 'News'
},
{
  x: 0,
  y: 1,
  cols: 1.5,
  rows: 1,
  name: 'Income'
}, {
  x: 0,
  y: 3,
  cols: 1.5,
  rows: 1,
  name: 'Expense'
}];

我的疑问 #

1. 这种构建布局的方式是否正确？
2. 使用1.5这类非整数的cols数值是否可行？希望得到相关建议。

解答与建议 #

非整数cols的可行性结论 #

Angular Gridster是基于整数网格单元设计的，非整数的cols/rows值并不受官方支持，会引发一系列问题：

• 渲染异常：元素宽度计算错位、相邻元素重叠、布局对齐混乱；
• 兼容性风险：部分浏览器或Gridster版本可能完全无法识别非整数值，导致元素尺寸失效；
• 维护隐患：后续版本更新可能彻底移除对非整数值的兼容，导致布局崩溃。

正确实现方案 #

要实现图中宽幅元素的布局，推荐两种合规方案：

1. 调整网格列数基数

将全局网格列数设为更大的整数（比如6列），用整数cols模拟半列效果：

options: GridsterConfig = {
  gridType: 'scrollVertical',
  draggable: { enabled: false },
  columns: 6 // 提升列数基数
};

widgets: [...] = [
  { x:0, y:0, cols:2, rows:1, name:'Calendar' },
  { x:2, y:0, cols:2, rows:1, name:'Favorites' },
  { x:4, y:0, cols:2, rows:1, name:'News' },
  { x:0, y:1, cols:3, rows:1, name:'Income' },
  { x:0, y:2, cols:3, rows:1, name:'Expense' } // 修正y轴坐标避免空白
];

2. 自定义CSS控制宽度

如果不需要Gridster的拖拽/自适应特性，直接给目标元素加自定义样式：

.wide-widget {
  width: calc(50% - 10px); /* 根据实际布局调整间距 */
}

模板中绑定类：

<gridster-item *ngFor="let w of widgets" [item]="w" [class.wide-widget]="w.name === 'Income' || w.name === 'Expense'">
  <ng-container [widget]="w"></ng-container>
</gridster-item>

现有代码的额外问题 #

你当前代码中Expense元素的y:3会导致上方出现空白，建议将其改为y:2，保证布局的连续性。

内容的提问来源于stack exchange，提问作者Macy Narancs