If my display currently looks like this with three equally distanced images at the top and two images at the bottom, how can I achieve that design?
I attempted using Bootstrap by setting the top 3 images as
<div className="col-md-4"><div className="col-md-6">https://i.stack.imgur.com/73ZFb.png
This is the code snippet I am currently using:
<div className="container">
<div className="row">
<div className="col-md-4">
<div className="container5">
<img style={{ height: "100%", width: "100%" }}
src="https://www.w3schools.com/howto/img_avatar.png" />
...
</div>
</div>
<div className="col-md-6">
<div className="container5">
<img style={{ height: "100%", width: "100%" }}
src="https://www.w3schools.com/howto/img_avatar.png" />
...
</div>
</div>
</div>
</div>
and here is my current CSS:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
position: relative;
font-family: "Poppins", sans-serif;
}
.container5 {
border-radius: 10px;
width: 300px;
height: 400px;
overflow: hidden;
background-color: coral;
}
...