whisker_css/prop/
grid.rs

1//! CSS Grid properties.
2
3use crate::css::Css;
4use crate::data_type::LengthPercentage;
5use crate::keyword::GridAutoFlow;
6use crate::value::{GridLine, GridTemplate};
7
8impl Css {
9    /// Sets `grid-template-rows` — track-sizing along the block axis.
10    /// <https://lynxjs.org/api/css/properties/grid-template-rows>
11    pub fn grid_template_rows(self, v: GridTemplate) -> Self {
12        self.push("grid-template-rows", v)
13    }
14
15    /// Sets `grid-template-columns` — track-sizing along the inline axis.
16    /// <https://lynxjs.org/api/css/properties/grid-template-columns>
17    pub fn grid_template_columns(self, v: GridTemplate) -> Self {
18        self.push("grid-template-columns", v)
19    }
20
21    /// Sets `grid-auto-rows`.
22    /// <https://lynxjs.org/api/css/properties/grid-auto-rows>
23    pub fn grid_auto_rows(self, v: GridTemplate) -> Self {
24        self.push("grid-auto-rows", v)
25    }
26
27    /// Sets `grid-auto-columns`.
28    /// <https://lynxjs.org/api/css/properties/grid-auto-columns>
29    pub fn grid_auto_columns(self, v: GridTemplate) -> Self {
30        self.push("grid-auto-columns", v)
31    }
32
33    /// Sets `grid-auto-flow`.
34    /// <https://lynxjs.org/api/css/properties/grid-auto-flow>
35    pub fn grid_auto_flow(self, v: GridAutoFlow) -> Self {
36        self.push("grid-auto-flow", v)
37    }
38
39    /// Sets `grid-row-start`.
40    /// <https://lynxjs.org/api/css/properties/grid-row-start>
41    pub fn grid_row_start(self, v: GridLine) -> Self {
42        self.push("grid-row-start", v)
43    }
44
45    /// Sets `grid-row-end`.
46    /// <https://lynxjs.org/api/css/properties/grid-row-end>
47    pub fn grid_row_end(self, v: GridLine) -> Self {
48        self.push("grid-row-end", v)
49    }
50
51    /// Sets `grid-column-start`.
52    /// <https://lynxjs.org/api/css/properties/grid-column-start>
53    pub fn grid_column_start(self, v: GridLine) -> Self {
54        self.push("grid-column-start", v)
55    }
56
57    /// Sets `grid-column-end`.
58    /// <https://lynxjs.org/api/css/properties/grid-column-end>
59    pub fn grid_column_end(self, v: GridLine) -> Self {
60        self.push("grid-column-end", v)
61    }
62
63    /// Sets `grid-row-gap` (legacy alias for `row-gap`).
64    /// <https://lynxjs.org/api/css/properties/grid-row-gap>
65    pub fn grid_row_gap(self, v: impl Into<LengthPercentage>) -> Self {
66        self.push("grid-row-gap", v.into())
67    }
68
69    /// Sets `grid-column-gap` (legacy alias for `column-gap`).
70    /// <https://lynxjs.org/api/css/properties/grid-column-gap>
71    pub fn grid_column_gap(self, v: impl Into<LengthPercentage>) -> Self {
72        self.push("grid-column-gap", v.into())
73    }
74}
75
76#[cfg(test)]
77mod tests {
78    use crate::ext::*;
79    use crate::keyword::GridAutoFlow;
80    use crate::value::{GridLine, GridTemplate};
81    use crate::Css;
82
83    #[test]
84    fn template_rows_and_columns() {
85        let s = Css::new()
86            .grid_template_rows(GridTemplate::tracks(["auto", "1fr"]))
87            .grid_template_columns(GridTemplate::tracks(["1fr", "2fr"]));
88        assert_eq!(
89            s.to_string(),
90            "grid-template-rows: auto 1fr; grid-template-columns: 1fr 2fr;"
91        );
92    }
93
94    #[test]
95    fn auto_rows_columns_flow() {
96        let s = Css::new()
97            .grid_auto_rows(GridTemplate::tracks(["minmax(100px, auto)"]))
98            .grid_auto_columns(GridTemplate::tracks(["50px"]))
99            .grid_auto_flow(GridAutoFlow::ColumnDense);
100        assert_eq!(
101            s.to_string(),
102            "grid-auto-rows: minmax(100px, auto); grid-auto-columns: 50px; grid-auto-flow: column dense;"
103        );
104    }
105
106    #[test]
107    fn grid_lines_for_item() {
108        let s = Css::new()
109            .grid_row_start(GridLine::Number(1))
110            .grid_row_end(GridLine::Span(2))
111            .grid_column_start(GridLine::Auto)
112            .grid_column_end(GridLine::Number(-1));
113        assert_eq!(
114            s.to_string(),
115            "grid-row-start: 1; grid-row-end: span 2; grid-column-start: auto; grid-column-end: -1;"
116        );
117    }
118
119    #[test]
120    fn grid_gaps_legacy() {
121        let s = Css::new().grid_row_gap(px(8)).grid_column_gap(px(12));
122        assert_eq!(s.to_string(), "grid-row-gap: 8px; grid-column-gap: 12px;");
123    }
124}
whisker_css/prop/grid.rs

whisker_css/prop/
grid.rs
