5.1.2 • Published 2 months ago
@teft/grid v5.1.2
Grid
While it is possible to override the number of columns used by the grid package, we strongly recommend using 12 columns. A lot of the functionality built upon Teft is based on 12 columns and there will be a lot of work to make everything compatible with a custom columns setup.
Installation
Install the module
npm install @teft/grid
Variables
Name | Default value |
---|---|
--teft-grid-gap | var(--teft-theme-gap) |
--teft-grid-columns | 12 |
Examples
Basic Grid Setup
CSS
.example-left-column {
grid-column-end: 4;
grid-column-start: 1;
}
.example-right-column {
grid-column-end: 12;
grid-column-start: 4;
}
Markup
<div class="teft-grid">
<div class="example-left-column">
<p>Left column</p>
</div>
<div class="example-right-column">
<p>Right column</p>
</div>
</div>