Within my parent component:
{
this.state.projectList.map(data => <Item details = {data}/>)
}
Inside 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.details.title}
</Typography>
<Typography use="body1" tag="div" theme="text-secondary-on-background">
{this.props.details.content}
</Typography>
</div>
</CardPrimaryAction>
</Card>
</div>
);
}
The rmwc Card component is used to display certain details.
https://i.sstatic.net/vjWZO.png
Currently, all items are stacked vertically. I aim for the layout depicted in the image on the right side, drawn in blue.
I attempted to set the wrapping div's style to
'width':'100%', 'textAlign':'center'Card itself an inline-block, but the issue remains.