How to align 3 items responsively next to each other in ReactJS

LeleEdits 0
Viewed 27

does anyone know how to align three items next to each other in ReactJS? Also it should be responsive. Here is my current code:

const EntrySection = () => {
  return (
    <section className='entry-section'>
        <div className='entry-wrapper'>
            <EntryCard {...cardData} className='card' />
            <EntryCard {...cardData} className='card' />
            <EntryCard {...cardData} className='card' />
            <EntryCard {...cardData} className='card' />
            <EntryCard {...cardData} className='card' />
            <EntryCard {...cardData} className='card' />
        </div>
    </section>
  )
}

export default EntrySection

@import '/src/Variables.scss';

.entry-section {
    height: 500px;
    width: 100%;
    background: $gray-3;
    align-items: center;
    padding: 0 300px;

    .entry-wrapper {
        width: 100%;
        height: 100%;
        padding: 50px 0;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;

        .card {
            flex: 0 0 33.333333%;
        }
    }
}

Sadly with this code every card is stacked over each other. Thank you for helping! :)

responsive reactjs css
2 Answers
Arnoud0

You can use flex and gap, I dont know if this is what you want to achieve but here is an example:

screenshot

.entry-section {
  background: gray;
  display: flex;
  justify-content: center;
}

.entry-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.card {
  height: 100px;
  width: 100px;
  background-color: blue;
}
Miguel Hidalgo0
Related