Grid System

CSS Grid Layout excels at dividing a page into major regions or defining the relationship in terms of size, position, and layer, between parts of a control built from HTML primitives. The grid is a 12-column fluid grid with a min width of 960px, that shrinks with the browser/device at smaller sizes. The min width can be changed with one line of CSS and all columns will resize accordingly. The syntax is simple and it makes coding responsive much easier.

Examples

1
11
2
10
3
9
4
8
5
7
6
6
7
5
8
4
9
3
10
2
11
1 
                     
        <div class="row">
    <div class="col-12-xs col-1-lg bg-indigo-300 text-white p-2">
      1
    </div>
    <div class="col-12-xs col-11-lg bg-indigo-900 text-white p-2">
      11
    </div>
  </div>
  <div class="row">
    <div class="col-12-xs col-2-lg bg-indigo-300 text-white p-2">
      2
    </div>
    <div class="col-12-xs col-10-lg bg-indigo-900 text-white p-2">
      10
    </div>
  </div>
  <div class="row">
    <div class="col-12-xs col-3-lg bg-indigo-300 text-white p-2">
      3
    </div>
    <div class="col-12-xs col-9-lg bg-indigo-900 text-white p-2">
      9
    </div>
  </div>
  <div class="row">
    <div class="col-12-xs col-4-lg bg-indigo-300 text-white p-2">
      4
    </div>
    <div class="col-12-xs col-8-lg bg-indigo-900 text-white p-2">
      8
    </div>
  </div>
  <div class="row">
    <div class="col-12-xs col-5-lg bg-indigo-300 text-white p-2">
      5
    </div>
    <div class="col-12-xs col-7-lg bg-indigo-900 text-white p-2">
      7
    </div>
  </div>
  <div class="row">
    <div class="col-12-xs col-6-lg bg-indigo-300 text-white p-2">
      6
    </div>
    <div class="col-12-xs col-6-lg bg-indigo-900 text-white p-2">
      6
    </div>
  </div>
  <div class="row">
    <div class="col-12-xs col-7-lg bg-indigo-300 text-white p-2">
      7
    </div>
    <div class="col-12-xs col-5-lg bg-indigo-900 text-white p-2">
      5
    </div>
  </div>
  <div class="row">
    <div class="col-12-xs col-8-lg bg-indigo-300 text-white p-2">
      8
    </div>
    <div class="col-12-xs col-4-lg bg-indigo-900 text-white p-2">
      4
    </div>
  </div>
  <div class="row">
    <div class="col-12-xs col-9-lg bg-indigo-300 text-white p-2">
      9
    </div>
    <div class="col-12-xs col-3-lg bg-indigo-900 text-white p-2">
      3
    </div>
  </div>
  <div class="row">
    <div class="col-12-xs col-10-lg bg-indigo-300 text-white p-2">
      10
    </div>
    <div class="col-12-xs col-2-lg bg-indigo-900 text-white p-2">
      2
    </div>
  </div>
  <div class="row">
    <div class="col-12-xs col-11-lg bg-indigo-300 text-white p-2">
      11
    </div>
    <div class="col-12-xs col-1-lg bg-indigo-900 text-white p-2">
      1
    </div>
  </div>
Range Slider Effects