Add CSS Grid demo to flex example!

DioxusLabs · Jun 21, 2024 · e4129e1 · e4129e1
1 parent 8d70d59
commit e4129e1
Showing 1 changed file with 14 additions and 15 deletions.
diff --git a/examples/flex.rs b/examples/flex.rs
@@ -12,8 +12,8 @@ fn main() {
 
 fn app() -> Element {
     rsx! {
-        style { {CSS} }
         div {
+            style { {CSS} }
             div {
                 h2 { "justify-content" }
                 for row in ["flex-start", "flex-end", "center", "space-between", "space-around", "space-evenly"] {
@@ -25,7 +25,7 @@ fn app() -> Element {
                     }
                 }
             }
-            h3 { "flex-flow" }
+            h3 { "CSS Grid Test"}
             div {
                 id: "grid_container",
                 for _ in 0..3 {
@@ -69,21 +69,20 @@ const CSS: &str = r#"
     display: flex;
     gap: 10px;
 }
-#grid_container {
-  /* We first create a flex layout context */
-  display: flex;
-//   width: 600px;
 
-  /* Then we define the flow direction
-     and if we allow the items to wrap
-   * Remember this is the same as:
-   * flex-direction: row;
-   * flex-wrap: wrap;
-   */
-  flex-flow: row wrap;
+div {
+    font-family: sans-serif;
+}
 
-  /* Then we define how is distributed the remaining space */
-  justify-content: space-around;
+h3 {
+    font-size: 2em;
+}
+
+#grid_container {
+  display: grid;
+  grid-template-columns: 100px 1fr 1fr 100px;
+  gap: 10px;
+  padding: 10px;
 }
 
 .floater {