Decrease padding between two row in Grid semantic ui react

Question

I am using grid in semantic ui react and you are able to see in picture name and mob have padding i want to decrease these padding between them

Code:

import React from 'react'
import { Grid, Image } from 'semantic-ui-react'

const GridExampleRows = () => (
  <Grid columns={2}>
    <Grid.Row>
      <Grid.Column>
        <span>Name</span>
      </Grid.Column>
      <Grid.Column>
        <span>: Arman</span>
      </Grid.Column>
    </Grid.Row>

    <Grid.Row>
      <Grid.Column>
        <span>Mob</span>
      </Grid.Column>
      <Grid.Column>
        <span>: 0987654321</span>
      </Grid.Column>
    </Grid.Row>
  </Grid>
)

export default GridExampleRows

Answer 1

Perhaps try define inline styles with reduced padding, and apply to Grid.Row.

It seems that Image is also included as import but not used in posted example, so the styles value would possibly need to be further adjusted to be also fitting for Image.

Quick basic example: stackblitz

// 👇 Set top and bottom padding 3px, left and right 0px
const rowStyle = { padding: "3px 0px" };

const GridExampleRows = () => (
  <Grid columns={2}>
    <Grid.Row style={rowStyle}>
      <Grid.Column>
        <span>Name</span>
      </Grid.Column>
      <Grid.Column>
        <span>: Arman</span>
      </Grid.Column>
    </Grid.Row>

    <Grid.Row style={rowStyle}>
      <Grid.Column>
        <span>Mob</span>
      </Grid.Column>
      <Grid.Column>
        <span>: 0987654321</span>
      </Grid.Column>
    </Grid.Row>
  </Grid>
);

export default GridExampleRows;