我有一个数据阵列与多个卡。有些卡片的内容比其他的多。我想动态调整卡片高度，使所有卡片都具有相同的高度。怎样才能做到呢？
<Row> {data.map((item) => ( <Col xs={12} sm={12} md={6} lg={4} xl={3} xxl={3} className="mb-4"> <Card> {item.content} </Card> </Col> ))} </Row>```
<Row>
{data.map((item) => (
<Col xs={12} sm={12} md={6} lg={4} xl={3} xxl={3} className="mb-4">
<Card>
{item.content}
</Card>
</Col>
))}
</Row>```
字符串
cuxqih211#
您可以将此样式添加到容器中：
.container { display: flex; align-items: stretch;}
.container {
display: flex;
align-items: stretch;
}
.container { display: flex; align-items: stretch; padding: 5px; gap: 5px; border: solid blue 1px; border-radius: 5px;}.child-obj{ border: solid black 1px; border-radius: 5px; padding: 5px;}
padding: 5px;
gap: 5px;
border: solid blue 1px;
border-radius: 5px;
.child-obj{
border: solid black 1px;
<div class="container"> <div class="child-obj"> <p>Some content...</p> </div> <div class="child-obj"> <p>Some content...</p> <p>Some content...</p> <p>Some content...</p> </div> <div class="child-obj"> <p>Some content...</p> <p>Some content...</p> </div></div>
<div class="container">
<div class="child-obj">
<p>Some content...</p>
</div>
的数据
dy2hfwbg2#
您可以使用grid-auto-rows css属性对网格布局执行此操作。例如：
grid-auto-rows
<div class="container"> <div class="card"> <p>Hello World!</p> </div> <div class="card"></div> <div class="card"></div> <div class="card"></div></div>.container{ display: grid; width: 100%; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr;}.card{ background-color: red; width: 50px;}
<div class="card">
<p>Hello World!</p>
<div class="card"></div>
.container
{
display: grid;
width: 100%;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 1fr;
.card
background-color: red;
width: 50px;
字符串所有的卡片都将与最高的卡片高度相同。现场代码：https://jsfiddle.net/dtyu8Lqv/84/
2条答案
按热度按时间cuxqih211#
您可以将此样式添加到容器中：
字符串
的数据
dy2hfwbg2#
您可以使用
grid-auto-rowscss属性对网格布局执行此操作。例如：
字符串
所有的卡片都将与最高的卡片高度相同。
现场代码：https://jsfiddle.net/dtyu8Lqv/84/