0

I have a css column grid. (the icons div is a child of a div with a dynamic/auto height)

The grid items must be squares. There are a lot of examples how you can achieve this in a row / horizontal approach For the column / vertical it doesn't work (I can't get it to work)

.icons {
  height: 100%;
  display: grid;
  grid-template-rows: 1fr 1fr;
  grid-gap: 25px;
}

.icon-wrapper {
  background-color: tomato;
  height: 100%;
  // width: 0;
  // padding-right: 100%;
}
<div class="icons">
  <div class="icon-wrapper">
    <div class="icon">icon 1</div>
  </div>
  <div class="icon-wrapper">
    <div class="icon">123</div>
  </div>
</div>

Can someone please help me.

Babulaas
  • 761
  • 3
  • 13
  • 47
  • @Temani Afif Read the question please before you close the question. the duplicate answers are for columns not for rows. – Babulaas May 22 '20 at 13:52
  • I added 3 duplicates, all of them cover the all the cases of keeping the aspect ratio. – Temani Afif May 22 '20 at 13:53
  • in two cases you know the width. In my situation is the opposite. I know the height not the width. The last one is jQuery. I do not want to / can't use jQuery for my solution. I aready tried these solution as I mentioned. – Babulaas May 22 '20 at 15:33
  • https://stackoverflow.com/a/14911949/8620333 .. consider reading *all* the duplicate, jQuery is only inside the question – Temani Afif May 22 '20 at 15:37

0 Answers0