Grid

Overview #

The grid in Superkube is built by CSS grid and has these parameters by default.

// =Scales
$scales: (
    grid: (
        gridname: grid,
        columnname: column,
        columns: 12,
        gutter: 8rem,
        gap: 6rem
    )
);

Note: See also how to work with rem in Superkube.

Here's what each of the parameters means:

• 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.

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>

Note: On mobile, columns are formed in a column on top of each other and take up the entire width.

You can use any combination of columns, as long as they are 12.

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

Use with card

In Superkube, everything strives for perfection. So if you make cards in a grid, you don't need to put the card code in a column. The grid column itself will be the card.

Famous quotes
on nature

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.

Nature may
not exist!

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.

<div class="grid">
    <div class="column column-6 card sh-150 bg-light r-base">
        <div class="card-image">...</div>
        <div class="card-box">...</div>
    </div>
    <div class="column column-6 card sh-150 bg-light r-base">
        <div class="card-image">...</div>
        <div class="card-box">...</div>
    </div>
</div>

Own settings

You can change the grid settings by extending $scales. For example by changing the number of columns.

// =Scales
$scales: map-extend($scales, (
    grid: (
        columns: 8
    )
));

Now the grid will have 8 columns. And now two columns 50% of the width will be column-4, not column-6 as in the default settings.

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

Note: The number of columns in the grid affects the generation of containers, see the details of the container module.

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 a grid class with the specified number of columns from 1 to 12 as the suffix. In the example below, grid-2 means that there should only be two columns in a row, and if there are more, they are moved to a new row.

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

Responsive

Use suffix -sm 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.

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

Size

You can easily change the distance (gutter) between columns by using a gutter-{size} helper. This size scale is specified in the $scales map. See also how spacing works in Superkube.

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

Responsive

The distances between columns can be changed on mobile screens with the -sm suffix. The gutter control with the suffix -sm is relevant for auto columns, when for small screens you need to rebuild the number of columns and reduce the gutter.

<div class="grid grid-4 grid-2-sm gutter-2-sm">
    <div class="column">...</div>
    <div class="column">...</div>
    <div class="column">...</div>
    <div class="column">...</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>

Size

You can easily change the margin (gap) between grids by using a gap-{size} helper. This size scale is specified in the $scales map. See also how spacing works in Superkube.

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

Responsive

The gap between grids can be changed on mobile screens with the -sm suffix.

<div class="grid gap-10 gap-2-sm">
    <div class="column column-8">...</div>
    <div class="column column-4">...</div>
</div>
<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>

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

Offset shifts only the columns from the left edge of the grid. If you want to move a column relative to another column, just use an empty column of the needed size.

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