angular-grid-layout

npm install @katoid/angular-grid-layout --save

HTML

<ktd-grid [cols]="cols" [rowHeight]="rowHeight" [layout]="layout">
    <ktd-grid-item *ngFor="let item of layout; trackBy:trackById" [id]="item.id">
        {{item.id}}
    </ktd-grid-item>
</ktd-grid>

scss

:host {
    display: block;
    width: 100%;
    padding: 24px;
    box-sizing: border-box;

    .grid-container {
        padding: 4px;
        box-sizing: border-box;
        border: 1px solid gray;
        border-radius: 2px;
        background: #313131;
    }

    ktd-grid {
        transition: height 500ms ease;
    }

    ktd-grid-item {
        box-sizing: border-box;
        background: #ccc;
        border: 1px solid black;
        color: black;

        &.ktd-grid-item-table {
            padding: 16px;
            box-sizing: border-box;
            border: none;
            background: transparent;
        }
    }

    .ktd-grid-img-container {
        width: 100%;
        height: 100%;
        background-color: #e67301;

        img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }
    }
}

ts

import { Component, OnInit } from '@angular/core';
import { ktdTrackById, KtdGridLayout } from '@katoid/angular-grid-layout';

@Component({
  selector: 'app-news',
  templateUrl: './news.component.html',
  styleUrls: ['./news.component.scss']
})
export class NewsComponent implements OnInit {
  public title = "我是新闻组件"
  msg = "利用msg也可以传到html"

  public student: any = "我是一个学生的sh"
  cols: number = 6;
  rowHeight: number = 100;
  layout: KtdGridLayout = [
    { id: '0', x: 0, y: 0, w: 2, h: 4 },
    { id: '1', x: 2, y: 0, w: 2, h: 4 },
    { id: '2', x: 4, y: 0, w: 2, h: 4 },
    { id: '3', x: 3, y: 3, w: 2, h: 4 },
  ];
  trackById = ktdTrackById

  constructor() { }

  ngOnInit(): void {
  }

}