See Example Site/Grids

LostGrid 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;
}

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.

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;
}

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;, and float: right; to it by default. To override this behavior and tell Lost to apply margin-right: 0; and float: right; to a specific iteration, simply pass a cycle param to your lost-column property as 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.

Nesting

Nesting is simple, but context is not supported. Nested elements are relative to their direct parent’s dimensions.

<section>
  <div>a</div>
  <div>
    <div>b</div>
    <div>
      <div>c</div>
      <div>c</div>
    </div>
  </div>
</section>
div {
  lost-column: 1/2;
}

Offsetting 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;
}

Note: the direction of the offset changed in Version 8 to be more natural. Read More

Alignment

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

See lost-align for more details.

<section>
  <div>Aligned</div>
</section>
section {
  lost-align: center;
  width: 600px;
  height: 400px;
}

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

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. You can also set custom colors of your lost-utility: edit; declaration by adding an rgb value after `edit`.

<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 rgb(166, 0, 0);
}

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.

<section>
  <div>1</div>
  <div>2</div>
  <div>3</div>
</section>
section {
  height: 100%;
}

div {
  lost-row: 1/3;
}

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;
}

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;
}

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;
}

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;
@lost rounder 100;
@lost --beta-direction rtl;

.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
  • rounder accepts any number, decimal or whole.
  • --beta-direction accepts “rtl” and offers initial support of Right-to-Left for lost-column and lost-waffle. This support is a “beta” feature and should be expected to change. Please submit any issues or suggestions as an issue. Thanks!

Custom Units

Sometimes you might want to use a custom unit with lost-column, lost-row, or lost-waffle.

Learn more by reading the property: lost-unit

What's the Rounder Settings?

The “rounder” setting is used to fine tune your width of the container based on what browsers you intend to have computability with and how nested the container you’re targeting is.

How does this work?

You can fine tune the global setting of the “rounder” if you are not intending to target some of the browsers that can have a hard time with rounding 1/3 of 100%. This is done with a global @lost rule.

If you want to do this on a per-element basis, you can do that too! This allows you to fine-tune exactly what you need for the situation. This could be if it’s nested deeply and you’re finding that browsers are not rounding correctly.

Global
@lost rounder 99.99999;
Per element
.foo {
  lost-column: 1/3;
  lost-column-rounder: 100;
}
.bar {
  lost-waffle: 1/4;
  lost-column-rounder: 99.98;
}

Grid Direction (RTL)

This is currently a feature in beta. Please expect syntax changes.

LostGrid is currently testing a beta version of Right-to-Left support.

To take advantage of the right-to-left grids it is presently only a global option for all grids. It is prefixed with --beta in order to help guide the final API’s design.

@lost --beta-direction rtl;

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;
}

Lost Center

Horizontally center a container element and apply padding to it.

max-width A max-width to assign. Can be any unit or a fraction of the containing element.
padding Adds padding to the left and right of the generated container
flex | no-flex (no-flex is default) Determines whether this element should use Flexbox or not.
section {
  lost-center: 980px;
}

section {
    lost-center: 2/3;
}

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

section {
  lost-center: 6/8 25px flex;
}

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.
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; }
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). Note: When specifying the gutter, you need to also specify the cycle.
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;
}

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;
}

Lost Masonry Column

Creates a column for working with JS masonry libraries like Isotope. Assigns a margin to each side of the 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-row's gutter.
section {
  lost-masonry-wrap: flex 60px;
}

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

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;
}

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.

If the gutter within the selector is set by lost-column or lost-row then it will be retained in the lost-move output unless the gutter is explicitly set by lost-move or lost-move-gutter.

div {
  lost-column: 1/2;
}

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

div:last-child {
  lost-move: -1/2;
}
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;
}

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 at the same time.

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.
clear | clear-left | clear-right | clear-top | clear-bottom If you are needing to clear an offset, like within a media query, you can do that using the clear parameter. `clear` with clear both left and right margin or top and bottom margin depending on the offset's direction.

Note: the direction of the offset changed in Version 8 to be more natural. Read More

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

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

@media (max-width: 350px) {
  .two-elements:first-child {
    lost-offset: clear-left;
  }
}

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). Note: When specifying the gutter, you need to also specify the cycle.
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;
}

Lost Unit

Allows for a custom unit to be specified for `lost-column`, `lost-row`, and `lost-waffle`

unit `%` is default, `vh`, or `vw` pending the property.
section {
  lost-column: 1/3;
  lost-unit: vw;
}

Lost Utility

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

edit This will add a semi-transparent overlay
edit rgb(r,g,b) Will use a custom color for the edit overlay
edit rgba(r,g,b,a) Will use a custom color for the edit overlay. Alpha value is discarded and fixed at 0.1
edit #09AF00 Will use a custom color for the edit overlay.
edit #09AF00BB Will use a custom color for the edit overlay. Alpha value is discarded and fixed at 0.1
clearfix Adds a clearfix mixin.
overlay [max-width] [columns] [gutter] [color] This will add a semi-transparent full grid overlay. Use same units for max-width and gutter.
section {
  lost-utility: edit;
}

div {
  /* Those four rules have the same effect : */
  lost-utility: edit rgb(15, 150, 25);
  lost-utility: edit rgba(15, 150, 25, 0.5);
  lost-utility: edit #0F9619;
  lost-utility: edit #0F961955;
}

body {
  lost-utility: overlay 1600px 12 20px #ccc;
}

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.
float-right Tells LostGrid to float the last element in the cycle to the right. `lost-waffle` floats all elements left by default.
section {
  height: 100%;
}

div {
  lost-waffle: 1/3 float-right;
}

Lost Gutter (Local)

Allows you to output the gutter that is declared locally within the declaration.

⚠️ This variable is planning to be deprecated soon. Use lost-vars instead.

$lost-gutter-local Outputs the value of the gutter for that particular declaration.
.hero-area {
  lost-column: 1/3 4 50px;
  padding: $lost-gutter-local; /* 50px */
  margin-top: $lost-gutter; /* 30px default gutter */
}

For use with

  • lost-column
  • lost-waffle
  • lost-row
  • lost-offset
  • lost-center
  • lost-masonry-wrap
  • lost-masonry-column

Lost Gutter

Use the global gutter anywhere in the project to help consistency and readability.

⚠️ This variable is planning to be deprecated soon. Use lost-vars instead.

$lost-gutter Outputs the value of the global gutter. Use this as a value anywhere in your project.
Default
.hero-area {
  padding: $lost-gutter; /* 30px */
}
Custom
@lost gutter 40px;

.h1 {
  padding-top: $lost-gutter; /* 40px */
}

Lost Variables

Use to output Lost Variables anywhere in the project to help consistency and readability.

gutter Outputs the value of the global gutter. Use this anywhere in your project.
gutter-local Outputs the value of the gutter for that particular declaration.
.hero-area {
  lost-column: 1/3 4 50px;
  padding: lost-vars('gutter-local'); /* 50px */
  margin-top: lost-vars('gutter'); /* 30px default gutter */
}

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.
  • 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");
      

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. 👍

Thanks

Back to top