search

roylee0704 / react-flexbox-grid

A set of React components implementing flexboxgrid with the power of CSS Modules.
http://roylee0704.github.io/react-flexbox-grid/
2.93k stars 205 forks source link

-8px left and right margin for .row class? #158

Closed joelhoelting closed 5 years ago

joelhoelting commented 5 years ago

I am wondering what the logic is behind having a -8px left and right margin for each row? This is problematic in my case because I have a parent container element and each row is overflowing out of the container by 8px on the left and right.

dist/react-flexbox-grid.css

.flexboxgrid2__row___ZtOZv { box-sizing: border-box; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-flex: 0; -ms-flex: 0 1 auto; flex: 0 1 auto; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-right: -8px; margin-left: -8px; }

I also see that the docs recommend always using <Grid fluid> which adds 16px padding on the left and right (causing my content to be pushed in by an extra 8px on the left and right.

joelhoelting commented 5 years ago

Found explanations for this in the previous issues.

ivanmjartan commented 5 years ago

Hi, I am solving the same issue ... could you point me where did you find an explanation?

Thanx

joelhoelting commented 5 years ago

https://github.com/kristoferjoseph/flexboxgrid/issues/144