AreaGrid

The grid creates an instance of the AreaGrid element, designed to organize child elements in a grid layout.

let elements = [
  {
    type: "grid"
  }
];

In set method of this class, we can use the gap property to set gap within the grid. The react method allows the grid to respond to breakpoints and dynamically adjust its layout.

Arguments:

| Argument  | Description |
|-----------|-------------|
| `at`      | The breakpoint (in pixels) at which this template becomes active. |
| `template`| An array of strings defining the grid areas for this breakpoint. Each character represents a grid area. |
| `color`   | (Optional) Sets the color of the grid items at this breakpoint. |

In Wrapper class, in this example we can use the mc property sets the height to max-content.

mc: true means sets this css element height to max-content.

 new AreaGrid()
    .set({
        gap: "1rem"
    })
    .react([{
            at: "0px",
            template: [
                "eeeeee",
                "eeeeee",
                "abbbbb",
                "abbbbb",
                "abbbbb",
                "cccccc",
                "cccccc",
                "dddddd"
            ]
        },

        {
            at: "900px",
            color: "orange",
            template: [
                "aaaccc",
                "aaaccc",
                "bbbbbb",
                "dddddd",
                "eeeeee"
            ]
        },

        {
            at: "1200px",
            color: "purple",
            template: [
                "cccaaa",
                "cccaaa",
                "bbbbbb",
                "dddddd",
                "eeeeee"
            ]
        },
    ])
    .add([
        new Wrapper().set({
            mc: true,
            pad: [{
                a: 20
            }],
            background: "#ecf0f1",
            radius: "1.7rem"
        }).add([
            new Text("NEW PRODUCT").set({
                exact: "1rem",
                font: "Oswald",
                width: "100%"
            }),
            new Text("Feel").set({
                fluidc: "S2",
                font: "Oswald",
                width: "100%",
                color: "black"
            }),
            new Text("Speed").set({
                exact: "7rem",
                font: "Oswald",
                width: "100%",
                color: "#3498db"
            }),
        ]),

        new Wrapper().set({
            mc: true,
            pad: [{
                a: 20
            }],
            background: "#ecf0f1",
            radius: "1.7rem"
        }).add([
            new Text("TOP QUALITY").set({
                exact: "1rem",
                font: "Oswald",
                width: "100%"
            }),
            new Text("You can count on it").set({
                fluidc: "S2",
                font: "Oswald",
                width: "100%",
                color: "black"
            }),

            new Text("Experience the thrill of open water swimming with our exceptional performance. So whether you’re participating in a triathlon or simply enjoying a leisurely swim, you can trust our wetsuits to enhance your performance and elevate your experience.So why wait? Dive into your next open water adventure with our top-of-the-line wetsuits. Make waves, set new records, and explore the uncharted depths of the ocean with confidence and style. Experience the difference today with our exceptional wetsuits!")
            .set({
                font: "Arial",
                exact: "1.3rem"
            })

        ]),

        new Wrapper().set({
            mc: true,

            radius: "1.7rem",
            overflow: "hidden"

        }).add([

            new Image("https://www.blueseventy.com/cdn/shop/files/23-home-size2.jpg?v=1684272215&width=3840", "exact").set({
                width: "100%",
                height: "420px",
                minHeight: "100px",
                objectFit: "cover"

            })
        ]),

        new Wrapper().set({
            mc: true,
            pad: [{
                a: 20
            }],
            background: "#ecf0f1",
            radius: "1.7rem",
        }).add([
            new Text("You won't miss with Blue70").set({
                fluidc: "S3",
                font: "Oswald",
                color: "black"
            }),
            new Text("Yea")
            .set({
                font: "Arial",
                exact: "1.3rem"
            })
        ]),
        new Wrapper().set({
            mc: true,
            pad: [{
                a: 20
            }],
            background: "#ecf0f1",
            radius: "1.7rem",

        }).add([new Text("Hello").set({
            font: "Arial",
            exact: "1.3rem"
        }), ]),
    ]).render("#mount");