Custom grid layout with Angular Gridster 2

I would like to make the grid layout in an Angular project. The layout should look like this:

Here is my code so far:

<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>

  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'
  }];

My question: is this the right way to build this layout? Is it OK to use values like 1.5 cols? I am not quite sure. Could someone please advise me on this issue?

OK, I figured it out. It is not a good idea to use values like 1.5 cols.

What I have done instead: increased the number of columns, and then divided them to make this layout:

  widgets: { x: number, y: number, name: string, cols?: number, rows?: number }[] = [
  {
    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: 3,
    y: 1,
    cols: 3,
    rows: 1,
    name: 'Expense'
  }];