Как отобразить 3 строки данных в ответ?

Question

У меня 12 блогов, как отобразить 3 строки шириной 4 столбца фрагмента блога в реакции? Я попробовал это ниже, но содержимое просто центрируется в столбцах

здесь ниже jsx

 {Data.map((item) => {
                    return (
                        <div key={item.id} className='div-style'>
                            <div>
                                <img src={item.image} alt="img" width='300' height="200"></img>
                            </div>
                            <div>
                                <h2>{item.header}</h2>
                            </div>
                            <div>
                                <p>{item.pargraph}</p>
                            </div>
                        </div>
                    )
                })
                }

здесь ниже css

.div-style{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

Answer 1

Вам нужно будет добавить контейнер div для блога (просто добавьте div перед запуском метода map()), а затем вы можете обновить css как:

.div-container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.div-container>.div-style {
  flex: 1 1 20%;
  margin: 5px;
  height: 50px;
}

.div-style {
  background-color: #aaa;
  border: 1px solid #777;
}

<div class="div-container">
  <div class="div-style">1</div>
  <div class="div-style">2</div>
  <div class="div-style">3</div>
  <div class="div-style">4</div>
  <div class="div-style">5</div>
  <div class="div-style">6</div>
  <div class="div-style">7</div>
  <div class="div-style">8</div>
  <div class="div-style">9</div>
  <div class="div-style">10</div>
  <div class="div-style">11</div>
  <div class="div-style">12</div>
</div>