I am facing an issue with the varying sizes of react-bootstrap cards within a grid display. Check out the problem I am encountering:
https://i.sstatic.net/szHjI.png
I need the size of Over Under 0.5 card to be different from the one for Match Winner, as there are only 2 selections in the former compared to 3 in the latter. However, I am unsure how to adjust this using CSS. The sizing issue is affecting other cards as well. Below is my React component for a Market, which represents an individual card:
const Market = ({ marketName, selections }) => {
return (
<Card className="market-wrapper">
<Card.Header className="market-header">{marketName}</Card.Header>
<Table>
<tbody>
{selections.map((selection) => (
<tr key={selection.id}>
<td>{selection.name}</td>
<td>{selection.price.toFixed(2)}</td>
</tr>
))}
</tbody>
</Table>
</Card>
);
};
All these cards are contained within a larger card with the className markets-container. Here's the corresponding CSS:
.market-header {
color: #fff;
background-color: #44494f;
padding: 2.5px 15px;
border-bottom: solid 2px #c8ceae;
}
.market-wrapper {
margin: 10px 10px 10px 10px
}
.markets-container {
margin: 10px 0 0 0;
min-height: 400px;
max-height: 400px;
overflow: auto;
display: grid;
grid-template-columns: auto auto;
}