对齐问题CSS网格中的React Card组件

Question

我在React中实现了这个简单的卡片组件，我试图让一堆卡片自动适合网格。与附加的仪表板图像类似，具有大量指标。

  

CSS

.card {
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
    width: 80%;
    border-radius: 5px;
}

.card:hover {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}


.container {
    padding: 2px 16px;
}

.containerf {
  display: flex;
}
.containerf > div {
    flex: 1
}

问题与这些卡的对齐有关，在调整浏览器窗口大小期间它们会缩小。 Iam尝试自动调整它们as shown in mdn

尝试使用React库，例如react-css-grid，styled-css-grid和react-grid-layout。 Flex也不起作用。 我的目标是使卡片在仪表板上按列对齐，卡片将始终具有固定的宽度，并且不会收缩。 当浏览器调整大小时，它应自动对齐网格中的下一行。

我该如何将它作为组件来实现。

import React from 'react'

const Card = (props) => (

<div className="card">
  <div className="container">
    <h4><b>Jane Doe</b></h4> 
    <p>Interior Designe Loreum ipsom more content </p> 
    <p>Interior Designe Loreum ipsom more content  Interior Designe Loreum ipsom more content   Interior Designe Loreum ipsom more content  Interior Designe Loreum ipsom more content </p>

  </div>
</div>


)

export default Card