Grid falls apart after i give any margin or padding

Question

I am using bootstrap-grid system with Material UI, everything works great just a single problem and its the fact that the grid system doesn't keep its slots space after any padding or margin and instead the items go to the next row or line when there is not enough space
Here is an example
As you can see in the example, each button has a grid size of 3, meaning there should be 4 button in each row, but because of just a little bit of padding and margin now there is 3 button in each line.
What i am expecting is that the items automatically grow smaller in width when margin and padding is applied instead of going to the next line or row, how can i achieve such a thing ?
Thanks.

Answer 1

Don't use the bootstrap col- classes on your button. Wrap your button inside a div like this:

for (var i = 0; i < 10; i++) {
    buttonArray.push(
      <div className="col-sm-3 col-md-3 col-lg-3">
      <Button
        variant="contained"
        className={classes.button + " "}
      >
        Default
      </Button>
      </div>
    );
  }

Now you only need to change the styling of the button (remove / modify this):

const useStyles = makeStyles(theme => ({
  button: {
    padding: theme.spacing(1),
    margin: theme.spacing(1)
  }
}));

If you want you can add padding / margin to your button. NEVER EVER add padding / margin to classes like .row or .col-*