thaw/demo_markdown/docs/grid/mod.md

Grid

use leptos_meta::Style;

view! {
    <Space vertical=true>
        <Grid>
            <GridItem>"123"</GridItem>
            <GridItem>"456"</GridItem>
            <GridItem>"789"</GridItem>
        </Grid>

        <Grid cols=2>
            <GridItem>"123"</GridItem>
            <GridItem>"456"</GridItem>
            <GridItem>"789"</GridItem>
        </Grid>
    </Space>
    <Style>
        ".thaw-grid-item {
            height: 60px;
            text-align: center;
            line-height: 60px;
        }
        .thaw-grid-item:nth-child(odd) {
            background-color: #0078ff88;
        }
        .thaw-grid-item:nth-child(even) {
            background-color: #0078ffaa;
        }"
    </Style>
}

Gap

use leptos_meta::Style;

view! {
    <Grid cols=3 x_gap=8 y_gap=8>
        <GridItem>"123"</GridItem>
        <GridItem>"321"</GridItem>
        <GridItem>"123"</GridItem>
        <GridItem>"456"</GridItem>
        <GridItem>"7"</GridItem>
        <GridItem>"123"</GridItem>
        <GridItem>"123"</GridItem>
        <GridItem column=2>"1234"</GridItem>
        <GridItem>"567"</GridItem>
        <GridItem>"567"</GridItem>
    </Grid>
    <Style>
        ".thaw-grid-item {
            height: 60px;
            text-align: center;
            line-height: 60px;
        }
        .thaw-grid-item:nth-child(odd) {
            background-color: #0078ff88;
        }
        .thaw-grid-item:nth-child(even) {
            background-color: #0078ffaa;
        }"
    </Style>
}

Offset

use leptos_meta::Style;

view! {
    <Grid cols=4>
        <GridItem offset=2>"123"</GridItem>
        <GridItem>"456"</GridItem>
    </Grid>
    <Style>
        ".thaw-grid-item {
            height: 60px;
            text-align: center;
            line-height: 60px;
        }
        .thaw-grid-item:nth-child(odd) {
            background-color: #0078ff88;
        }
        .thaw-grid-item:nth-child(even) {
            background-color: #0078ffaa;
        }"
    </Style>
}

Grid Props

Name	Type	Default	Desciption
class	OptionalProp<MaybeSignal<String>>	Default::default()	Addtional classes for the grid element.
cols	MaybeSignal<u16>	1	Number of grids displayed.
x_gap	MaybeSignal<u16>	0	Horizontal gap.
y_gap	MaybeSignal<u16>	0	Vertical gap.

GridItem Props

Name	Type	Default	Desciption
class	OptionalProp<MaybeSignal<String>>	Default::default()	Addtional classes for the grid item element.
column	MaybeSignal<u16>	1	Number of columns this grid item will occupy.
offset	MaybeSignal<u16>	0	Horizontal offset.