Magic-Grid icon indicating copy to clipboard operation
Magic-Grid copied to clipboard

Ability to remove side space

Open filipjnc opened this issue 4 years ago • 4 comments

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.

filipjnc avatar Aug 02 '19 10:08 filipjnc

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.

mainrs avatar Aug 05 '19 22:08 mainrs

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

talaxasy avatar Aug 17 '19 15:08 talaxasy

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.

acrylian avatar Apr 04 '20 12:04 acrylian

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

stevenamoody avatar Jun 17 '20 00:06 stevenamoody