update readme

Author: hackw

README.md

@@ -57,7 +57,8 @@ insult him.
 13. dimension ratio
 14. relative id
 15. wrapper constraints
-16. grid、list(list is a special grid)
+16. staggered grid、grid、list(list is a special staggered grid, grid is also a special staggered
+    grid)
 
 Coming soon:
 
@@ -545,6 +546,113 @@ class GridExample extends StatelessWidget {
 
 ![grid.webp](https://github.com/hackware1993/flutter-constraintlayout/blob/master/grid.webp?raw=true)
 
+5. staggered grid
+
+```dart
+class StaggeredGridExample extends StatelessWidget {
+  const StaggeredGridExample({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    List<Color> colors = [
+      Colors.redAccent,
+      Colors.greenAccent,
+      Colors.blueAccent,
+      Colors.orangeAccent,
+      Colors.yellow,
+      Colors.pink,
+      Colors.lightBlueAccent
+    ];
+    const double smallestSize = 40;
+    const int columnCount = 8;
+    Random random = Random();
+    return Scaffold(
+      body: ConstraintLayout(
+        children: [
+          TextButton(
+            onPressed: () {
+              (context as Element).markNeedsBuild();
+            },
+            child: const Text(
+              'Upset',
+              style: TextStyle(
+                fontSize: 32,
+                height: 1.5,
+              ),
+            ),
+          ).applyConstraint(
+            left: ConstraintId('horizontalList').right,
+            top: ConstraintId('horizontalList').top,
+          ),
+          ...constraintGrid(
+              id: ConstraintId('horizontalList'),
+              left: parent.left,
+              top: parent.top,
+              margin: const EdgeInsets.only(
+                left: 100,
+              ),
+              itemCount: 50,
+              columnCount: columnCount,
+              itemBuilder: (index) {
+                return Container(
+                  color: colors[index % colors.length],
+                  alignment: Alignment.center,
+                  child: Text('$index'),
+                );
+              },
+              itemSizeBuilder: (index) {
+                if (index == 0) {
+                  return const Size(
+                      smallestSize * columnCount + 35, smallestSize);
+                }
+                if (index == 6) {
+                  return const Size(smallestSize * 2 + 5, smallestSize);
+                }
+                if (index == 7) {
+                  return const Size(smallestSize * 6 + 25, smallestSize);
+                }
+                if (index == 19) {
+                  return const Size(smallestSize * 2 + 5, smallestSize);
+                }
+                if (index == 29) {
+                  return const Size(smallestSize * 3 + 10, smallestSize);
+                }
+                return Size(
+                    smallestSize, (2 + random.nextInt(4)) * smallestSize);
+              },
+              itemSpanBuilder: (index) {
+                if (index == 0) {
+                  return columnCount;
+                }
+                if (index == 6) {
+                  return 2;
+                }
+                if (index == 7) {
+                  return 6;
+                }
+                if (index == 19) {
+                  return 2;
+                }
+                if (index == 29) {
+                  return 3;
+                }
+                return 1;
+              },
+              itemMarginBuilder: (index) {
+                return const EdgeInsets.only(
+                  left: 5,
+                  top: 5,
+                );
+              })
+        ],
+      ),
+    );
+  }
+}
+```
+
+![staggered_grid.gif](https://github.com/hackware1993/flutter-constraintlayout/blob/master/staggered_grid.gif?raw=true)
+
 # Performance optimization
 
 1. When the layout is complex, if the child elements need to be repainted frequently, it is