Grid
The grid is an essential component for creating layouts. Ascension employs a flexbox-based grid that's super easy to use and customize.
Basic grid usage
You can define a grid by using the .grid class. Then, inside that container you must define any number of cells, using the .cell class.
The example below shows a simple grid with 2 cells.
| Code | Preview |
|---|---|
|
This is the cell content
This is the cell content
|
Block grid
There is the option so setup a block grid by using the .block class on a grid element. This will ensure all subsequent cells have the same height and have the same distance in between.
| Code | Preview |
|---|---|
|
The card content.
The card content.
The card content.
The card content.
The card content.
The card content.
|
Cell sizing
By default, a .cell will occupy all the available space. If there is more than 1 cell, then those cells will divide the available space equally (see the example above). However, you can specify a cell size by giving it a number from 1 to 12 (by default). This will occupy as many columns as you specify in a 12-column grid. For example, if you wish to create a cell that's half the size of the available space, you would give it the number 6.
The size classes are applied in conjunction with the breakpoints. That means you can have individual sizes for different breakpoints. Take a look at the example below:
| Code | Preview |
|---|---|
|
The first cell.
The second cell.
|
The two cells have different sizes based on different breakpoints. In this case, on screens of medium size and above the first cell has a width of 10 columns, while the second one has a width of 2 columns. On large screens they are equal in size, while on extra-large screens the first occupies 4 columns while the second one 8. You can very easily see these changes by resizing your browser window and measuring the column sizes.
The sizes depend on the available breakpoints. Here are the default ones, as found in _settings.scss:
$breakpoints: (
'sm': 0,
'md': 768px,
'lg': 1280px,
'xlg': 1920px
);
The key represents the id of the breakpoint which can be used to declare the sizing classes while the value represents the minimum width of the breakpoint. In our case, for example, the large breakpoint is triggered when the screen width exceeds 1280px.
Global cell sizing
The approach you saw above assigns individual sizing classes to each cell, but there are cases when all cells are of equal size so it doesn't make sense to apply the same classes to all cells. In this case you can apply the sizing classes to the parent .grid element, like so:
| Code | Preview |
|---|---|
|
This is the cell content.
This is the cell content.
|
In this example, both cells have the widths of .md-6 and .lg-4.
Cell shrinking
The .shrink allows a cell to only stretch as far as it's required by the content.
| Code | Preview |
|---|---|
|
This is a shrunken cell.
This is a regular cell.
|
Gutters
By default, the grid doesn't have a gutter or distance between cells. These are flush with one another. Adding gutters can be done by using the class of .gutter to the grid. The following two examples show a grid without gutters and one with gutters applied.
| Code | Preview |
|---|---|
|
This is the cell content.
This is the cell content.
|
|
This is the cell content.
This is the cell content.
|