Rationale behind negative right/left margins for Grid component #3074
-
|
Hi Paste folks, Me and @james2hey noticed that for the Grid component it applies a negative margin equal to the gutter size. As a result, the Grid creates a horizontal scrollbar where you scroll to see the complete padding -- a bit ugly. (sort of like the same effect as not using Basically this, which is on the Paste docs page showcase of the component too. We were able to get rid of this problem by adding padding equal to the gutter in a parent div. However, we do wonder if there was some specific reason for adding this negative margin to begin with that we should be aware of. Here is the Paste code which adds the negative margin. Thanks in advance 🙂 |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 1 reply
-
|
The main reason if for nesting grids. The new nested grid should still have gutters attached, but the columns should touch the outer wall of the parent column. If you use padding on the grid container you'll indent the child grid. It's a very popular and common way to create grid systems on the web. Is it great? No. Better solutions exist in CSS now with CSS grid, which we support on the Box component. We've just not been able to prioritize a CSS Grid version of the Grid Component yet. It's on our wish list, though. In the meantime, if the negative margins don't work for you, I'd suggest just going with Box and using the CSS grid style props we provide. |
Beta Was this translation helpful? Give feedback.
-
|
Thanks, this is valuable context! 😄 |
Beta Was this translation helpful? Give feedback.
Hi @mannehedlund
The main reason if for nesting grids. The new nested grid should still have gutters attached, but the columns should touch the outer wall of the parent column. If you use padding on the grid container you'll indent the child grid.
It's a very popular and common way to create grid systems on the web.
Is it great? No. Better solutions exist in CSS now with CSS grid, which we support on the Box component. We've just not been able to prioritize a CSS Grid version of the Grid Component yet. It's on our wish list, though.
In the meantime, if the negative margins don't work for you, I'd suggest just going with Box and using the CSS grid style props we provide.