Grid

Grids can be of type .grid-fluid or .grid.
By default, Puxl grids have 12 columns. Each column has an adjustable column-gap and a row-gap of 1.5rem (1rem = 16px).
Fluid grids spread at 100% width of their container.
Grids respond to grid breakpoints, and remain centered. There are five grid breakpoints: xs (480px = 30rem), sm (576px = 36rem), md (768px = 48rem), lg (992px = 62rem) and xl (1200px = 75rem).

Type
.grid-fluid or .grid

Columns must be direct descendants of grids. They respond to grid breakpoints.
Columns can have a customizable offset-margin for each breakpoint.

Breakpoints
.col-xs-..., .col-sm-..., .col-md-..., .col-lg-... and .col-xl-...
Offset
.col-xs-offset-..., .col-sm-offset-..., .col-md-offset-..., .col-lg-offset-... and .col-xl-offset-...

Grid fluid

.xs-12
.xs-1
.xs-11
.xs-2
.xs-10
.xs-3
.xs-9
.xs-4
.xs-8
.xs-5
.xs-7
.xs-6
.xs-6
.xs-7
.xs-5
.xs-8
.xs-4
.xs-9
.xs-3
.xs-10
.xs-2
.xs-11
.xs-1
<div class="grid-fluid">

  <div class="col-xs-12">
    .xs-12
  </div>

  <div class="col-xs-1">
    .xs-1
  </div>

  <div class="col-xs-11">
    .xs-11
  </div>

  <div class="col-xs-2">
    .xs-2
  </div>

  <div class="col-xs-10">
    .xs-10
  </div>

  <div class="col-xs-3">
    .xs-3
  </div>

  <div class="col-xs-9">
    .xs-9
  </div>

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

  <div class="col-xs-8">
    .xs-8
  </div>

  <div class="col-xs-5">
    .xs-5
  </div>

  <div class="col-xs-7">
    .xs-7
  </div>

  <div class="col-xs-6">
    .xs-6
  </div>

  <div class="col-xs-6">
    .xs-6
  </div>

  <div class="col-xs-7">
    .xs-7
  </div>

  <div class="col-xs-5">
    .xs-5
  </div>

  <div class="col-xs-8">
    .xs-8
  </div>

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

  <div class="col-xs-9">
    .xs-9
  </div>

  <div class="col-xs-3">
    .xs-3
  </div>

  <div class="col-xs-10">
    .xs-10
  </div>

  <div class="col-xs-2">
    .xs-2
  </div>

  <div class="col-xs-11">
    .xs-11
  </div>

  <div class="col-xs-1">
    .xs-1
  </div>

</div>
Grid fluid .grid-fluid, and descendant columns .col-....

Grid fluid: Column offset

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

  <div class="col-xs-12">
    .xs-12
  </div>

  <div class="col-xs-11 col-xs-offset-1">
    11 / 1
  </div>

  <div class="col-xs-10 col-xs-offset-2">
    10 / 2
  </div>

  <div class="col-xs-9 col-xs-offset-3">
    9 / 3
  </div>

  <div class="col-xs-8 col-xs-offset-4">
    8 / 4
  </div>

  <div class="col-xs-7 col-xs-offset-5">
    7 / 5
  </div>

  <div class="col-xs-6 col-xs-offset-6">
    6 / 6
  </div>

  <div class="col-xs-5 col-xs-offset-7">
    5 / 7
  </div>

  <div class="col-xs-4 col-xs-offset-8">
    4 / 8
  </div>

  <div class="col-xs-3 col-xs-offset-9">
    3 / 9
  </div>

  <div class="col-xs-2 col-xs-offset-10">
    2 / 10
  </div>

  <div class="col-xs-1 col-xs-offset-11">
    1 / 11
  </div>

</div>
Grid fluid .grid-fluid, and descendant columns with offset .col-offset-....

Grid

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

  <div class="col-xs-12">
    .xs-12
  </div>

  <div class="col-xs-1">
    .xs-1
  </div>

  <div class="col-xs-11">
    .xs-11
  </div>

  <div class="col-xs-2">
    .xs-2
  </div>

  <div class="col-xs-10">
    .xs-10
  </div>

  <div class="col-xs-3">
    .xs-3
  </div>

  <div class="col-xs-9">
    .xs-9
  </div>

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

  <div class="col-xs-8">
    .xs-8
  </div>

  <div class="col-xs-5">
    .xs-5
  </div>

  <div class="col-xs-7">
    .xs-7
  </div>

  <div class="col-xs-6">
    .xs-6
  </div>

  <div class="col-xs-6">
    .xs-6
  </div>

  <div class="col-xs-7">
    .xs-7
  </div>

  <div class="col-xs-5">
    .xs-5
  </div>

  <div class="col-xs-8">
    .xs-8
  </div>

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

  <div class="col-xs-9">
    .xs-9
  </div>

  <div class="col-xs-3">
    .xs-3
  </div>

  <div class="col-xs-10">
    .xs-10
  </div>

  <div class="col-xs-2">
    .xs-2
  </div>

  <div class="col-xs-11">
    .xs-11
  </div>

  <div class="col-xs-1">
    .xs-1
  </div>

</div>
Grid .grid, and descendant columns .col-....

Grid: Column offset

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

  <div class="col-xs-12">
    .xs-12
  </div>

  <div class="col-xs-11 col-xs-offset-1">
    11 / 1
  </div>

  <div class="col-xs-10 col-xs-offset-2">
    10 / 2
  </div>

  <div class="col-xs-9 col-xs-offset-3">
    9 / 3
  </div>

  <div class="col-xs-8 col-xs-offset-4">
    8 / 4
  </div>

  <div class="col-xs-7 col-xs-offset-5">
    7 / 5
  </div>

  <div class="col-xs-6 col-xs-offset-6">
    6 / 6
  </div>

  <div class="col-xs-5 col-xs-offset-7">
    5 / 7
  </div>

  <div class="col-xs-4 col-xs-offset-8">
    4 / 8
  </div>

  <div class="col-xs-3 col-xs-offset-9">
    3 / 9
  </div>

  <div class="col-xs-2 col-xs-offset-10">
    2 / 10
  </div>

  <div class="col-xs-1 col-xs-offset-11">
    1 / 11
  </div>

</div>
Grid .grid, and descendant columns with offset .col-offset-....