0

I am trying to learn CSS grid, I have nested CSS grid and in which the parent CSS grid container has multiple columns each of them have 4 rows and I want the rows to be equal to each other for example height of the first row in the first column equal to the that in a second column.

#product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 1em;
  justify-items: center;
  padding: 1em;
}

#product-grid img {
  width: 100%;
  height: 291px;
}

.product-item {
  display: grid;
  /* grid-auto-rows:1fr;  */
  grid-template-rows: 70px, 100px, 200px, 100px;
  border-style: solid;
  border-color: #2c4251;
  border-width: 1px;
  border-radius: 5px;
  padding: 1em;
}

.cntnt {
  text-align: justify;
  overflow: hidden;
}

.product-item {}

.more {
  text-align: left;
  align-self: end;
}

.ttl {
  margin-top: 20px;
  text-align: center;
  align-self: flex-start;
}
<div id="product-grid">
  <div class='product-item'>
    <img src=imgs/1.png>
    <div class='ttl'>this is test title</div>
    <div class='cntnt'>this is test caption</div>
    <div class='more'>
      <div><a href=/view.php?pid=1>more </a></div>
    </div>
  </div>
  <div class='product-item'><img src=imgs/2.jpg>
    <div class='ttl'>title</div>
    <div class='cntnt'>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolores, inventore? Officia perferendis</div>
    <div class='more'>
      <div><a href=/view.php?pid=2>more </a></div>
    </div>
  </div>
</div>
Nazim Kerimbekov
  • 4,712
  • 8
  • 34
  • 58
mark
  • 351
  • 1
  • 3
  • 16
  • Possible duplicate of [Equal height rows in CSS Grid Layout](https://stackoverflow.com/questions/44488357/equal-height-rows-in-css-grid-layout) – Adam Buchanan Smith May 10 '19 at 13:31
  • Grid won't work across nested divs. You need to set the inner elements in product-item up one level (to de children of the grid container) – vals May 10 '19 at 13:43

0 Answers0