I'm currently incorporating Material UI into my project,
Within my list of cards, I aim for them to display one after the other horizontally and then continue in the same fashion on the next row. However, they are currently stacking vertically.
I've attempted to apply some custom CSS without success. Could someone please review my code? At this point, there are only two cards present. By utilizing the box, I managed to add some margin to the cards. But how can I achieve the desired layout where they appear side by side?
function Blogs() {
const [expanded, setExpanded] = React.useState(false);
const handleExpandClick = () => {
setExpanded(!expanded);
};
return (
<>
<Box m={6}>
<Card sx={{ maxWidth: 345 }}>
<CardHeader
title="It’s a cocktail o’clock."
subheader="May 14, 2021"
/>
<CardMedia
component="img"
height="194"
image="https://img.freepik.com/free-photo/selection-various-cocktails-table_140725-2909.jpg?w=2000"
alt="Paella dish"
/>
<CardContent>
<Typography variant="body2" color="text.secondary">
Beat The Heat With Chilled Cocktails At The Best Bars In New York.
</Typography>
</CardContent>
<CardActions disableSpacing>
<ExpandMore
expand={expanded}
onClick={handleExpandClick}
aria-expanded={expanded}
aria-label="show more"
>
<ExpandMoreIcon />
</ExpandMore>
</CardActions>
<Collapse in={expanded} timeout="auto" unmountOnExit>
<CardContent>
<Typography paragraph>To a foodie, summer means one thing and one thing only – DRINKS!</Typography>
<Typography paragraph>
Yes people, we know it's hot out there and the only way to quench your thirst is by guzzling down a bunch of ice-cold cocktails
</Typography>
<Typography paragraph>
<h4>1.The Bar Room at The Beekman</h4>
Visit the beautiful Bar Room in the historic Beekman Hotel for high-key romance that really wows.
Do try the whiskey sour.One of the best drinks available.
<h4>2.Dublin House</h4>
You can never go wrong with Sláinte! Margarita,Pot O'Gold, & Irish Old Fashioned
<h4>3.Russian Samovar</h4>
Alpensahne,Amarula Cream Liqueur, Caribou,Feni
</Typography>
</CardContent>
</Collapse>
</Card>
</Box>
<Box m={6}>
<Card sx={{ maxWidth: 345 }}>
<CardHeader
title="Winner Winner Pizza Dinner"
subheader="May 14, 2021"
/>
<CardMedia
component="img"
height="194"
image="https://cdn.shopify.com/s/files/1/0624/9853/articles/20220211142645-margherita-9920.jpg?crop=center&height=800&v=1660843558&width=800"
alt="Pizza dinner"
/>
<CardContent>
<Typography variant="body2" color="text.secondary">
A delectable pizza delight awaits you as the winner!
</Typography>
</CardContent>
<CardActions disableSpacing>
<ExpandMore
expand={expanded}
onClick={handleExpandClick}
aria-expanded={expanded}
aria-label="show more"
>
<ExpandMoreIcon />
</ExpandMore>
</CardActions>
<Collapse in={expanded} timeout="auto" unmountOnExit>
<CardContent>
<Typography paragraph>Indulge in some mouth-watering slices of pizza, knowing that victory tastes oh so good!</Typography>
<Typography paragraph>
Treat yourself to the most amazing flavors while savoring every bite of that delicious pizza goodness.
</Typography>
<Typography paragraph>
<h4>1.Margherita Pizza</h4>
Experience perfection in simplicity with this classic pizza loaded with mozzarella cheese and fresh basil leaves.
Enjoy each cheesy bite and feel the Italian pizza magic come alive!
<h4>2.Pepperoni Passion Pizza</h4>
Succumb to your pepperoni cravings with this meaty marvel topped with spicy pepperonis dancing on melted cheese and harmonizing tomato sauce.
Give in to the enticing flavors and enjoy every slice of this delightful creation.
</Typography>
</CardContent>
</Collapse>
</Card>
</Box>
</>
);
}
export default Blogs;