Lost Grid is a powerful grid system built in PostCSS that works with any preprocessor and even vanilla CSS. You can think of it like the Autoprefixer of grid systems.
Near Future Roadmap Outline:
- New documentation to enhance learning and using Lost
- 7.0.0 - Looking to fix some issues and enable more ease of use.
- A focusing of Lost Grid. 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, Lost 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
- Global Grid Settings
- Property Options
- 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.99% * 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) {
float: right;
margin-right: 0;
}
div:nth-child(3n + 1) {
clear: left;
}
/*# sourceMappingURL=style.css.map */
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
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!
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;
}
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;
}
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;
}
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;
}
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;
}
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;
.foo {
...
}
gutter
accepts any unit value.30px
by default.flexbox
acceptsflex
orno-flex
(default).cycle
acceptsnone
or any digit (although this is really weird).auto
by default.
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;
}
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 needlost-flex-container: column;
.
section {
lost-flex-container: row;
}
div {
lost-column: 1/2 flex;
}
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;
}
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-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;
}
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.
section {
height: 100%;
}
div {
lost-row: 1/3;
}
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;
}
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;
}
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;
}
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-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;
}
Example Code
Gotchas
-
If you're experiencing issues when adding padding to an element with
lost-column
, look into addingbox-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
- To fix, escape the math like so:
-
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
calc()
grids work perfect on IE9+ with poor support on old Android browsers (calc()
browser support).- With some polyfills (like the ones included in Boy) Lost works perfect in IE8 as well.
- The Flexbox version of Lost only works with browsers that support Flexbox (IE10+). Unfortunately, there isn't currently a good Flexbox polyfill. Flexbox browser support
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.