<div style="width: 100vw; height: 500px; background: yellow;">
	<as-split direction="horizontal">
		<as-split-area [size]="40">
			<as-split direction="vertical">
				<as-split-area>
					<p>Lorem ipsum </p>
				</as-split-area>
			</as-split>
		</as-split-area>
		<as-split-area [size]="60">
			<as-split direction="vertical">
				<as-split-area [size]="25">
					<p>Lorem ipsum dolor.</p>
				</as-split-area>
				<as-split-area [size]="75">
					<p>Lorem ipsum dolor.</p>
				</as-split-area>
			</as-split>
		</as-split-area>
	</as-split>
</div>

  // Gridster
  gridsterOptions: GridsterConfig = {
    minCols: 12,
    maxCols: 12,
    minRows: 1,
    maxRows: 1,
    maxItemCols: 50,
    minItemCols: 1,
    maxItemRows: 1,
    minItemRows: 1,
    setGridSize: true,
    fixedColWidth: 250,
    fixedRowHeight: 600,
    outerMargin: true,
    margin: 2,
    draggable: {
      enabled: false
    },
    resizable: {
      enabled: true
    }
  };

  girdLayout: Array<GridsterItem> = [
    { cols: 5, rows: 1, x: undefined, y: undefined },
    { cols: 7, rows: 1, x: undefined, y: undefined }
  ];

    <gridster #gridster [options]="gridsterOptions" class="edit-sla-package">
        <gridster-item [item]="item" *ngFor="let item of girdLayout; let i=index;">
            <ng-container *ngIf="i==0">
                col 7
            </ng-container>
            <ng-container *ngIf="i==1">
                col 3
            </ng-container>
        </gridster-item>
    </gridster>