Responsive product grid

Fission

Product

▾

Setup

›

›

Responsive product grid

Use GridTrack::auto_fit plus GridTrack::minmax when cards should create as many columns as fit.

const PRODUCT_CARD_MIN_WIDTH: f32 = 220.0;

let (_ctx, view) = fission::build::current::<CatalogState>();
let spacing = &view.env().theme.tokens.spacing;

Grid {
    columns: vec![GridTrack::auto_fit(GridTrack::minmax(
        GridTrack::Points(PRODUCT_CARD_MIN_WIDTH),
        GridTrack::Fr(1.0),
    ))],
    column_gap: Some(spacing.l),
    row_gap: Some(spacing.l),
    children: products
        .iter()
        .map(|product| ProductCard { product }.into())
        .collect(),
    ..Default::default()
}
.into()

This is usually better than manually calculating column counts from viewport_size().

Responsive product grid

Fission

A cross-platform, GPU-accelerated user interface framework for Rust. MIT licensed.

Ready to use today. Widget APIs are expected to remain stable; some runtime and shell APIs may change before 1.0.0.

GitHub

Quickstart

Reference

Fission 0.9.2