Grid

Available classes:

.container

.container-fluid

.grid

-sm

-md

-lg

-xl

-2

-3

-4

-5

-6

-7

-8

-9

-10

-11

-12

.grid-gap-0

.col

-sm

-md

-lg

-xl

-1

-2

-3

-4

-5

-6

-7

-8

-9

-10

-11

-12

.col-start

-sm

-md

-lg

-xl

-1

-2

-3

-4

-5

-6

-7

-8

-9

-10

-11

-12

.col-end

-sm

-md

-lg

-xl

-1

-2

-3

-4

-5

-6

-7

-8

-9

-10

-11

-12

How it works

The grid system is built with grid layout and is fully responsive. It's better if you understand how grid layout works. To learn about grids, read this CSS Tricks grid guide.

Grid classes

.grid

-sm

-md

-lg

-xl

-2

-3

-4

-5

-6

-7

-8

-9

-10

-11

-12

.grid-gap-0

.grid-5

Grid classes are wrappers for columns. Immediate children of grids became columns. There are 11 grid classes by default. From .grid-2 to .grid-12. Use .container as a wrapper if you want your content to have max-width and be aligned to the center.

grid

Content outside collumns can be placed here!

<div class="container">
  <p>Content outside collumns can be placed here!</p>
  <div class="grid-12"></div>
</div>

Columns

Columns are containers for content or are content blocks themselves. All immediate children of grid container are columns. Span of columns

.col

-sm

-md

-lg

-xl

-1

-2

-3

-4

-5

-6

-7

-8

-9

-10

-11

-12

.col-3

.col-3

How this works:

All direct descendants of .grid-12 are columns even without special classes. Their width is one track by default. This is how the grid layout behaves.
Column classes indicate the number of tracks you’d like to use out of the possible 12 per row. So, if you want three equal-width columns across .grid-12, you can use .col-4.
There is a default gap of 30px between columns. You can remove it for a grid container with .grid-gap-0 on it.
To make the grid responsive, there are five grid breakpoints, one for each responsive breakpoint: all breakpoints (extra small), small, medium, large, and extra large.
Grid breakpoints are based on minimum width media queries, meaning they apply to that one breakpoint and all those above it (e.g., .col-sm-4 applies to small, medium, large, and extra large devices, but not the first xs breakpoint).

Grid options

This is default options for grids:

	Extra small <576px	Small ≥576px	Medium ≥768px	Large ≥992px	Extra large ≥1200px
Max `.container` width	None (auto)	540px	720px	960px	1140px
Class prefix	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`
# of columns	from 2 to 12
Gap width	30px
Nestable	Yes
Column ordering	Yes

Responsive classes

Setka’s grid includes five tiers of predefined classes for building complex responsive layouts. Customize the size of your columns on extra small, small, medium, large, or extra large devices however you see fit.

All breakpoints

For grids that are the same from the smallest of devices to the largest, use the .col and .col-* classes. Specify a numbered class when you need a particularly sized column; otherwise, feel free to stick to .col.

.col-sm-3

.col-sm-8

.col-sm-4

<div class="grid-12">
  <div class="col-sm-3">.col-sm-3</div>
  <div class="col-sm-3">.col-sm-3</div>
  <div class="col-sm-3">.col-sm-3</div>
  <div class="col-sm-3">.col-sm-3</div>
  <div class="col-sm-8">.col-sm-8</div>
  <div class="col-sm-4">.col-sm-4</div>
</div>

Mix and match

Don’t want your columns to simply stack in some grid tiers? Use a combination of different classes for each tier as needed. See the example below for a better idea of how it all works.

.col-12 .col-md-8

.col-6 .col-md-4

.col-6

<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="grid-12">
  <div class="col-12 col-md-8">.col-12 .col-md-8</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="grid-12">
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="grid-12">
  <div class="col-6">.col-6</div>
  <div class="col-6">.col-6</div>
</div>

It works for all grid classes.

Grid in-depth

Column start

The .col-start-* classes specify a column start position by applying grid-column-start CSS property. In which * is a grid's track number.

.col-md-4

.col-md-4 .col-start-md-9

.col-md-3 .col-start-md-4

.col-md-3 .col-start-md-10

.col-md-6 .col-start-md-4

<div class="grid-12">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 col-start-md-9">.col-md-4 .col-start-md-9</div>
</div>
<div class="grid-12">
  <div class="col-md-3 col-start-md-4">.col-md-3 .col-start-md-4</div>
  <div class="col-md-3 col-start-md-10">.col-md-3 .col-start-md-10</div>
</div>
<div class="grid-12">
  <div class="col-md-6 col-start-md-4">.col-md-6 .col-start-md-4</div>
</div>

Column start may force a column to wrap if the specified track is already occupied by another column.

.col-md-4

.col-start-8 is forced to wrap because track 8 is occupied

Column end

The .col-end-* classes specify a column end position by applying grid-column-end CSS property. In which * is a grid's track number.

.col-4

.col-4 .col-end

.col-3 .col-end-5

.col-3 .col-end-10

.col-6 .col-end-12

<div class="grid-12">
  <div class="col-4">.col-4</div>
  <div class="col-4 col-end">.col-4 .col-end</div>
</div>
<div class="grid-12">
  <div class="col-3 col-end-5">.col-3 .col-end-5</div>
  <div class="col-3 col-end-10">.col-3 .col-end-10</div>
</div>
<div class="grid-12">
  <div class="col-6 col-end-12">.col-6 .col-end-12</div>
</div>

As you see .col-end class set ending position on the last track no matter how many columns are in a grid.

And you can mix .col-end-* and .col-start-* classes.

.col-4 .col-start

.col-4 .col-end

.col-start .col-end

.col-start-2 .col-end-5

.col-start-6 .col-end-9

.col-start-10 .col-end

<div class="grid-12">
  <div class="col-4 col-start">.col-4 .col-start</div>
  <div class="col-4 col-end">.col-4 .col-end</div>
  <div class="col-end col-start">.col-start .col-end</div>
  <div class="col-start-2 col-end-5">.col-start-2 .col-end-5</div>
  <div class="col-start-6 col-end-9">.col-start-6 .col-end-9</div>
  <div class="col-start-10 col-end">.col-start-10 .col-end</div>
</div>

Full-width column

For full-width columns use .col class and it's responsive variations:

Full-width column

<div class="container">
  <div class="grid-12">
    <div class="col">
      Full-width column
    </div>
    <div class="col">
      Full-width column
    </div>
  </div>
</div>

An empty full-width column can be used as a rows break:

col-4

col-5

col-4

<div class="container">
  <div class="grid-12">
    <div class="col-4">
      col-4
    </div>
    <div class="col-6">
      col-5
    </div>
    <div class="col"></div><!-- Empty column -->
    <div class="col-4">
      col-4
    </div>
    <div class="col-4">
      col-4
    </div>
  </div>
</div>

Column wrapping

If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.

.col-9

.col-4
Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.

.col-6
Subsequent columns continue along the new line.

<div class="grid-12">
  <div class="col-9">.col-9</div>
  <div class="col-4">.col-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
  <div class="col-6">.col-6<br>Subsequent columns continue along the new line.</div>
</div>

Column breaks

If you want to break columns inside a single grid container, use empty .col for that. It's a full-width column and it is not dependant on the number of tracks inside the grid.

.col-6 .col-sm-3

<div class="grid-12">
  <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
  <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>

  <!-- Force next columns to break to new line -->
  <div class="col"></div>

  <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
  <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
</div>

No gaps

The gups between columns can be removed with .grid-gap-0.

.col-12 .col-sm-6 .col-md-8

.col-6 .col-md-4

<div class="row grid-gap-0">
  <div class="col-12 col-sm-6 col-md-8">.col-12 .col-sm-6 .col-md-8</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

Vertical alignment

Use flexbox alignment utilities to vertically align columns.

One of three columns

<div class="container">
  <div class="grid-12 align-items-start">
    <div class="col-4">
      One of three columns
    </div>
    <div class="col-4">
      One of three columns
    </div>
    <div class="col-4">
      One of three columns
    </div>
  </div>
  <div class="grid-12 align-items-center">
    <div class="col-4">
      One of three columns
    </div>
    <div class="col-4">
      One of three columns
    </div>
    <div class="col-4">
      One of three columns
    </div>
  </div>
  <div class="grid-12 align-items-end">
    <div class="col-4">
      One of three columns
    </div>
    <div class="col-4">
      One of three columns
    </div>
    <div class="col-4">
      One of three columns
    </div>
  </div>
</div>

Use flexbox self aligment utilities to individually align columns.

One of three columns

<div class="container">
  <div class="grid-12">
    <div class="col-4 align-self-start">
      One of three columns
    </div>
    <div class="col-4 align-self-center">
      One of three columns
    </div>
    <div class="col-4 align-self-end">
      One of three columns
    </div>
  </div>
</div>

Reordering

Use .order- classes for controlling the visual order of your content. These classes are responsive, so you can set the order by breakpoint (e.g., .order-1.order-md-2). Includes support for 1 through 12 across all five grid tiers.

First, but unordered

Second, but last

Third, but first

<div class="container">
  <div class="grid-12">
    <div class="col-4">
      First, but unordered
    </div>
    <div class="col-4 order-12">
      Second, but last
    </div>
    <div class="col-4 order-1">
      Third, but first
    </div>
  </div>
</div>

Nesting

To nest your content with the default grid, add a new .grid-* within an existing .col-sm-* column. Use any grid from .grid-2 to .grid-12.

Level 1: .col-sm-9

Level 2: .col-8 .col-sm-6

Level 2: .col-4 .col-sm-6

<div class="grid-12">
  <div class="col-sm-9">
    Level 1: .col-sm-9
    <div class="grid-12">
      <div class="col-8 col-sm-6">
        Level 2: .col-8 .col-sm-6
      </div>
      <div class="col-4 col-sm-6">
        Level 2: .col-4 .col-sm-6
      </div>
    </div>
  </div>
</div>

Subgrids

At the moment in CSS you can't tell subgrids to inherit the layout of the parent grid.

But with Setka .grid-* classes you can imitate this behavior. For example, in .col-7 you can use .grid-7. In the example below all tracks from nested grids coincide with the root grid.

.col-7

.col-4

.col-1

.col-3

.col-1

.col-5

.col-2

.col-1

.col-3

.col-1

<div class="grid-12">
  <div class="col-7">
    .col-7
    <div class="grid-7">
      <!-- Level 2 grid -->
      <div class="col-4">
        .col-4
        <div class="grid-4">
          <!-- Level 3 grid -->
          <div class="col-1">.col-1</div>
          <div class="col-1">.col-1</div>
          <div class="col-1">.col-1</div>
          <div class="col-1">.col-1</div>
        </div>
      </div>
      <div class="col-3">
        <!-- .grid-3 and cols -->
      </div>
    </div>
  </div>
  <div class="col-5">
    <!-- .grid-5 and so on -->
  </div>
</div>

Custom grids

Apply Setka grid tools to your custom grid templates.

.col-1

.col-2

.col-3

.col-3 .col-end

.col-2

.col-1 .col-start-4

<style>
  .my-custom-grid {
    display: grid;
    grid-template-columns: 10% 15% auto 15% 10%;
    gap: 20px;
  }
</style>

<div class="my-custom-grid">
  <div>.col-1</div>
  <div>.col-1</div>
  <div>.col-1</div>
  <div>.col-1</div>
  <div>.col-1</div>
  <div class="col-2">.col-2</div>
  <div class="col-3">.col-3</div>
  <div class="col-3 col-end">.col-3 .col-end</div>
  <div class="col-2">.col-2</div>
  <div class="col-1 col-start-4">.col-1 .col-start-4</div>
</div>