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

what is your desired outcome? how much less padding do you want? — Bhavesh Daswani
– Bhavesh Daswani, Commented Jan 7, 2023 at 19:27

John Li · Accepted Answer · 2023-01-08 01:25:02Z

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;

Collectives™ on Stack Overflow

Decrease padding between two row in Grid semantic ui react

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related