+++ draft = false weight = 30 description = "Flexible, fully responsive and ready to use" title = "Grid" bref = "Kube uses fully responsive, flexbox-enabled 12-column grid. You can combine or divide columns, nest them, center them horizontally or vertically, and do all sorts of things. Here are a few examples of what you can do with Kube's grid." toc = true +++

Columns

Columns are building blocks for many websites. Here's how columns are formed in Kube, and here's how you can use them right away.

1
11
2
10
3
9
4
8
5
7
6
6
7
5
8
4
9
3
10
2
11
1
12 
<div class="row">
    <div class="col col-4">...</div>
    <div class="col col-8">...</div>
</div>

Gutters

3
9 
<div class="row gutters">
    <div class="col col-3">...</div>
    <div class="col col-9">...</div>
</div>

Auto Width

auto
auto
auto 
<div class="row auto">
    <div class="col">...</div>
    <div class="col">...</div>
    <div class="col">...</div>
</div>
Auto + Gutters
auto
auto
auto
auto 
<div class="row gutters auto">
    <div class="col">...</div>
    <div class="col">...</div>
    <div class="col">...</div>
    <div class="col">...</div>
</div>

Bricks

50%
50%
50%
50% 
<div class="row">
    <div class="col col-6">...</div>
    <div class="col col-6">...</div>
    <div class="col col-6">...</div>
    <div class="col col-6">...</div>
</div>
Bricks + Gutters
33%
33%
33%
33%
33%
33% 
<div class="row gutters">
    <div class="col col-4">...</div>
    <div class="col col-4">...</div>
    <div class="col col-4">...</div>
    <div class="col col-4">...</div>
</div>

Offset

Offsetting columns is very simple in Kube. Just use column's class as usual, for example, col col-2 and then add the offset value offset-4. This will offset this column and all following columns by 4.

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

Nested

Here's an example of nesting columns within columns. In this example, we have a single row, with two columns .col col-6, a div nested within the second column, with .row end class to denote where to inject nested columns, and the three nested columns.

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

Equal Height Columns

Columns are equal height by default in Kube

1
1
2
3 
<div class="row">
    <div class="col col-6">
        ...
    </div>
    <div class="col col-6">
        ...
        ...
        ...
    </div>
</div>

Reordering

First
4
8 
<div class="row">
    <div class="col col-4">...</div>
    <div class="col col-8 first">...</div>
</div>
Last
3
9 
<div class="row">
    <div class="col col-3 last">...</div>
    <div class="col col-9">...</div>
</div>

Around

When you want your columns to be surrounded by an even margins on both sides, just use .around class.

3
3
3 
<div class="row around">
    <div class="col col-3">...</div>
    <div class="col col-3">...</div>
    <div class="col col-3">...</div>
</div>

Between

Sometime you just need space between columns, and not around them. Well, there's a class for that: .between

3
3
3 
<div class="row between">
    <div class="col col-3">...</div>
    <div class="col col-3">...</div>
    <div class="col col-3">...</div>
</div>

Alignment

Align Center
6 
<div class="row align-center">
    <div class="col col-6">...</div>
</div>
Align Right
3
3 
<div class="row align-right">
    <div class="col col-3">...</div>
    <div class="col col-3">...</div>
</div>
Align Middle
4
4
4 
<div class="row align-middle">
    <div class="col col-4">...</div>
    <div class="col col-4">...</div>
    <div class="col col-4">...</div>
</div>

Push

Push Center
.push-center 
<div class="row">
    <div class="col col-4 push-center">...</div>
</div>
Push Right
...
.push-right 
<div class="row">
    <div class="col col-6">...</div>
    <div class="col col-4 push-right">...</div>
</div>
Push Middle
.push-middle 
<div class="row">
    <div class="col col-8 push-middle">...</div>
</div>
Push Mixed
.push-middle.push-center 
<div class="row">
    <div class="col col-8 push-middle push-center">...</div>
</div>
Push Bottom
.push-bottom 
<div class="row">
    <div class="col col-8 push-bottom">...</div>
</div>

Fixed Width Column

Here's one more bit of magic. You can set a fixed width column and still have a responsive and flexible layout right beside this fixed width column.

sidebar
content 
<!-- scss -->
#container {
    @include grid-row;
}
#sidebar {
    @include flex-item-width(300px);
}
#content {
    @include flex-item-auto;
}

<!-- html -->
<div id="container">
    <div id="sidebar">Sidebar</div>
    <div id="content">Content</div>
</div>

Media Grid

Media grid is a great example of Kube's flexibility and versatility. Whenever you have some media to display, you can choose to use Media grid. This type of grid is ideal for featuring photos; it adds some visual music and slight randomness to your layout.

1
2
3
4
5
6
7
8
9
10 
<!-- scss -->
#media-grid {

    @include grid-media-columns(2);

    & > div {
        margin-bottom: 20px;
        height: 80px;
    }
    & > div:nth-child(2n) {
      height: 200px;
    }
    & > div:nth-child(5n) {
      height: 120px;
    }
}

<!-- html -->
<div id="media-grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
</div>