Col()
Creates a responsive column within a grid row. Columns use a 12-column system with breakpoints for different screen sizes.
Syntax
Result = MaterialSB::Col(S, M = 0, L = 0, XL = 0, Flags = #Grid_Default, Parent = #Null)Parameters
| Parameter | Description |
|---|---|
S |
Column width (1-12) for small screens (≤600px). Required. |
M |
(Optional) Column width for medium screens (601-992px). 0 = inherit from S. |
L |
(Optional) Column width for large screens (993-1200px). 0 = inherit from M. |
XL |
(Optional) Column width for extra-large screens (>1200px). 0 = inherit from L. |
Flags |
(Optional) Grid flags. |
Parent |
(Optional) Parent element. Uses current parent if #Null. |
Breakpoints
| Size | Screen Width | Typical Devices |
|---|---|---|
| S (Small) | ≤600px | Phones (portrait) |
| M (Medium) | 601-992px | Tablets, phones (landscape) |
| L (Large) | 993-1200px | Laptops, small desktops |
| XL (Extra Large) | >1200px | Large desktops, TVs |
Return Value
Returns the column DOM element. This element is pushed onto the parent stack.
Remarks
Col() pushes to the parent stack. Call CloseCurrentParent() when finished adding content.
Column widths should add up to 12 within a row. For example: three columns of width 4, or one column of 8 and one of 4.
Example
MaterialSB::Row(MaterialSB::#Grid_Container)
; Full width on small, half on medium, third on large
MaterialSB::Col(12, 6, 4)
MaterialSB::Append(MaterialSB::Paragraph("Responsive column 1"))
MaterialSB::CloseCurrentParent()
MaterialSB::Col(12, 6, 4)
MaterialSB::Append(MaterialSB::Paragraph("Responsive column 2"))
MaterialSB::CloseCurrentParent()
MaterialSB::Col(12, 12, 4)
MaterialSB::Append(MaterialSB::Paragraph("Responsive column 3"))
MaterialSB::CloseCurrentParent()
MaterialSB::CloseCurrentParent()
; Sidebar layout: main content + sidebar
MaterialSB::Row(MaterialSB::#Grid_Container)
MaterialSB::Col(12, 8) ; Main content
MaterialSB::Append(MaterialSB::Header("Main Content", 2))
MaterialSB::CloseCurrentParent()
MaterialSB::Col(12, 4) ; Sidebar
MaterialSB::Append(MaterialSB::Header("Sidebar", 4))
MaterialSB::CloseCurrentParent()
MaterialSB::CloseCurrentParent()