LostGrid Version 8 Beta 1 (the second one) (v8.0.0-beta.1)

This second beta release of LostGrid’s Version 8 is working to solve the pixel gap issues that some users experience using Calc-based grids. Inspired by the original creator of LostGrid, Cory Simmons, there is now a “rounder” parameter.

I had gotten reports where rows would either break their line and drop to a new line because they exceeded “100%” or that there was a gap between columns because they were smaller than 100%.

The first adjustment to try to solve this issue was to float the last column to the right in a row. This is pretty standard for grid frameworks and it worked in most cases.

The most recent change was when we adjusted the “rounder” from 99.99 to 99.9 to solve some “Edge” cases (yes, that is a pun for the Microsoft Edge browser). This required a major version bump and it got LostGrid pretty close…but not all the way there.

Presently, there is no simple all-in-one way to solve this issue that I can think of. I tried some over-engineered solutions that involved creating a “virtual row” and thus allowing for 100% to flex in sub-pixel width within a buffer. It was a valiant effort but I deeply fear it would cause more harm than good.

The Pixel Gap

Two divs with a small pixel gap between them

The Solution

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

How to install

You can get your hands on this release by installing it with NPM using the “beta” tag.

npm install lost@beta

This will install the package with the beta tag. This means you’ll be getting the latest changes before anyone else and you’re primed to give feedback on what you like, bugs you find, etc.

How you can help

If you find issues, have troubles, or have any feedback please reach out!

@LostGrid on Twitter, Gitter or submit and issue.