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

Question

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.
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.

Answer 1

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.