-
Notifications
You must be signed in to change notification settings - Fork 66
/
tilelayout.html
99 lines (98 loc) · 4.73 KB
/
tilelayout.html
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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<!doctype html>
<html lang="en" class="k-typography k-no-animations">
<head>
<title>Tile Layout</title>
<meta charset="utf-8" />
<link rel="stylesheet" data-role="kendo-theme" href="../../packages/default/dist/all.css" />
<link rel="stylesheet" href="assets/styles.css" />
<script src="assets/scripts.js"></script>
</head>
<body>
<div id="test-area">
<div id="tilelayout" class="k-widget k-tilelayout" style="grid-template-columns: repeat(5, minmax(0px, 1fr)); grid-template-rows: repeat(5, minmax(0px, 1fr)); gap: 16px; width: 1000px; padding: 16px;">
<div class="k-tilelayout-item k-card" style="order: 0; grid-column-end: span 1; grid-row-end: span 1;">
<div class="k-tilelayout-item-header k-card-header">
Title goes here
</div>
<div class="k-tilelayout-item-body k-card-body">
Content goes here
</div>
</div>
<div class="k-tilelayout-item k-card" style="order: 1; grid-column-end: span 1; grid-row-end: span 1;">
<div class="k-tilelayout-item-header k-card-header">
Title goes here
</div>
<div class="k-tilelayout-item-body k-card-body">
Content goes here
</div>
</div>
<div class="k-tilelayout-item k-card" style="order: 2;grid-column-end: span 1;grid-row-end: span 2; width: 250px; position: absolute; height: 198px;left: 430px;">
<div class="k-tilelayout-item-header k-card-header">
Title goes here
</div>
<div class="k-tilelayout-item-body k-card-body">
Content goes here
</div>
</div>
<div class="k-resize-handle k-cursor-ew-resize" style="top: 36px; left: 674px; height: 196px; width: 9px;"></div>
<div class="k-layout-item-hint k-layout-item-hint-resize" style="order: 2;grid-column-end: span 2;grid-row-end: span 2;"></div>
<div class="k-tilelayout-item k-card" style="order: 3; grid-column-end: span 1; grid-row-end: span 1;">
<div class="k-tilelayout-item-header k-card-header">
Title goes here
</div>
<div class="k-tilelayout-item-body k-card-body">
Content goes here
</div>
</div>
<div class="k-tilelayout-item k-card" style="order: 4; grid-column-end: span 1; grid-row-end: span 2;">
<div class="k-tilelayout-item-header k-card-header">
Title goes here
</div>
<div class="k-tilelayout-item-body k-card-body">
Content goes here
</div>
</div>
<div class="k-tilelayout-item k-card" style="order: 5; grid-column-end: span 1; grid-row-end: span 1;">
<div class="k-tilelayout-item-header k-card-header">
Title goes here
</div>
<div class="k-tilelayout-item-body k-card-body">
Content goes here
</div>
</div>
<div class="k-tilelayout-item k-card" style="order: 6; grid-column-end: span 1; grid-row-end: span 1;">
<div class="k-tilelayout-item-header k-card-header">
Title goes here
</div>
<div class="k-tilelayout-item-body k-card-body">
Content goes here
</div>
</div>
<div class="k-tilelayout-item k-card" style="order: 7; grid-column-end: span 1; grid-row-end: span 2;">
<div class="k-tilelayout-item-header k-card-header">
Title goes here
</div>
<div class="k-tilelayout-item-body k-card-body">
Content goes here
</div>
</div>
<div class="k-tilelayout-item k-card" style="order: 8; grid-column-end: span 1; grid-row-end: span 1;">
<div class="k-tilelayout-item-header k-card-header">
Title goes here
</div>
<div class="k-tilelayout-item-body k-card-body">
Content goes here
</div>
</div>
<div class="k-tilelayout-item k-card" style="order: 9; grid-column-end: span 1; grid-row-end: span 2;">
<div class="k-tilelayout-item-header k-card-header">
Title goes here
</div>
<div class="k-tilelayout-item-body k-card-body">
Content goes here
</div>
</div>
</div>
</div>
</body>
</html>