Utilities
Layout utilities
Flex and grid helpers.
Flex and grid helpers. Gaps come from the spacing utilities.
Example
ct-grid-3
ct-gap-8
cell
Classes
19 classes from platforms/web/utilities/layout.css.
| Class | Declarations |
|---|---|
.ct-flex | display:flex |
.ct-inline-flex | display:inline-flex |
.ct-flex-col | display:flex;flex-direction:column |
.ct-flex-wrap | flex-wrap:wrap |
.ct-items-start | align-items:flex-start |
.ct-items-center | align-items:center |
.ct-items-end | align-items:flex-end |
.ct-items-baseline | align-items:baseline |
.ct-justify-start | justify-content:flex-start |
.ct-justify-center | justify-content:center |
.ct-justify-end | justify-content:flex-end |
.ct-justify-between | justify-content:space-between |
.ct-grow | flex:1 1 0;min-width:0 |
.ct-shrink-0 | flex-shrink:0 |
.ct-grid | display:grid |
.ct-grid-2 | display:grid;grid-template-columns:repeat(2,minmax(0,1fr)) |
.ct-grid-3 | display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) |
.ct-grid-auto | display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--grid-min,var(--size-arrival-panel-width)),1fr)) |
.ct-place-center | place-items:center |