guise/layout/
grid.rs

1//! `SimpleGrid` — equal-width columns that wrap into rows.
2//!
3//! gpui's flexbox has no CSS-grid track system, so this lays children out as a
4//! column of flex rows, each holding up to `cols` equal-weight cells. The final
5//! row is padded with empty cells so columns stay aligned.
6
7use gpui::prelude::*;
8use gpui::{div, px, relative, AnyElement, App, IntoElement, Window};
9
10use crate::devtools::Probed;
11use crate::theme::{theme, Size};
12
13/// A responsive-feeling fixed-column grid. `SimpleGrid::new(3).spacing(Size::Md)`.
14#[derive(IntoElement)]
15pub struct SimpleGrid {
16  children: Vec<AnyElement>,
17  cols: usize,
18  spacing: Size,
19}
20
21impl SimpleGrid {
22  pub fn new(cols: usize) -> Self {
23    SimpleGrid {
24      children: Vec::new(),
25      cols: cols.max(1),
26      spacing: Size::Md,
27    }
28  }
29
30  pub fn spacing(mut self, spacing: Size) -> Self {
31    self.spacing = spacing;
32    self
33  }
34}
35
36impl ParentElement for SimpleGrid {
37  fn extend(&mut self, elements: impl IntoIterator<Item = AnyElement>) {
38    self.children.extend(elements);
39  }
40}
41
42/// One equal-weight grid cell.
43fn cell() -> gpui::Div {
44  div().flex_grow().flex_shrink().flex_basis(relative(0.0))
45}
46
47impl RenderOnce for SimpleGrid {
48  fn render(self, _window: &mut Window, cx: &mut App) -> impl IntoElement {
49    let gap = theme(cx).spacing(self.spacing);
50    let cols = self.cols;
51
52    let mut column = div().flex().flex_col().gap(px(gap));
53    let mut iter = self.children.into_iter();
54    loop {
55      let mut row_cells: Vec<AnyElement> = Vec::with_capacity(cols);
56      for _ in 0..cols {
57        match iter.next() {
58          Some(child) => row_cells.push(cell().child(child).into_any_element()),
59          None => break,
60        }
61      }
62      if row_cells.is_empty() {
63        break;
64      }
65      // Pad the final short row so columns line up.
66      while row_cells.len() < cols {
67        row_cells.push(cell().into_any_element());
68      }
69      column = column.child(div().flex().flex_row().gap(px(gap)).children(row_cells));
70    }
71    column.probe("SimpleGrid")
72  }
73}
guise/layout/grid.rs

guise/layout/
grid.rs
