Hey I'm actually doing a site with the possibility to connect to multiple services to create some Actions/Reactions. I generalized the display of my services and it's working but I encountered a problem. I canno't display them the way I wanted ( cf the image ). They are all in one component cause of the generalization.

This is my actual display :

And this is the final result I want :

There is my react function in case you need it :

function Services() {
return (
    <div className="Services">
        {ServicesContent.map((val, key) => {
            return (
                <a className="SingleService" href={val.link}>
                    <div >
                        <img src={require("../../img/"   val.logo   ".png")} />
                    </div>
                </a>    
            )
        })}   
    </div>
)
}

And this is my CSS file :

    .Services {
  width: 100%;
  height: 85%;
  display: flex;
  flex-direction:column;
  flex-wrap:wrap;
}

.SingleService {
  margin-bottom: 1%;
  margin-right: 1%;
  border: 3px solid rgb(0, 163, 0);
  background-color: #EDEDED;
  width: 20vw;
  height: 14vh;
  border-radius: 24px;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.ServiceBg {
  display: flex;
  justify-content: center;
}

.ServiceLogo {
  margin-top: 1%;
  width: 50%;
  height: 50%;
}

So if you have any idea that can help me to delete the gap, thank you in advance.

CodePudding user response：

You can try to make the height fixed and exactly make the mapped element size half of the parent element container and use flex in column and wrap it. Height should be made 50% of the parent

.parent {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content:flex-start;
  width: 90vw;
  height: 80vh;
  border: 1px solid red;
}

.child {
  border: 1px solid blue;
  width: 20vw;
  height: 38vh;
  margin:1px;
}

<div >
  <div >child1</div>
  <div >child2</div>
  <div >child3</div>
  <div >child4</div>
  <div >child5</div>
  <div >child6</div>
</div>