Custom-Grid-WebComponent/griddemo.html at master · ariful19/Custom-Grid-WebComponent · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <c-grid cols-md='5' cols-sm='1' style="height: 400px;width: 100%">
        <div cols-md='1 / 2' rows-md='1 / 2' cols-sm='1' rows-sm='1 / 2' style="background-color: rgba(255, 0, 0, 0.253);"> div1</div>
        <div cols-md='2 / 5' rows-md='2 / 4' cols-sm='1' rows-sm='2 / 4' style="background-color: rgba(128, 128, 128, 0.267);height:5em;z-index: 1;">div2</div>
        <div cols-md='1 / 6' rows-md='2 / 5' cols-sm='1' rows-sm='4 / 5' style="background-color: rgba(255, 255, 0, 0.384);">div3</div>
        <div cols-md='2 / 6' rows-md='1 / 4' style="background-color: rgba(0, 183, 255, 0.384);">
            <c-grid cols-md='3' style="height: 100%;width: 100%">
                <div cols-md='1' rows-md='1' style="background-color: red">inner 1</div>
                <div cols-md='2' rows-md='2' style="background-color: green">inner 3</div>
                <div cols-md='3' rows-md='3' style="background-color: blue">inner 2</div>
            </c-grid>
        </div>
        <div cols-md='3 / 6' rows-md='4 / 4' cols-sm='1' rows-sm='5 / 6' style="background-color: rgba(0, 255, 64, 0.384);">div5</div>
    </c-grid>
    <script src="./polyfill.js"></script>
    <script src="./components/grid.js"></script>
</body>

</html>