lost-grid.js is a revolutionary grid system where you can create your grid directly in your markup. It's based off it's incredibly powerful CSS preprocessor sister, Lost Grid.

It uses similar markup to Bootstrap's grid (container > row > columns) so it's very easy to pick up. What sets it apart from Bootstrap's grid is it's ability to use fractions to create grids on-the-fly. Did we mention you can do all this directly in your markup?

Installation

• Include jQuery
• Include lost-grid.js
• (Optional) To avoid a page flash while the JS renders the layout, set body { display: none; } in your CSS.

Getting Started

Let's start by creating 2 elements that are half of their container. Any fraction will work. Any amount of items will work.

<section l-container>
  <div l-row>

    <figure l-col="1/2">...</figure>
    <figure l-col="1/2">...</figure>

  </div>
</section>

We can change the width of these blocks by adding fractions for each breakpoint in lost-grid.js.

<figure l-col="1 1/2 1/4">...</figure>
<figure l-col="1 1/2 1/4">...</figure>
<figure l-col="1 1/2 1/4">...</figure>
<figure l-col="1 1/2 1/4">...</figure>

Add some padding to the sides of containers.

<section l-container="30">
  ...
</section>

Let's offset an element. Pass a positive fraction to create a margin-left offset. Pass a negative one for margin-right.

<figure l-col="1/3" l-offset="1/3">...</figure>
<figure l-col="1/3">...</figure>

In fact, we can pass multiple values to any of our custom attributes that will work in sync with their corresponding breakpoints.

<figure l-col="1/3 1/4" l-offset="1/3 1/4">...</figure>
<figure l-col="1/3 1/4">...</figure>

We can source order with the l-move attribute.

<figure l-col="1/2" l-move="1/2">1</figure>
<figure l-col="1/2" l-move="-1/2">2</figure>

lost-grid.js supports Isotope for columns of unequal height, but in lieu of that, you can clear columns at a certain interval with the l-cycle attribute applied to a row.

<section l-container>
  <div l-row l-cycle="3">

    <figure l-col="1/3">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est, facilis.
    </figure>
    <figure l-col="1/3">
      Lorem ipsum dolor.
    </figure>
    <figure l-col="1/3">
      Lorem ipsum dolor sit amet, consectetur adipisicing.
    </figure>

    <figure l-col="1/3">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est, facilis.
    </figure>

  </div>
</section>

We've even bundled a couple helper classes.

• <div l-align> will align elements both vertically and horizontally, or you can pass 'vertical' or 'horizontal' like so <div l-align="vertical">.
• <div l-edit> will add a translucent background color to all nested elements. Useful for debugging. Accepts hex colors.

Settings

var lost = {
  gutter: 30,
  maxWidth: 1000,
  rtl: false,
  breakpoints: [0, 600, 1000]
};

Browse example code

• https://github.com/corysimmons/lost-grid.js/tree/gh-pages

Browser Support

• IE9+
• Poor support in older Android browsers

Caveats

• Makes your markup look pretty cluttered. There's no real way around this (even with insertRule as it breaks with nesting). If you're worried about this but like this grid's features, I suggest you check out Lost Grid for CSS pre-processors.