How can I position an element inside a grid without using relative or absolute positioning

user_19283094 0
Viewed 23

I'm trying to name every element inside a grid and I want to position at the bottom without using the usual absolute or relative positioning

If you notice the p.tag is only on one of the element, dats because it worked successfully on only day element and by the time I tried to expand it, that is copy n paste it on each of the a.tag, the result was something else.

.body {
  position: fixed;
  width: 100%;
  height: 85vh;
  top: 18%;
  border: 2px solid green;
  overflow: auto;
}

.gr1 {
  width: 100%;
  height: 100%;
  border: 2px solid yellow;
}

.gr1 img {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  object-fit: cover;
  object-position: center;
}

.con1 {
  width: 100%;
  height: 75%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}
<div class="con1">
  <a href="" class="gr1">
    <img SRC="onion.jpg" alt="">
    <p class="det1">onion</p>
  </a>
  <a href="" class="gr1">
    <img src="carrot.jpg" alt="">

  </a>
  <a href="" class="gr1">
    <img src="grapes.jpg" alt="">
  </a>
  <a href="" class="gr1">
    <img src="strawberry.jpg" alt="">
  </a>
  <a href="" class="gr1">
    <img src="tomatoes.jpg" alt="">
  </a>
  <a href="" class="gr1">
    <img src="pepper.jpg" alt="">
  </a>
  <a href="" class="gr1">
    <img src="apples.jpg" alt="">
  </a>
</div>

css html
1 Answers

The .gr1 was fixed to the img size, so the p element was being forced out the div. Define .det1 size and placement in the css.

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<style>
    
.body {
 position: fixed;
 width: 100%;
 height: 85vh;
 top: 18%;
 border: 2px solid green;
 overflow: auto;
}
.gr1{
 width: 100%;
 height: 100%;
 border: 2px solid yellow;
} 
img {
 width: 100%;
 height: auto;
 margin: 0 auto;
 object-fit: cover;
 object-position: center;
}
.con1{
 width: 100%;
 height: 75%;
 margin: 0 auto;
 display: grid;
 grid-template-columns: repeat(2, 1fr);
 grid-template-rows: repeat(3, 1fr);
 grid-column-gap: 10px;
 grid-row-gap: 10px;
}
.det1 {
  width: 100%;
  text-align: center;
    }
    
    </style>
<body>

     <div class="con1">
     
      <a href="" class="gr1">
      <img src="blank.jpg" alt="">
      <p class="det1">Onion</p>
      </a>
                    
     <a href="" class="gr1">
      <img src="blank.jpg" alt="">
      <p class="det1">carrot</p>
     </a>
     <a href="" class="gr1">
      <img src="blank.jpg" alt="">
      <p class="det1">grapes</p>
     </a>
     <a href="" class="gr1">
      <img src="blank.jpg" alt="">
      <p class="det1">strawberry</p>
     </a>
     <a href="" class="gr1">
      <img src="blank.jpg" alt="">
      <p class="det1">tomatoes</p>
     </a>
     <a href="" class="gr1">
      <img src="pepper.jpg" alt="">
     </a>
     <a href="" class="gr1">
      <img src="apples.jpg" alt="">
     </a>
     
  </div>

</body>
</html>
user_165729800
Related