Grid

Component for creating grid layouts.

use radix_yew_themes::Grid;
use yew::prelude::*;

use crate::decorative_box::DecorativeBox;

#[function_component]
pub fn GridExample() -> Html {
    html! {
        <Grid columns=3 gap=3 rows="repeat(2, 64px)" width="auto">
            <DecorativeBox />
            <DecorativeBox />
            <DecorativeBox />
            <DecorativeBox />
            <DecorativeBox />
            <DecorativeBox />
        </Grid>
    }
}

API Reference

TODO

Examples

Responsive

All props marked Responsive, such as columns and rows accept a breakpoint values. For example, the following grid starts with 1 column, and uses 2 columns from the medium breakpoint.

use radix_yew_themes::{Box, Breakpoint, Grid, ResponsiveValues};
use yew::prelude::*;

use crate::decorative_box::DecorativeBox;

#[function_component]
pub fn GridResponsiveExample() -> Html {
    html! {
        <Grid columns={ResponsiveValues::from([(Breakpoint::Initial, 1), (Breakpoint::Md, 2)])} gap=3 width="auto">
            <Box height="64px">
                <DecorativeBox />
            </Box>
            <Box height="64px">
                <DecorativeBox />
            </Box>
        </Grid>
    }
}

See Also