如何在MDBBootstrap中对齐项目？

Question

我正在研究React Project。我已经创建了卡，并从json数据中检索了数据。一切正常，除了预计将在行中对齐的项目。以下是代码和图片供参考

Project.js

{/* I have tried justifyItems, display and other,but, of no use */}
<MDBContainer style={{justifyItems: 'center',display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gridTemplateRows:'auto'}}>
      <MDBRow >      
      <MDBCol md="4">
      <MDBCard style={{ width: "22rem", borderRadius:'10px'}} >
      {
        data.map((data, index) => {
          return <div key={index}>
          <MDBCardImage className="img-fluid" src={data.img}
          waves style={{borderRadius:'10px'}} 
          style={{height:'350px', width:'310px'}} />
          <MDBCardBody>
            <MDBCardTitle style={{color:'black'}}>{data.title} </MDBCardTitle>
            <hr/>
            <MDBCardText>
            {data.content}
            </MDBCardText>
            <MDBBtn href="#">Github</MDBBtn>
            <MDBBtn href="#">Live Demo</MDBBtn>
          </MDBCardBody>
          </div>

        })
      }

      </MDBCard>
    </MDBCol>
  </MDBRow>
</MDBContainer>

以下是图片

如上所示，卡不在行中...任何好的解决方案？任何建议或更改都受到赞赏