Grid

The 12 column grid can be used for aligning components and assisting in responsive behavior. It is not intended to be the only solution for aligning components. If you are not well aware of grid concepts then we suggest that you go through an overview of Bootstrap.

	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	12
Gutter width	30px (15px on each side of a column)
Nestable	Yes
Column ordering	Yes

.col-*-1

.col-*-2

.col-*-3

.col-*-4

.col-*-6

Example HTML usage:

<!--Equal width grid -->
<div class="container pl-grid-example">
  <div class="row">
    <div class="col">.col-*-1</div>
    <div class="col">.col-*-1</div>
    <div class="col">.col-*-1</div>
    <div class="col">.col-*-1</div>
    <div class="col">.col-*-1</div>
    <div class="col">.col-*-1</div>
    <div class="col">.col-*-1</div>
    <div class="col">.col-*-1</div>
    <div class="col">.col-*-1</div>
    <div class="col">.col-*-1</div>
    <div class="col">.col-*-1</div>
    <div class="col">.col-*-1</div>
    <aa></aa>
  </div>

  <div class="row">
    <div class="col">.col-*-2</div>
    <div class="col">.col-*-2</div>
    <div class="col">.col-*-2</div>
    <div class="col">.col-*-2</div>
    <div class="col">.col-*-2</div>
    <div class="col">.col-*-2</div>
  </div>

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

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

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