Getting Started

• Basic Columns
• Centering Elements
• Controlling Cycle
• Nesting
• Offsetting Elements
• Alignment
• Edit Mode
• Vertical Grids
• Waffle Grids
• Flexbox Grids
• Masonry Support
• Global Grid Settings
• Custom Units
• What's the Rounder Settings?
• Grid Direction (RTL) Beta

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)

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;

Property Options

• lost-align
• lost-center
• lost-column
• lost-flex-container
• lost-masonry-column
• lost-masonry-wrap
• lost-move
• lost-offset
• lost-row
• lost-unit
• lost-utility
• lost-waffle

Lost Align

Align nested elements. Apply this to a parent container.

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

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.

div {
  lost-column: 1/3;
}

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

Lost Flex Container

Creates a flexbox container.

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.

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.

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.

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.

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.

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`

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.

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.

section {
  height: 100%;
}

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

Variables

• lost-gutter-local ⚠️
• lost-gutter ⚠️
• lost-vars

These are to be used as values.

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.

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

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.

.hero-area {
  lost-column: 1/3 4 50px;
  padding: lost-vars('gutter-local'); /* 50px */
  margin-top: lost-vars('gutter'); /* 30px default gutter */
}