Methods
grid-item($spanopt, nullable, $startopt, nullable, $endopt, nullable, $row-spanopt, nullable, $row-startopt, nullable, $row-endopt, nullable)
Renders the basic properties of a grid item, which is an item inside a grid, being placed according to pre-defined columns.
The main purpose of this mixin is, to define the space, the item takes inside the grid. To do this, there are several means of definition. Either just giving it a column-based width, aligning it at the end of other, already existing items, or defining a specific area it should cover, by explicitly defining a start and end column or a combination of both.
Additionally, the item may also be defined to take up more than one row, adding the native grid capabilities to our concepts.
Parameters:
| Name | Type | Attributes | Default | Description |
|---|---|---|---|---|
$span |
Number |
<optional> <nullable> |
null | the width of the item in columns |
$start |
Number |
<optional> <nullable> |
null | the horizontal start offset of the item in columns, may be combined with end or span |
$end |
Number |
<optional> <nullable> |
null | the horizontal end offset of the item in columns, may be combined with start or span |
$row-span |
Number |
<optional> <nullable> |
null | the height of the item in rows |
$row-start |
Number |
<optional> <nullable> |
null | the vertical start offset of the item in rows, may be combined with row-end or row-span |
$row-end |
Number |
<optional> <nullable> |
null | the vertical end offset of the item in rows, may be combined with row-start or row-span |
- Source:
- See:
Example
@include grid-item(12);
@include grid-item(6, 6);
@include grid-item(null, 2, 2);
@include grid-item(6, null, null, 2);
@include grid-item(6, null, null, null, 0, 5);