CODEWITHSUNDEEP
javascriptcssreactjs
manny
manny

Reputation: 415

How to display 3 rows of data in react?

I have 12 blogs how to display 3 rows width 4 columns of the blogs snippet in react? I have tried this below but the contents are just being centered in columns

here below is the 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>
                    )
                })
                }

here below is css

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

Upvotes: 1

Views: 2145

Answers (1)

palaѕн
palaѕн

Reputation: 73966

You will need to add a container div for the blog (just add a div before running array map() method) and then you can update your css like:

.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>

Upvotes: 2

Related Questions