django-vue3-admin-web/node_modules/vue-grid-layout/website/docs/guide/styling.md
2025-10-20 21:21:14 +08:00

1.1 KiB

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:

.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;
}  

You can override the properties using the !important rule:

.vue-grid-item.vue-grid-placeholder {
    background: green !important;
}

Or by wrapping your grid with a more specific class:

.container .vue-grid-item.vue-grid-placeholder {
    background: green;
}

In this example we change the placeholder background color to green:

View source

Work in progress...