Реактивный компонент карты

Question

Я пытаюсь создать 3 карты подряд, но я не могу это сделать. Каждый компонент карты создает max-width: 1366px и строку div. Как я могу это сделать?

class CardNew extends React.Component {
    constructor(props) {
        super(props);
    }
    render() {
        return (
            <div class="container news-card" style={{ maxWidth: `1366px` }}>
                <div class="row row-width" style={{ width: `300px`, height: `438px`, marginTop: `60px`, marginLeft: `200px`}}>
                    <div class="card-img-top m-fix" style={{ marginLeft: `-10px` }}><img src="https://telgrafs.com/assets/src/article-basketball-little-0.png"></img></div>
                    <div class="card-text news-category" style={{ paddingBottom: `20px` }}>gündem</div>
                    <div class="card-title news-ct" style={{ marginLeft: `-60px`, marginTop: `15px` }}>Ücretsiz Maske Nasıl Alınır?</div>
                    <div class="card-text news-ctext">E-Devlet üzerinden bilgilerinizi girerek ücretsiz maske temin edebilirsiniz. Talepler Sağlık Bakanlığı ile Ulaştırma ve Altyapı Bakanlığı tarafından sizlere ulaştırılacaktır.</div>
                    <div class="card-img-bottom author-image"><img src="https://telgrafs.com/assets/src/profile-kaa.png"></img></div>
                    <div class="card-author-name">Kerem Alan</div>
                    <div class="card-post-time disabled">5 saat önce</div>
                    <div class="card-text pb-more card-fixed" style={{ color: `#979797`, marginLeft: `` }}>Devamını oku</div>
                </div>
            </div>
        );
    }
}

Что я хочу

Что я получил

Answer 1

Я бы использовал CSS -Сетка для макета, я приведу пример ниже.

Вот ссылка, где вы можете узнать CSS Сетка

Вы должны попробовать с Flexbox также

const App = () => (
    <div className="container">
      <div className="card" />
      <div className="card" />
      <div className="card" />
    </div>
 );
 
 ReactDOM.render(
  <App />,
  document.body
);

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  justify-items: center;
  column-gap: 24px;
  row-gap: 24px;
  max-width: 948px;
  margin: 0 auto;
}


.card {
  height: 438px;
  width: 300px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Answer 2

последовательность классов, которую вы ищете:

• контейнер
• строка
• col-md-XX
• карта
• содержимое вашей карты

релевантно HTML:

<div className="container">
  <div className="row">
    <div className="col-12 col-sm-4">
      <div className="card">
      </div>
    </div>
  </div>
</div>

образец здесь можно использовать стек