How to customize horizontal lines position in Recharts CartesianGrid?

I am trying out Recharts on ReactJS recently and I am having problem to customise the position of the horizontal line of CartesianGrid.

This is what I got at first: Before positioning

This is what I would like to achieve: After positioning

I would like to make the bars sit between the grids. So what I have done here is to change the styling with css.

.recharts-cartesian-grid-horizontal line:nth-last-child(n+3) {
  transform: translate(0, 20px);

But the problem with this is that the lines alignments might be off when the size of the charts changed. I am wondering how can I do this in a better way?