Styling
Grid styling can be customized to fit your needs. Below is a list of the classes you can override.
Placeholder
The default css for the placeholder is:
css
.vue-grid-item.vue-grid-placeholder {
background: red;
opacity: 0.2;
transition-duration: 100ms;
z-index: 2;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
You can override the properties using the !important rule:
css
.vue-grid-item.vue-grid-placeholder {
background: green !important;
}1
2
3
2
3
Or by wrapping your grid with a more specific class:
css
.container .vue-grid-item.vue-grid-placeholder {
background: green;
}1
2
3
2
3
in scoped
css
:deep(.vue-grid-item.vue-grid-placeholder) {
background: green;
}1
2
3
2
3
In this example we change the placeholder background color to green:
vue
<script setup>
import { reactive } from 'vue';
import { GridLayout, GridItem } from 'vue-grid-layout-v3';
const state = reactive({
layout: [
{ x: 0, y: 0, w: 2, h: 2, i: '0', static: false },
{ x: 2, y: 0, w: 2, h: 4, i: '1', static: true },
{ x: 4, y: 0, w: 2, h: 5, i: '2', static: false },
{ x: 6, y: 0, w: 2, h: 3, i: '3', static: false },
{ x: 8, y: 0, w: 2, h: 3, i: '4', static: false },
{ x: 10, y: 0, w: 2, h: 3, i: '5', static: false },
{ x: 0, y: 5, w: 2, h: 5, i: '6', static: false },
{ x: 2, y: 5, w: 2, h: 5, i: '7', static: false },
{ x: 4, y: 5, w: 2, h: 5, i: '8', static: false },
{ x: 6, y: 3, w: 2, h: 4, i: '9', static: true },
{ x: 8, y: 4, w: 2, h: 4, i: '10', static: false },
{ x: 10, y: 4, w: 2, h: 4, i: '11', static: false },
{ x: 0, y: 10, w: 2, h: 5, i: '12', static: false },
{ x: 2, y: 10, w: 2, h: 5, i: '13', static: false },
{ x: 4, y: 8, w: 2, h: 4, i: '14', static: false },
{ x: 6, y: 8, w: 2, h: 4, i: '15', static: false },
{ x: 8, y: 10, w: 2, h: 5, i: '16', static: false },
{ x: 10, y: 4, w: 2, h: 2, i: '17', static: false },
{ x: 0, y: 9, w: 2, h: 3, i: '18', static: false },
{ x: 2, y: 6, w: 2, h: 2, i: '19', static: false },
],
draggable: true,
resizable: true,
});
function itemTitle(item) {
let result = item.i;
if (item.static) {
result += ' - Static';
}
return result;
}
</script>
<template>
<div class="container">
<GridLayout
v-model:layout="state.layout"
:col-num="12"
:row-height="30"
:is-draggable="state.draggable"
:is-resizable="state.resizable"
:vertical-compact="true"
:use-css-transforms="true"
>
<GridItem
v-for="item in state.layout"
:key="item.i"
:static="item.static"
:x="item.x"
:y="item.y"
:w="item.w"
:h="item.h"
:i="item.i"
>
<span class="text">{{itemTitle(item)}}</span>
</GridItem>
</GridLayout>
</div>
</template>
<style scoped>
.container {
:deep(.vue-grid-item.vue-grid-placeholder) {
background: green;
}
.vue-grid-item:not(.vue-grid-placeholder) {
background: #ccc;
border: 1px solid black;
}
.vue-grid-item.static {
background: #cce;
}
.vue-grid-item .text {
font-size: 24px;
text-align: center;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
height: 100%;
width: 100%;
}
}
</style>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
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
Grid lines
To add grid lines to the layout, add the grid class to the grid-layout element and use the css:
css
.grid::before {
content: '';
background-size: calc(calc(100% - 5px) / 12) 40px;
background-image: linear-gradient(
to right,
lightgrey 1px,
transparent 1px
),
linear-gradient(to bottom, lightgrey 1px, transparent 1px);
height: calc(100% - 5px);
width: calc(100% - 5px);
position: absolute;
background-repeat: repeat;
margin:5px;
}1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
CSS calculations for grid lines:
- background size = calc(calc(100% - (margin/2)) / colNum) rowHeight + margin;
- height: calc(100% - (margin/2))
- width: calc(100% - (margin/2))
- margin: margin / 2
vue
<script setup>
import { reactive } from 'vue';
import { GridLayout, GridItem } from 'vue-grid-layout-v3';
const state = reactive({
layout: [
{ x: 0, y: 0, w: 2, h: 2, i: '0', static: false },
{ x: 2, y: 0, w: 2, h: 4, i: '1', static: true },
{ x: 4, y: 0, w: 2, h: 5, i: '2', static: false },
{ x: 6, y: 0, w: 2, h: 3, i: '3', static: false },
{ x: 8, y: 0, w: 2, h: 3, i: '4', static: false },
{ x: 10, y: 0, w: 2, h: 3, i: '5', static: false },
{ x: 0, y: 5, w: 2, h: 5, i: '6', static: false },
{ x: 2, y: 5, w: 2, h: 5, i: '7', static: false },
{ x: 4, y: 5, w: 2, h: 5, i: '8', static: false },
{ x: 6, y: 3, w: 2, h: 4, i: '9', static: true },
{ x: 8, y: 4, w: 2, h: 4, i: '10', static: false },
{ x: 10, y: 4, w: 2, h: 4, i: '11', static: false },
{ x: 0, y: 10, w: 2, h: 5, i: '12', static: false },
{ x: 2, y: 10, w: 2, h: 5, i: '13', static: false },
{ x: 4, y: 8, w: 2, h: 4, i: '14', static: false },
{ x: 6, y: 8, w: 2, h: 4, i: '15', static: false },
{ x: 8, y: 10, w: 2, h: 5, i: '16', static: false },
{ x: 10, y: 4, w: 2, h: 2, i: '17', static: false },
{ x: 0, y: 9, w: 2, h: 3, i: '18', static: false },
{ x: 2, y: 6, w: 2, h: 2, i: '19', static: false },
],
draggable: true,
resizable: true,
margin: [10, 10],
colNum: 12,
rowHeight: 30,
});
function itemTitle(item) {
let result = item.i;
if (item.static) {
result += ' - Static';
}
return result;
}
</script>
<template>
<div class="container">
<GridLayout
class="grid"
v-model:layout="state.layout"
:margin="state.margin"
:col-num="state.colNum"
:row-height="state.rowHeight"
:is-draggable="state.draggable"
:is-resizable="state.resizable"
:vertical-compact="true"
:use-css-transforms="true"
>
<GridItem
v-for="item in state.layout"
:key="item.i"
:static="item.static"
:x="item.x"
:y="item.y"
:w="item.w"
:h="item.h"
:i="item.i"
>
<span class="text">{{ itemTitle(item) }}</span>
</GridItem>
</GridLayout>
</div>
</template>
<style scoped>
.grid::before {
content: '';
background-size: calc(calc(100% - 5px) / 12) 40px;
background-image: linear-gradient(
to right,
lightgrey 1px,
transparent 1px
),
linear-gradient(to bottom, lightgrey 1px, transparent 1px);
height: calc(100% - 5px);
width: calc(100% - 5px);
position: absolute;
background-repeat: repeat;
margin:5px;
}
.vue-grid-layout {
background: #eee;
}
.vue-grid-item:not(.vue-grid-placeholder) {
background: #ccc;
border: 1px solid black;
}
.vue-grid-item.static {
background: #cce;
}
.vue-grid-item .text {
font-size: 24px;
text-align: center;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
height: 100%;
width: 100%;
}
</style>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
100
101
102
103
104
105
106
107
108
109
110
111
112
113
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
100
101
102
103
104
105
106
107
108
109
110
111
112
113