Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add support for responsive layouts with margin-based gutters and calc() #82

Open
JohnAlbin opened this issue May 22, 2016 · 0 comments
Open
Milestone

Comments

@JohnAlbin
Copy link
Owner

Now that Microsoft has dropped support for IE8 and earlier, the support for CSS' calc() looks pretty good.

http://caniuse.com/#feat=calc

This means we could theoretically add support for responsive layouts with margin-based gutters.

The math will be tricky.

grid-width = (num-columns * column-width) + ((num-columns - 1) * gutter-width)
And solving for column-width:
column-width = calc( grid-width/num-columns - gutter-width * (num-columns - 1) / num-columns )

And it just gets ickier from there.

item-width = (span-columns * column-width) + ((span-columns - 1) * gutter-width)

item-width = (span-columns * ( grid-width/num-columns - gutter-width * (num-columns - 1) / num-columns )) + ((span-columns - 1) * gutter-width)

item-width = (span-columns * grid-width/num-columns) - (span-columns * gutter-width * (num-columns - 1) / num-columns )) + (((span-columns - 1) * gutter-width * num-columns) / num-columns)

item-width = (span-columns/num-columns) * grid-width - gutter-width * ((span-columns * (num-columns - 1)) + ((span-columns - 1) * num-columns)) / num-columns

And…

item-position = (position - 1) * (column-width + gutter-width)

Yeah, I'm not doing that last one now.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

1 participant