Usage
The PageGrid component provides a responsive grid layout for displaying PageCard components or any other elements, automatically adjusting from 1 to 3 columns based on screen size.
Online workspace for the whole team
Through its wide variety of communication and collaboration tools, Bitrix24 enables teams to work efficiently and smoothly wherever they are – at home, in the office, or on the go.
You can also use it to display a list of cards in a bento style layout by using col-span-* and row-span-* utility classes.
Online workspace for the whole team
Through its wide variety of communication and collaboration tools, Bitrix24 enables teams to work efficiently and smoothly wherever they are – at home, in the office, or on the go.
Free CRM software for your business
Sell more. Sell better. Sell faster with Bitrix24 a single platform to cover all your needs.
API
Props
Slots
Theme
app.config.ts
export default defineAppConfig({
b24ui: {
pageGrid: {
base: 'relative grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8'
}
}
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import bitrix24UIPluginVite from '@bitrix24/b24ui-nuxt/vite'
export default defineConfig({
plugins: [
vue(),
bitrix24UIPluginVite({
b24ui: {
pageGrid: {
base: 'relative grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8'
}
}
})
]
})