layout_grid 1.0.1

Layout grid following the Material Design Guide lines

Layout Grid

Column-variate grid layout for Flutter

LayoutGrid(
    children: [
    for (final _ in List.filled(30, 0))
        Cell(
            extent: 100,
            child: Container(
                margin: EdgeInsets.all(20),
                color: Colors.red,
            ),
        ),
    ],
);

https://user-images.githubusercontent.com/19904063/134354509-a2fc9db7-d295-4ea7-a52c-ba0add99dd1c.mp4

CustomScrollView(
    primary: true,
    slivers: [
    for (final int page in List.generate(20, (i) => i))
        SliverStickyHeader(
        overlapsContent: true,
        header: Container(height: 80.0, child: Text('Page $page')),
        sliver: SliverLayoutGrid(
            gridDelegate: SliverLayoutGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: context.layout.value(
                    xs: 3,
                    md: 6,
                    lg: 9,
                ),
                crossAxisSpacing: 2,
                mainAxisSpacing: 2,
                masonry: true,
            ),
            delegate: SliverChildBuilderDelegate((context, j) {
                final i = page * 16 + j;
                return Cell.aspectRatio(
                    key: ValueKey('Cell $j + $page'),
                    snap: sizeForIndex(i),
                    child: Container(
                        color: Colors.red,
                    ),
                );
            },
            childCount: 16,
            addAutomaticKeepAlives: false,
            ),
        ),
        ),
    ],
);

int sizeForIndex(int index) {
    final int c = index % 16;
    if (c == 3) return 3;
    if (c == 6 || c == 14) return 2;
    return 1;
}