The b.Grid
constructor creates a smart grid.
| Modifier | Action |
|---|---|
b.ColMin(1) to b.ColMin(12) | Set minimum column width to 1.5rem, 3rem, 4.5rem, 6rem, 7.5rem, 9rem, 10.5rem, 12rem, 13.5rem, 15rem, 16.5rem or 18rem |
b.Gap(0) to b.Gap(8) with 0.5 steps | Set gap to 0, 0.25rem, 0.5rem, 0.75rem, 1rem, 1.25rem, 1.5rem, 1.75rem, 2rem, 2.25rem, 2.5rem, 2.75rem, 3rem, 3.25rem, 3.5rem, 3.75rem or 4rem |
b.ColGap(0) to b.ColGap(8) with 0.5 steps | Set column gap to 0, 0.25rem, 0.5rem, 0.75rem, 1rem, 1.25rem, 1.5rem, 1.75rem, 2rem, 2.25rem, 2.5rem, 2.75rem, 3rem, 3.25rem, 3.5rem, 3.75rem or 4rem |
b.RowGap(0) to b.RowGap(8) with 0.5 steps | Set row gap to 0, 0.25rem, 0.5rem, 0.75rem, 1rem, 1.25rem, 1.5rem, 1.75rem, 2rem, 2.25rem, 2.5rem, 2.75rem, 3rem, 3.25rem, 3.5rem, 3.75rem or 4rem |
| Child | Action |
|---|---|
b.Cell(...any) | Add cell to the <div class="grid"> element |
e.Element | Wrap element in a cell and add it to the <div class="grid"> element |
gomponents.Nodeof type gomponents.AttributeType | Apply attribute to the <div class="grid"> element |
gomponents.Nodeof type gomponents.ElementType | Wrap element in a cell and add it to the <div class="grid"> element |
| Anything else | Apply child to the <div class="grid"> element |
The b.FixedGrid
constructor creates a fixed grid.
| Modifier | Action |
|---|---|
b.ColMin(1) to b.ColMin(12) | Set minimum column width to 1.5rem, 3rem, 4.5rem, 6rem, 7.5rem, 9rem, 10.5rem, 12rem, 13.5rem, 15rem, 16.5rem or 18rem |
b.Gap(0) to b.Gap(8) with 0.5 steps | Set gap to 0, 0.25rem, 0.5rem, 0.75rem, 1rem, 1.25rem, 1.5rem, 1.75rem, 2rem, 2.25rem, 2.5rem, 2.75rem, 3rem, 3.25rem, 3.5rem, 3.75rem or 4rem |
b.ColGap(0) to b.ColGap(8) with 0.5 steps | Set column gap to 0, 0.25rem, 0.5rem, 0.75rem, 1rem, 1.25rem, 1.5rem, 1.75rem, 2rem, 2.25rem, 2.5rem, 2.75rem, 3rem, 3.25rem, 3.5rem, 3.75rem or 4rem |
b.RowGap(0) to b.RowGap(8) with 0.5 steps | Set row gap to 0, 0.25rem, 0.5rem, 0.75rem, 1rem, 1.25rem, 1.5rem, 1.75rem, 2rem, 2.25rem, 2.5rem, 2.75rem, 3rem, 3.25rem, 3.5rem, 3.75rem or 4rem |
b.Cols(1) to b.Cols(12) | Set columns count to 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11 or 12 |
b.AutoCount | Set columns count to:
|
| Child | Action |
|---|---|
b.OnFixedGrid(...any) | Apply children to the <div class="fixed-grid"> element |
b.OnGrid(...any) | Apply children to the <div class="grid"> element |
b.Cell(...any) | Add cell to the <div class="grid"> element |
e.Element | Wrap element in a cell and add it to the <div class="grid"> element |
gomponents.Nodeof type gomponents.AttributeType | Apply attribute to the <div class="grid"> element |
gomponents.Nodeof type gomponents.ElementType | Wrap element in a cell and add it to the <div class="grid"> element |
| Anything else | Apply child to the <div class="grid"> element |
The columns count may be breakpoint-based, with b.Cols(...).Mobile()
to
b.Cols(...).FullHD().
The b.Cell constructor creates a single grid cell.
| Modifier | Action |
|---|---|
b.ColStart(1) to b.ColStart(12) | Start the cell at the given column (other values are treated as end, ie. the last column) |
b.ColFromEnd(1) to b.ColFromEnd(12) | End the cell at the given column |
b.ColSpan(1) to b.ColSpan(12) | Span the cell over this number of columns |
b.RowStart(1) to b.RowStart(12) | Start the cell at the given row (other values are treated as end, ie. the last row) |
b.RowFromEnd(1) to b.RowFromEnd(12) | End the cell at the given row |
b.RowSpan(1) to b.RowSpan(12) | Span the cell over this number of rows |
The column and row start/end/span may be breakpoint-based, with .Mobile()
to
.FullHD().