LIME GRID

Powerful Flexbox based Grid System for modern browsers.

Star Fork Download

The Grid

LIME GRID is a 12-column fluid grid. inspired by flexboxgrid.
You can apply different gutter widths from mobile to large desktop.
The goal is to improve the quality of UI with each optimized design.

Grid Options

Please check the table below for how it works at each breakpoint.

  Extra Small (xs)
<576px
Small (sm)
>=576px
Medium (md)
>=768px
Large (lg)
>=992px
Extra Large (xl)
>=1200px
Container width auto 540px 720px 960px 1150px
Gutter width 20px 20px 30px 30px 40px
Outside gutter width 15px 15px 15px 15px 20px

The above is the default setting. You can customize the settings by using PostCSS.
See README for details.

Responsive

It is a usage similar to Bootstrap and flexboxgrid in order to lower learning cost.

<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 col-xl-6"></div>
  <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 col-xl-6"></div>
</div>

<!-- All breakpoints -->
<div class="row">
  <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4 col-xl-4"></div>
  <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4 col-xl-4"></div>
  <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4 col-xl-4"></div>
</div>

<!-- Only necessary breakpoints -->
<div class="row">
  <div class="col-xs-12 col-sm-4"></div>
  <div class="col-xs-12 col-sm-4"></div>
  <div class="col-xs-12 col-sm-4"></div>
</div>

Always

If you always have the same number of columns, you can use Shorthand.

<div class="container">
  <div class="row">
    <!-- Very short -->
    <div class="col-2"></div>
    <div class="col-2"></div>
    <div class="col-2"></div>

    <!-- Extra small -->
    <div class="col-xs-2"></div>
    <div class="col-xs-2"></div>
    <div class="col-xs-2"></div>
  </div>
</div>

Auto width

The column is automatically sized according to the number of columns.

<div class="container">
  <div class="row">
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
  </div>
</div>

Nesting

Supports nested grids. as well as other frameworks.

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

Offsets

Offset by the specified column.

<div class="container">
  <div class="row">
    <!-- Shorthand -->
    <div class="col-offset-11 col-1"></div>

    <!-- Breakpoint -->
    <div class="col-xs-offset-11 col-xs-1 ..."></div>
    <div class="col-sm-offset-11 col-xs-1 ..."></div>
    <div class="col-md-offset-11 col-xs-1 ..."></div>
    <div class="col-lg-offset-11 col-xs-1 ..."></div>
    <div class="col-xl-offset-11 col-xs-1 ..."></div>
  </div>
</div>

Alignment

Sets the horizontal and vertical alignment position.

Start

<div class="row row-xs-start">
  <div class="col-6"></div>
</div>

Center

<div class="row row-xs-center">
  <div class="col-6"></div>
</div>

End

<div class="row row-xs-end">
  <div class="col-6"></div>
</div>

Top

<div class="row row-xs-top">
  <div class="col-6"></div>
  <div class="col-6"></div>
</div>

Middle

<div class="row row-xs-middle">
  <div class="col-6"></div>
  <div class="col-6"></div>
</div>

Bottom

<div class="row row-xs-bottom">
  <div class="col-6"></div>
  <div class="col-6"></div>
</div>

Example

<div class="row row-xs-end row-xs-bottom row-md-center row-md-middle">
  <div class="col-4"></div>
  <div class="col-4"></div>
</div>

Distribution

Set the column distribution method.

Around

<div class="row row-xs-around">
  <div class="col-2"></div>
  <div class="col-2"></div>
  <div class="col-2"></div>
</div>

Between

<div class="row row-xs-between">
  <div class="col-2"></div>
  <div class="col-2"></div>
  <div class="col-2"></div>
</div>

Reordering

Sets the order of columns.

First

1
2
3
4
5
6
<div class="row">
  <div class="col">1</div>
  <div class="col">2</div>
  <div class="col">3</div>
  <div class="col">4</div>
  <div class="col">5</div>

  <!-- Always -->
  <div class="col col-first">6</div>

  <!-- Breakpoint -->
  <div class="col col-xs-first">6</div>
</div>

Last

1
2
3
4
5
6
<div class="row">
  <!-- Always -->
  <div class="col col-last">1</div>

  <!-- Breakpoint -->
  <div class="col col-xs-last">1</div>

  <div class="col">2</div>
  <div class="col">3</div>
  <div class="col">4</div>
  <div class="col">5</div>
  <div class="col">6</div>
</div>

Reversing

Reverse the order of the columns.

1
2
3
4
5
6
<div class="row row-xs-reverse">
  <div class="col-2">1</div>
  <div class="col-2">2</div>
  <div class="col-2">3</div>
  <div class="col-2">4</div>
  <div class="col-2">5</div>
  <div class="col-2">6</div>
</div>