CODEWITHSUNDEEP
htmlcssreactjs
Dawn17
Dawn17

Reputation: 8297

How to horizontally align card elements (rmwc) in React?

In my parent component:

        {
          this.state.projectList.map(dat => <Item data = {dat}/>)
        }

in the child component Item

render() {
    return (
        <div style={{'width':'100%', 'textAlign':'center'}}>
            <Card style={{ width: '25rem', padding: '1rem', display: 'inline-block' }}>
                <CardPrimaryAction>
                    <div style={{ padding: '0 1rem 1rem 1rem' }}>
                    <Typography use="headline6" tag="h2">
                        {this.props.data.name}
                    </Typography>
                    <Typography use="body1" tag="div" theme="text-secondary-on-background">
                        {this.props.data.description}
                    </Typography>
                    </div>
                </CardPrimaryAction>
            </Card>
        </div>
    );
}

I am using the rmwc Card component to put some stuff.

enter image description here

Right now it just puts all rendered items vertically like a stack. What I actually want is the small sketch in a blue pen on the right side of the image.

I tried to give the wrapping div 'width':'100%', 'textAlign':'center' and the Card itself an inline-block but it's still the same.

Upvotes: 2

Views: 1975

Answers (1)

Abhinav Kinagi
Abhinav Kinagi

Reputation: 3831

In parent component enclose your map function with GridList component of material-ui specifying the required columns. Then enclose your data in GridListTile. This is shown below,

 <div>
      <GridList cols={2} spacing={16}>
        this.state.projectList.map(dat => 
          <GridListTile item key={dat} xs={6}> 
            <Item data = {dat}/>
          <GridListTile/>
       ))}
     </GridList>
 </div>

In child component, remove the parent <div> and you are good to go. Please do import necessary dependencies.

Upvotes: 1

Related Questions