search

e-oj / Magic-Grid

A simple, lightweight Javascript library for dynamic grid layouts.
https://www.npmjs.com/package/magic-grid
MIT License
3.14k stars 144 forks source link

Ability to remove side space #32

Open filipjnc opened 5 years ago

filipjnc commented 5 years ago

Currently there is some unfilled side space in width of half gutter.

My mitigation is to set negative margins of this width on the parent container to get this space filled.

Would be nice though to have a built-in option for this.

mainrs commented 5 years ago

I was about to create an issue for exactly that. It's weird since the extra width applied to the size doesn't seem to be in correlation with the gutter with for example. Mine is set to 30 but the extra pixels are 27 on each side.

How did you manage to get the right pixel for the margins?

Edit: I just tried applying margin-left and margin-right to by parent but it only works for the left side.

@e-oj This line calculates the width of one column by applying the gutter too. It technically is right, but that would add a gutter to the last column to even if one isn't needed. That would explain the extra space on the right even after applying negative margins to the parent.

talaxasy commented 5 years ago

I also try to remove this extra space on the sides, but so far unsuccessfully (

acrylian commented 4 years ago

It seems to work to set a negativ left and right margin to the container element. Needs a few attempts until it fits as the margin value needed is dependent on the gutter defined. For gutter: 40 negative margins of -28px seem to work for me for example.

stevenamoody commented 4 years ago

I believe I have a fix for this issue, and I opened a PR. See my proposed implementation of a responsive layout test/grid-responsive.html