The Lan Grid System is designed to be lightweight, nestable, responsive and simple to use.
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.
If you need to nest grid elements then all you have to do is add a class of
grid to any element containing columns.
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.
- Set an element as a container by using the
- Declare columns using BEM syntax (
- You're all done!
- 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
gridclass on each parent column.
- Keep your grid abstracted by using dedicated elements to avoid style conflicts.
- Read more about this grid system here.
<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>