LostGrid is a powerful grid system built in PostCSS that works with any preprocessor and even vanilla CSS.

Near Future Roadmap Outline:

• New documentation to enhance learning and using Lost
• A focusing of LostGrid. With the ever-changing web, Lost wants to be a tool that allows one to dive deep and enable powerful grids, not be the "one tool fits all". With improved documentation and a keen focus, LostGrid plans on being a great grid option to stand alongside the rest of them.

As always, if you have any questions, comments, or concerns please feel free to open an issue. You're also welcome to tweet @LostGrid if an issue seems too formal.

---

Lost makes use of calc() to create stunning grids based on fractions you define without having to pass a lot of options.

Table of Contents

• Installation
• Getting Started
  • Basic Columns
  • Centering Elements
  • Controlling Cycle
  • Nesting
  • Offseting Elements
  • Alignment
  • Edit Mode
  • Vertical Grids
  • Waffle Grids
  • Flexbox Grids
  • Masonry Support
• Global Grid Settings
• Property Options
  • lost-utility
  • lost-flex-container
  • lost-center
  • lost-align
  • lost-column
  • lost-row
  • lost-waffle
  • lost-offset
  • lost-move
  • lost-masonry-wrap
  • lost-masonry-column
• Example Code
• Browser Support
• Gotchas
• Thanks

Getting Started

Lost Grid rules look like this:

div {
  lost-column: 1/3;
}

And the processed CSS looks like this:

div {
  width: calc(99.9% * 1/3 - (30px - 30px * 1/3));
}
div:nth-child(1n) {
  float: left;
  margin-right: 30px;
  clear: none;
}
div:last-child {
  margin-right: 0;
}
div:nth-child(3n) {
  margin-right: 0;
  float: right;
}
div:nth-child(3n + 1) {
  clear: both;
}

⬆️ back to top

 

Basic Columns

To create a basic horizontal grid, just insert some elements into any containing element like so and pass a fraction to the lost-column property. To unset (or remove) a column rule, possibly at a larger breakpoint, use lost-column: none;

<section>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</section>

section {
  lost-utility: clearfix;
}

div {
  lost-column: 1/2;
}

lost-utility: clearfix; is just a clearfix function since Lost Grid elements are floated. It's a good idea to give this to the element wrapping your grid elements every time you have nested floated elements.

⬆️ back to top

 

Centering Elements

You can also make use of the lost-center property to assign a max-width and margin: auto to an element and center it on the page. clearfix will automatically be applied in this case.

section {
  lost-center: 980px;
}

div {
  lost-column: 1/2;
}

⬆️ back to top

 

Controlling Cycle

Every element gets a float: left and margin-right: gutter applied to it except the last element in the row and the last item in a container. Lost will automatically detect the last item in a row (based on the denominator you passed) and apply a margin-right: 0 to it by default.

To override this behavior and tell Lost to apply margin-right: 0 to a specific iteration, simply pass a cycle param to your lost-column property. It's the second argument.

div {
  lost-column: 2/4 2;
}

This will tell Lost to create div:nth-child(2n) { margin-right: 0; } instead of div:nth-child(4n) { margin-right: 0; } (like it would by default and break).

Using this knowledge we can create really flexible layouts with varying widths like so (this will work for a single row nicely).

<section class="row">
  <div class="quarter">1</div>
  <div class="half">2</div>
  <div class="quarter">3</div>
</section>

.row {
  lost-utility: clearfix;
}

.quarter {
  lost-column: 1/4 0;
}

.half {
  lost-column: 1/2 0;
}

There is a global setting to disable/enable cycle by default. Just put @lost cycle auto; or @lost cycle none; at the top of your stylesheet.

It's suggested that you learn the Lost shorthand syntax, but you can specify cycle (and other params) the verbose way with lost-column-cycle.

div {
  lost-column: 2/6;
  lost-column-cycle: 3;
}

The concept of cycle is extremely important to Lost and what sets good Lost developers apart from great Lost developers. Really try to grok this!

⬆️ back to top

 

Nesting

Nesting is simple. There is no context required.

<section>
  <div>a</div>
  <div>
    <div>b</div>
    <div>
      <div>c</div>
      <div>c</div>
    </div>
  </div>
</section>

div {
  lost-column: 1/2;
}

⬆️ back to top

 

Offseting Elements

You can offset columns easily. To offset in the other direction, pass a negative fraction.

<section>
  <div>1</div>
  <div>2</div>
</section>

div {
  lost-column: 1/3;
}

div:first-child {
  lost-offset: 1/3;
}

⬆️ back to top

 

Alignment

Easily align children elements with the lost-align property. It accepts options like top-left, right, center, etc..

<section>
  <div>Aligned</div>
</section>

section {
  lost-align: center;
  width: 600px;
  height: 400px;
}

div {
  width: 100px;
  height: 100px;
}

⬆️ back to top

 

Edit Mode

Use lost-utility: edit; on body to visualize the entire structure of your site, or just specify the areas you're working on.

<section>
  <div>1</div>
  <div>2</div>
  <div>3</div>
</section>

<section>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</section>

section:nth-of-type(1) {
  lost-utility: edit;
}

section:nth-of-type(2) {
  lost-utility: edit;
}

⬆️ back to top

 

Vertical Grids

Once you've mastered the basic horizontal grid system (it shouldn't take long), you can start to make vertical grids that have the same vertical gutters as your horizontal grids. Just use the lost-row property in place of lost-column. These rows will stretch to fill their container's height, so if you'd like to see them take up the full height of the page, set height: 100% on your container.

No other grid system supports vertical grids.

<section>
  <div>1</div>
  <div>2</div>
  <div>3</div>
</section>

section {
  height: 100%;
}

div {
  lost-row: 1/3;
}

⬆️ back to top

 

Waffle Grids

You can even make a horizontal/vertical grid (a waffle grid) which resembles a tic-tac-toe board.

<section>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
</section>

section {
  height: 100%;
}

div {
  lost-waffle: 1/3;
}

⬆️ back to top

 

Flexbox Grids

You can easily change your grids to support Flexbox by altering the global at-rule variable @lost flexbox to flex. Once you do this, all grids throughout your site will use flexed elements. To make sure they are displayed as flexed elements, you need to wrap them in lost-flex-container or lost-center (which includes lost-flex-container by default).

<section>
  <div>1</div>
  <div>2</div>
  <div>3</div>
</section>

@lost flexbox flex;

section {
  lost-center: 980px;
}

div {
  lost-column: 1/3;
}

Flexbox offers slightly cleaner output and avoids the use of clearfix and other issues with float-based layouts. It also allows you to have elements of even height rather easily, and much more. The downside is, Flexbox doesn't work in IE9 or below, so keep that in mind if you have a client that needs that kind of support.

Also note that waffle grids work well for the most part, but are somewhat finicky in fringe situations. All properties provide a way to disable or enable Flexbox per element with the flex parameter so if you'd like to disable it for a specific case you could do this:

<section>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</section>

@lost flexbox flex;

section {
  lost-center: 980px no-flex;
}

div {
  lost-waffle: 1/3 no-flex;
}

⬆️ back to top

 

Masonry Support

Lost supports masonry plugins like Isotope. To accomplish this we need to change how the margins work. Instead of applying a margin-right to everything, we need to apply it to both sides. We've made a couple special properties to help with this: lost-masonry-column which creates a margin on the left and right of each element it's applied to, and lost-masonry-wrap which wraps your columns and applies a negative margin to the left and right to them to help line them up with containing elements.

<section>
  <div>1</div>
  <div>2</div>
  <div>3</div>
</section>

section {
  lost-masonry-wrap: no-flex;
}

div {
  lost-masonry-column: 1/3;
}

⬆️ back to top

 

Global Grid Settings

Lost uses PostCSS which means to override global variables we need to use something called "at-rules". They're easy enough. Just define them at the top of your stylesheet and you're good to go.

@lost gutter 60px;
@lost flexbox flex;
@lost cycle none;
@lost clearing left

.foo {
  ...
}

• gutter accepts any unit value. 30px (default).
• flexbox accepts flex or no-flex (default).
• cycle accepts none or any digit (although this is really weird). auto by default.
• clearing accepts left or both (default).
  • See #276 for details

⬆️ back to top

 

Property Options

lost-utility

A general utility toolbelt for Lost. Included are mixins that require no additional input other than being called.

• edit|clearfix - The mixin to create.

section {
  lost-utility: edit;
}

⬆️ back to top

 

lost-flex-container

Creates a Flexbox container.

• row|column - The flex-direction the container should create. This is typically opposite to the element you're creating so a row would need lost-flex-container: column;.

section {
  lost-flex-container: row;
}

div {
  lost-column: 1/2 flex;
}

⬆️ back to top

 

lost-center

Horizontally center a container element and apply padding to it.

• max-width - A max-width to assign. Can be any unit.
• padding - Padding on the left and right of the element. Can be any unit.
• flex|no-flex - Determines whether this element should use Flexbox or not.

section {
  lost-center: 980px;
}

section {
  lost-center: 1140px 30px flex;
}

⬆️ back to top

 

lost-align

Align nested elements. Apply this to a parent container.

• reset|horizontal|vertical|top-left|top-center|top|top-right|middle-left|left|middle-center|center|middle-right|right|bottom-left|bottom-center|bottom|bottom-right - The position the nested element takes relative to the containing element.
• flex|no-flex - Determines whether this element should use Flexbox or not.

.parent {
  lost-align: right;
  width: 600px;
  height: 400px;
}

.child {
  width: 300px;
  height: 150px;
}

⬆️ back to top

 

lost-column

Creates a column that is a fraction of the size of its containing element's width with a gutter.

• fraction - This is a simple fraction of the containing element's width.
• gutter - The margin on the right side of the element used to create a gutter. Typically this is left alone and settings.gutter will be used, but you can override it here if you want certain elements to have a particularly large or small gutter (pass 0 for no gutter at all).
  • When specifying the gutter, you need to also specify the cycle. see issue 181
• cycle - Lost works by assigning a margin-right to all elements except the last in the row. It does this by default by using the denominator of the fraction you pick. To override the default use this param., e.g.: .foo { lost-column: 2/4 2; }
• flex|no-flex - Determines whether this element should use Flexbox or not.
• none - Resets the column (back to browser defaults)

div {
  lost-column: 1/3;
}

div {
  lost-column: 2/6 3 60px flex;
}

⬆️ back to top

 

lost-row

Creates a row that is a fraction of the size of its containing element's height with a gutter.

• fraction - This is a simple fraction of the containing element's height.
• gutter - The margin on the bottom of the element used to create a gutter. Typically this is left alone and settings.gutter will be used, but you can override it here if you want certain elements to have a particularly large or small gutter (pass 0 for no gutter at all).
• flex|no-flex - Determines whether this element should use Flexbox or not.
• none - Resets the row (back to browser defaults)

section {
  height: 100%;
}

div {
  lost-row: 1/3;
}

⬆️ back to top

 

lost-waffle

Creates a block that is a fraction of the size of its containing element's width AND height with a gutter on the right and bottom.

• fraction - This is a simple fraction of the containing element's width and height.
• cycle - Lost works by assigning a margin-right/bottom to all elements except the last row (no margin-bottom) and the last column (no margin-right). It does this by default by using the denominator of the fraction you pick. To override this default use this param., e.g.: .foo { lost-waffle: 2/4 2; }
• gutter - The margin on the right and bottom side of the element used to create a gutter. Typically this is left alone and the global $gutter will be used, but you can override it here if you want certain elements to have a particularly large or small gutter (pass 0 for no gutter at all).
• flex|no-flex - Determines whether this element should use Flexbox or not.

section {
  height: 100%;
}

div {
  lost-waffle: 1/3;
}

⬆️ back to top

 

lost-offset

Margin to the left, right, bottom, or top, of an element depending on if the fraction passed is positive or negative. It works for both horizontal and vertical grids but not both.

• fraction - Fraction of the container to be offset.
• row|column - Direction the grid is going. Should be the opposite of the column or row it's being used on. Defaults to row.
• gutter - How large the gutter involved is, typically this won't be adjusted, but if you have set the elements for that container to have different gutters than default, you will need to match that gutter here as well.

.two-elements {
  lost-column: 1/3;
}

.two-elements:first-child {
  lost-offset: 1/3;
}

⬆️ back to top

 

lost-move

Source ordering. Shift elements left, right, up, or down, by their left or top position by passing a positive or negative fraction.

• fraction - Fraction of the container to be shifted.
• row|column - Direction the grid is going. Should be the opposite of the column or row it's being used on.
• gutter - Adjust the size of the gutter for this movement. Should match the element's gutter.

div {
  lost-column: 1/2;
}

div:first-child {
  lost-move: 1/2;
}

div:last-child {
  lost-move: -1/2;
}

note: If a gutter is set, lost-move will not retain it and will need to be set manually

See #195 for more details. This is projected to be fixed in 7.0.0.

div {
  lost-column: 1/2 0 0;
}

div:first-child {
  lost-move: 1/2 0 0;
}

div:last-child {
  lost-move: -1/2 0 0;
}

⬆️ back to top

 

lost-masonry-wrap

Creates a wrapping element for working with JS Masonry libraries like Isotope. Assigns a negative margin on each side of this wrapping element.

• flex|no-flex - Determines whether this element should use Flexbox or not.
• gutter - How large the gutter involved is, typically this won't be adjusted and will inherit settings.gutter, but it's made available if you want your masonry grid to have a special gutter, it should match your masonry-column's gutter.

section {
  lost-masonry-wrap: no-flex;
}

div {
  lost-masonry-column: 1/3;
}

⬆️ back to top

 

lost-masonry-column

Creates a column for working with JS masonry libraries like Isotope. Assigns a margin to each side of the element.

• gutter - How large the gutter involved is, typically this won't be adjusted and will inherit settings.gutter, but it's made available if you want your masonry grid to have a special gutter, it should match your masonry-row's gutter.
• flex|no-flex - Determines whether this element should use Flexbox or not.

section {
  lost-masonry-wrap: flex 60px;
}

div {
  lost-masonry-column: 1/3 60px flex;
}

⬆️ back to top

 

Example Code

• https://github.com/peterramsing/lost/tree/gh-pages

⬆️ back to top

 

Gotchas

• If you're experiencing issues when adding padding to an element with lost-column, look into adding box-sizing: border-box See Issue 118

  • Especially if you're expecting two elements to be next to each other and they end up being on top of each other.

• If you're using Less there are sometimes issues with fractions being divided before Lost can interpret them.

  • To fix, escape the math like so: lost-column: ~"1/2";.
  • See: Lost issue 229, Less issue 974

• If you're using Less in version <2.6 you need to escape any @lost declarations like so: See Issue 197

  .escape-at-rules(@literal) {
      @namespace ~"lostgrid; @{literal}";
  }
  
  .escape-at-rules("@lost flexbox flex");

⬆️ back to top

 

Browser Support

• LostGrid relies on calc() to create the grid. Thus, LostGrid is limited to browsers that support calc(). The great thing is that calc() is widely supported in all current browsers and the LostGrid usage of calc() is supported as far back as IE9+.
• If using LostGrid in flexbox mode browser support is limited to IE 10+.
• Calc browser support
• Flexbox browser support

Official Support

• LostGrid is tested in the following browsers for compatibility
  • IE10+ (IE9 has the same calc() support as IE10 except for background position which LostGrid doesn't affect)
  • Evergreen Browsers (as they update automatically, tests are performed on the latest version of the following browsers)
    • Chrome
      • Chrome Canary + Chromium as well
    • Opera
    • Firefox
      • FirefoxDeveloperEdition as well
    • Edge
  • Safari 9+
• Automated browser testing with Selenium is coming soon. 👍

⬆️ back to top

 

Thanks

• Cory Simmons for creating this grid!
• Alex Bass for being available to bounce ideas off of.
• Maria Keller for the amazing logo. Be sure to hire her for all your design and motion graphic needs.
• Everyone who files an Issue when something isn't working as expected.
• Everyone who has contributed.

⬆️ back to top