Lan Grid System · Lightweight & Nestable

The Lan Grid System is designed to be lightweight, nestable, responsive and simple to use.

View on GitHub

Lightweight

As the Lan Grid System's minified CSS file comes in at only 551 bytes, it won't add any bloat to your project's file size.

Nestable

If you need to nest grid elements then all you have to do is add a class of grid to any element containing columns.

Responsive

Designed to be mobile first, each column defaults to 100% width unless an easily adjusted break point is reached.

Simple To Use

The CSS file is only 30 lines of code making it easy to manage and change. You can also use SCSS if you'd prefer.

Usage:

Set an element as a container by using the grid class.
Declare columns using BEM syntax (grid__col--{width}).
You're all done!

Notes:

You need to use block-level elements when declaring containers and columns.
White space between columns needs to be commented out in your markup.
To nest columns, simply use the grid class on each parent column.
Keep your grid abstracted by using dedicated elements to avoid style conflicts.

Example:

<div class="grid">
    <div class="grid  grid__col--67">
        <div class="grid__col--50">

        </div><!--
     --><div class="grid__col--50">

        </div>
    </div><!--
 --><div class="grid__col--33">

    </div>
</div>

View on GitHub