I am trying to create this (Black represents the div in my current code):
Currently the div is not consistent in its placement, like I would like it to be (I would like it to be constantly ini the same place like the image above).
How can I make the div stay in the same place like in the image?
Here is what I currently have:
.content {
display: grid;
grid-template-columns: repeat( auto-fit, minmax(400px, 1fr) );
height: 100%;
padding: 5px;
margin-top: 95px;
/* 25 */
margin-right: 25px;
margin-left: 215px;
margin-bottom: 170px;
text-align: center;
}
#example {
position: absolute;
top: 10px;
left: 130px;
padding: 5px;
background-color: white;
border: 2px solid red;
color: darkgreen;
}
.grid-item:active {
box-shadow: 0 0 5px 0px rgba(0,0,0,1);
}
.grid-item:hover {
background-color: #262626;
}
.grid-item {
position: relative;
padding: 0px;
border-radius: 10px;
transition: 0.2s background-color;
}
.thumbnail {
/* background-color: black; */
/* object-fit: cover;
background-repeat: no-repeat;
background-size: cover; */
margin-right: 5px;
/* width: 95%; */
width: 430px;
height: 240px;
/* height: 70%; */
border-radius: 11px;
border: 1px solid #282828;
cursor: pointer;
object-fit: cover;
}
/* object-fit: cover; */
.details {
display: inline-flex;
/* text-align: center; */
/* display:block; */
/* display:table-cell;
vertical-align:middle; */
/* background-color: grey; */
margin-right: 5px;
/* width: 95%; */
width: 430px;
height: 75px;
cursor: pointer;
}
.portalTitle {
margin-top: 25px;
margin-left: 10px;
/* margin: auto; */
/* line-height: 70px; */
font: Arial;
font-family: sans-serif;
font-size: 16px;
font-weight:500;
}
.profileImg {
cursor: pointer;
width: 45px;
height: 45px;
border-radius: 25px;
margin-top: 10px;
object-fit: cover;
}<div class="content"><div class="grid-item"><img class="thumbnail" src="https://firebasestorage.googleapis.com/v0/b/soundscapeportals.appspot.com/o/9SUaEJqwrbYHv0kyGmAhglyY1eI2%2F8a53b262101685.5a84bec504f01.jpg?alt=media&token=ea80efb6-a7e7-41d6-9c2d-cdc5ef8cc731"><div id="example">This is my div</div><div class="details"><img class="profileImg" src="https://firebasestorage.googleapis.com/v0/b/soundscapeportals.appspot.com/o/9SUaEJqwrbYHv0kyGmAhglyY1eI2%2F8a53b262101685.5a84bec504f01.jpg?alt=media&token=ea80efb6-a7e7-41d6-9c2d-cdc5ef8cc731"><span class="portalTitle"> Shanghai, China night sounds</span></div></div><div class="grid-item"><img class="thumbnail" src="images/testImg.png"><div id="example">This is my div</div><div class="details"><img class="profileImg" src="images/testImg.png"><span class="portalTitle"> Shanghai, China night sounds</span></div></div></div>