Create matplotlib grid example

mesop/examples/__init__.py

@@ -8,6 +8,7 @@
   error_no_stateclass_decorator as error_no_stateclass_decorator,
 )
 from mesop.examples import generator as generator
+from mesop.examples import grid as grid
 from mesop.examples import index as index
 from mesop.examples import integrations as integrations
 from mesop.examples import nested as nested

mesop/examples/grid.py

@@ -0,0 +1,10 @@
+import mesop as me
+
+
+@me.page(path="/grid")
+def app():
+  with me.box(style=me.Style(display="grid", grid_template_columns="1fr 1fr")):
+    me.text("hi1")
+    me.text("hi2")
+    me.text("hi3")
+    me.text("hi4")

mesop/examples/integrations/__init__.py

@@ -1,3 +1,6 @@
 from mesop.examples.integrations import (
   matplotlib as matplotlib,
 )
+from mesop.examples.integrations import (
+  matplotlib_grid as matplotlib_grid,
+)

mesop/examples/integrations/matplotlib.py

@@ -15,4 +15,3 @@ def app():
 
   me.text("Resize plot:")
   me.plot(fig, style=me.Style(width=200, height=200))
-  me.plot(fig)

mesop/examples/integrations/matplotlib_grid.py

@@ -0,0 +1,54 @@
+from matplotlib.figure import Figure
+
+import mesop as me
+
+
+@me.page(path="/integrations/matplotlib_grid")
+def app():
+  with me.box(
+    style=me.Style(
+      display="grid",
+      grid_template_columns="1fr 1fr",
+      gap="16px",
+      padding=me.Padding(
+        top=16,
+        left=16,
+        right=16,
+        bottom=16,
+      ),
+      overflow_y="auto",
+    )
+  ):
+    graph()
+    graph()
+    graph()
+    graph()
+
+
+def graph():
+  border_side = me.BorderSide(width=1, color="#ddd", style="solid")
+  with me.box(
+    style=me.Style(
+      background="#fff",
+      border=me.Border(
+        top=border_side,
+        right=border_side,
+        bottom=border_side,
+        left=border_side,
+      ),
+      border_radius=16,
+      padding=me.Padding(
+        top=16,
+        left=16,
+        right=16,
+        bottom=16,
+      ),
+    )
+  ):
+    # Create matplotlib figure without using pyplot:
+    fig = Figure()
+    ax = fig.subplots()  # type: ignore
+    ax.plot([1, 2])  # type: ignore
+
+    me.text("Example using matplotlib:")
+    me.plot(fig, style=me.Style(width="100%"))