Grid

Overview #

Superkube has such grid settings by default:

$grid: (
    gridname: grid,
    columnname: column,
    columns: 12,
    gutter: 6rem,
    gap: 6rem
);

• gridname - name of grid class;
• columnname - name of column class;
• columns - number of columns in the grid;
• gutter - margin between columns;
• gap - vertical margin between grids.

In HTML the grid with default settings looks like this:

<div class="grid">
    <div class="column column-6">...</div>
    <div class="column column-6">...</div>
</div>

You can change the grid like this:

$grid: (
    gridname: row,
    columnname: col,
    columns: 8,
    gutter: 6rem,
    gap: 6rem
);

Now the grid will have 8 columns with the class names you specify:

<div class="row">
    <div class="col col-4">...</div>
    <div class="col col-4">...</div>
</div>

Columns #

Superkube generates classes for columns depending on the specified number in the grid settings. If you have 12 columns, you will generate 12 classes from column-1 to column-12.

<div class="grid">
    <div class="column column-6">...</div>
    <div class="column column-6">...</div>
</div>

Auto Columns

Use the grid-auto class to automatically set the same width of each column.

<div class="grid grid-auto">
    <div class="column">...</div>
    <div class="column">...</div>
    <div class="column">...</div>
</div>

Or use grid classes with the specified number of columns:

<div class="grid grid-2">
    <div class="column">...</div>
    <div class="column">...</div>
    <div class="column">...</div>
    <div class="column">...</div>
</div>

Responsive

Use suffixes -sm and -md to set the number of columns in the grid on small and tablet screens.

<div class="grid grid-2-sm">
    <div class="column column-8">...</div>
    <div class="column column-4">...</div>
</div>

The same if the number of columns is specified by the grid class.

<div class="grid grid-4 grid-2-sm">
    <div class="column">...</div>
    <div class="column">...</div>
    <div class="column">...</div>
    <div class="column">...</div>
</div>

Gutter #

Gutter is a margin between columns. You can turn it off for the grid like this:

<div class="grid grid-gutterless">
    <div class="column column-8">...</div>
    <div class="column column-4">...</div>
</div>

It is possible to change the distance between columns for a certain grid using spacing scale. This scale is specified in the $spacing-scale map settings.

<div class="grid gutter-10">
    <div class="column column-8">...</div>
    <div class="column column-4">...</div>
</div>

Of course, the distances between columns can be changed on mobile and tablet screens with the -sm and -md suffixes.

<div class="grid gutter-10 gutter-2-sm">
    <div class="column column-8">...</div>
    <div class="column column-4">...</div>
</div>

Gap #

Gap is vertical margin between grids. By default, there will be a margin between the grids specified in the settings. You can turn it off using the grid-gapless class.

<div class="grid grid-gapless">
    <div class="column column-8">...</div>
    <div class="column column-4">...</div>
</div>
<div class="grid grid-gapless">
    <div class="column column-8">...</div>
    <div class="column column-4">...</div>
</div>

It is possible to change the gap between grids using spacing scale. This scale is specified in the $spacing-scale map settings.

<div class="grid gap-10">
    <div class="column column-8">...</div>
    <div class="column column-4">...</div>
</div>

Of course, the gap between grids can be changed on mobile and tablet screens with the -sm and -md suffixes.

<div class="grid gap-10 gap-2-sm">
    <div class="column column-8">...</div>
    <div class="column column-4">...</div>
</div>

Offset #

The columns may be pushed to the right by a specified number of columns.

<div class="grid">
    <div class="column column-8 column-offset-4">...</div>
</div>
<div class="grid">
    <div class="column column-6 column-offset-2">...</div>
    <div class="column column-4">...</div>
</div>

On small screens, column offset is always automatically turned off.