Bento Grid
Rust UI component that displays a grid of cards.
grid
Demos
1. Bento Grid 4
Variant 1
1
2
3
4
Variant 2
1
2
3
4
Variant 3
1
2
3
4
Variant 4
1
2
3
4
use leptos::prelude::*;
use crate::components::ui::bento_grid::{BentoCell, BentoGrid, BentoRow};
use crate::components::ui::headings::H4;
#[component]
pub fn DemoBentoGrid4() -> impl IntoView {
view! {
<div class="flex flex-col gap-6 py-4 w-full max-w-[800px]">
<Variant1 />
<Variant2 />
<Variant3 />
<Variant4 />
</div>
}
}
/*´:°•.°+.*•´.*:˚.°*.˚•´.°:°•.°•.*•´.*:˚.°*.˚•´.°:°•.°+.*•´.*:*/
/* ✨ FUNCTIONS ✨ */
/*.•°:°.´+˚.*°.˚:*.´•*.+°.•°:´*.´•*.•°.•°:°.´:•˚°.*°.˚:*.´+°.•*/
#[component]
pub fn Variant1() -> impl IntoView {
view! {
<div>
<H4>Variant 1</H4>
<BentoGrid>
<BentoRow class="md:col-span-3">
<BentoCell>1</BentoCell>
</BentoRow>
<BentoRow class="">
<BentoCell>2</BentoCell>
</BentoRow>
<BentoRow class="md:col-start-1">
<BentoCell>3</BentoCell>
</BentoRow>
<BentoRow class="md:col-span-4 md:col-start-2">
<BentoCell>4</BentoCell>
</BentoRow>
</BentoGrid>
</div>
}
}
#[component]
pub fn Variant2() -> impl IntoView {
view! {
<div>
<H4>Variant 2</H4>
<BentoGrid>
<BentoRow class="md:col-span-3">
<BentoCell>1</BentoCell>
</BentoRow>
<BentoRow class="">
<BentoCell>2</BentoCell>
</BentoRow>
<BentoRow class="md:col-span-2">
<BentoCell>3</BentoCell>
</BentoRow>
<BentoRow class="md:col-span-2">
<BentoCell>4</BentoCell>
</BentoRow>
</BentoGrid>
</div>
}
}
#[component]
pub fn Variant3() -> impl IntoView {
view! {
<div>
<H4>Variant 3</H4>
<BentoGrid>
<BentoRow class="md:col-start-1">
<BentoCell>1</BentoCell>
</BentoRow>
<BentoRow class="md:col-span-2">
<BentoCell>2</BentoCell>
</BentoRow>
<BentoRow class="md:col-start-4">
<BentoCell>3</BentoCell>
</BentoRow>
<BentoRow class="md:col-span-4">
<BentoCell>4</BentoCell>
</BentoRow>
</BentoGrid>
</div>
}
}
#[component]
pub fn Variant4() -> impl IntoView {
view! {
<div>
<H4>Variant 4</H4>
<BentoGrid>
<BentoRow class="md:col-span-3 md:row-span-4 md:h-full">
<BentoCell>1</BentoCell>
</BentoRow>
<BentoRow class="md:col-start-4">
<BentoCell>2</BentoCell>
</BentoRow>
<BentoRow class="md:col-start-4">
<BentoCell>3</BentoCell>
</BentoRow>
<BentoRow class="md:col-start-4">
<BentoCell>4</BentoCell>
</BentoRow>
</BentoGrid>
</div>
}
}
2. Bento Grid 5
Variant 1
1
2
3
4
5
Variant 2
1
2
3
4
5
Variant 3
1
2
3
4
5
Variant 4
1
2
3
4
5
use leptos::prelude::*;
use crate::components::ui::bento_grid::{BentoCell, BentoGrid, BentoRow};
use crate::components::ui::headings::H4;
#[component]
pub fn DemoBentoGrid5() -> impl IntoView {
view! {
<div class="flex flex-col gap-6 py-4 w-full max-w-[800px]">
<Variant1 />
<Variant2 />
<Variant3 />
<Variant4 />
</div>
}
}
/*´:°•.°+.*•´.*:˚.°*.˚•´.°:°•.°•.*•´.*:˚.°*.˚•´.°:°•.°+.*•´.*:*/
/* ✨ FUNCTIONS ✨ */
/*.•°:°.´+˚.*°.˚:*.´•*.+°.•°:´*.´•*.•°.•°:°.´:•˚°.*°.˚:*.´+°.•*/
#[component]
pub fn Variant1() -> impl IntoView {
view! {
<div>
<H4>Variant 1</H4>
<BentoGrid>
<BentoRow class="md:col-start-1">
<BentoCell>1</BentoCell>
</BentoRow>
<BentoRow class="md:col-span-2">
<BentoCell>2</BentoCell>
</BentoRow>
<BentoRow class="md:col-start-4">
<BentoCell>3</BentoCell>
</BentoRow>
<BentoRow class="md:col-span-2">
<BentoCell>4</BentoCell>
</BentoRow>
<BentoRow class="md:col-span-2">
<BentoCell>5</BentoCell>
</BentoRow>
</BentoGrid>
</div>
}
}
#[component]
pub fn Variant2() -> impl IntoView {
view! {
<div>
<H4>Variant 2</H4>
<BentoGrid>
<BentoRow class="md:col-span-2">
<BentoCell>1</BentoCell>
</BentoRow>
<BentoRow class="md:col-span-2">
<BentoCell>2</BentoCell>
</BentoRow>
<BentoRow class="md:col-span-4">
<BentoCell>3</BentoCell>
</BentoRow>
<BentoRow class="md:col-span-2">
<BentoCell>4</BentoCell>
</BentoRow>
<BentoRow class="md:col-span-2">
<BentoCell>5</BentoCell>
</BentoRow>
</BentoGrid>
</div>
}
}
#[component]
pub fn Variant3() -> impl IntoView {
view! {
<div>
<H4>Variant 3</H4>
<div class="grid gap-2 sm:grid-cols-2 md:grid-cols-9">
<BentoRow class="md:col-span-5">
<BentoCell>1</BentoCell>
</BentoRow>
<BentoRow class="md:col-span-4">
<BentoCell>2</BentoCell>
</BentoRow>
<BentoRow class="md:col-span-3">
<BentoCell>3</BentoCell>
</BentoRow>
<BentoRow class="md:col-span-3">
<BentoCell>4</BentoCell>
</BentoRow>
<BentoRow class="md:col-span-3">
<BentoCell>5</BentoCell>
</BentoRow>
</div>
</div>
}
}
#[component]
pub fn Variant4() -> impl IntoView {
view! {
<div>
<H4>Variant 4</H4>
<BentoGrid>
<BentoRow class="">
<BentoCell>1</BentoCell>
</BentoRow>
<BentoRow class="md:col-span-2 md:row-span-2 md:h-full">
<BentoCell>2</BentoCell>
</BentoRow>
<BentoRow class="">
<BentoCell>3</BentoCell>
</BentoRow>
<BentoRow class="">
<BentoCell>4</BentoCell>
</BentoRow>
<BentoRow class="md:col-start-4">
<BentoCell>5</BentoCell>
</BentoRow>
</BentoGrid>
</div>
}
}
3. Bento Grid 6
Variant 1
1
2
3
4
5
6
Variant 2
1
2
3
4
5
6
Variant 3
1
2
3
4
5
6
Variant 4
1
2
3
4
5
6
use leptos::prelude::*;
use crate::components::ui::bento_grid::{BentoCell, BentoGrid6, BentoRow};
use crate::components::ui::headings::H4;
#[component]
pub fn DemoBentoGrid6() -> impl IntoView {
view! {
<div class="flex flex-col gap-6 py-4 w-full max-w-[800px]">
<Variant1 />
<Variant2 />
<Variant3 />
<Variant4 />
</div>
}
}
/*´:°•.°+.*•´.*:˚.°*.˚•´.°:°•.°•.*•´.*:˚.°*.˚•´.°:°•.°+.*•´.*:*/
/* ✨ FUNCTIONS ✨ */
/*.•°:°.´+˚.*°.˚:*.´•*.+°.•°:´*.´•*.•°.•°:°.´:•˚°.*°.˚:*.´+°.•*/
#[component]
pub fn Variant1() -> impl IntoView {
view! {
<div>
<H4>Variant 1</H4>
<BentoGrid6>
<BentoRow class="">
<BentoCell>1</BentoCell>
</BentoRow>
<BentoRow class="md:col-span-2 md:row-span-2 md:h-full">
<BentoCell>2</BentoCell>
</BentoRow>
<BentoRow class="">
<BentoCell>3</BentoCell>
</BentoRow>
<BentoRow class="">
<BentoCell>4</BentoCell>
</BentoRow>
<BentoRow class="md:col-start-4">
<BentoCell>5</BentoCell>
</BentoRow>
<BentoRow class="md:col-span-4">
<BentoCell>6</BentoCell>
</BentoRow>
</BentoGrid6>
</div>
}
}
#[component]
pub fn Variant2() -> impl IntoView {
view! {
<div>
<H4>Variant 2</H4>
<BentoGrid6>
<div class="row-span-2 p-1 h-full rounded-lg">
<BentoCell>1</BentoCell>
</div>
<BentoRow class="">
<BentoCell>2</BentoCell>
</BentoRow>
<div class="row-span-2 p-1 h-full rounded-lg">
<BentoCell>3</BentoCell>
</div>
<BentoRow class="">
<BentoCell>4</BentoCell>
</BentoRow>
<BentoRow class="">
<BentoCell>5</BentoCell>
</BentoRow>
<BentoRow class="">
<BentoCell>6</BentoCell>
</BentoRow>
</BentoGrid6>
</div>
}
}
#[component]
pub fn Variant3() -> impl IntoView {
view! {
<div>
<H4>Variant 3</H4>
<BentoGrid6>
<BentoRow class="">
<BentoCell>1</BentoCell>
</BentoRow>
<BentoRow class="">
<BentoCell>2</BentoCell>
</BentoRow>
<div class="col-span-2 p-1 h-32 rounded-lg">
<BentoCell>3</BentoCell>
</div>
<div class="col-span-2 p-1 h-32 rounded-lg">
<BentoCell>4</BentoCell>
</div>
<BentoRow class="">
<BentoCell>5</BentoCell>
</BentoRow>
<BentoRow class="">
<BentoCell>6</BentoCell>
</BentoRow>
</BentoGrid6>
</div>
}
}
#[component]
pub fn Variant4() -> impl IntoView {
view! {
<div>
<H4>Variant 4</H4>
<div class="grid gap-2 sm:grid-cols-2 md:grid-cols-6">
<BentoRow class="md:col-span-3">
<BentoCell>1</BentoCell>
</BentoRow>
<BentoRow class="md:col-span-3">
<BentoCell>2</BentoCell>
</BentoRow>
<BentoRow class="md:col-span-4">
<BentoCell>3</BentoCell>
</BentoRow>
<BentoRow class="md:col-span-2">
<BentoCell>4</BentoCell>
</BentoRow>
<BentoRow class="md:col-span-2">
<BentoCell>5</BentoCell>
</BentoRow>
<BentoRow class="md:col-span-4">
<BentoCell>6</BentoCell>
</BentoRow>
</div>
</div>
}
}
Installation
You can run either of the following commands:
# cargo install ui-cli --forceui add demo_bento_gridui add bento_gridUpdate the imports to match your project setup.
Copy and paste the following code into your project:
components/ui/bento_grid.rs
use leptos::prelude::*;
use leptos_ui::clx;
mod components {
use super::*;
clx! {BentoGrid, div, "grid gap-2 md:grid-cols-4"}
clx! {BentoGrid6, div, "grid gap-2 sm:grid-cols-2 md:grid-cols-4"}
clx! {BentoRow, div, "p-1 min-h-32 rounded-lg"}
clx! {BentoCell, div, "text-xl rounded-lg size-full center bg-zinc-200 dark:bg-zinc-700"}
}
pub use components::*;
Update the imports to match your project setup.
Usage
// Coming soon 🦀