CODEWITHSUNDEEP
htmlcsscss-grid
Toniq
Toniq

Reputation: 5006

Hide css grid item without display none

I have a css grid. Items are animated in using transform scaleY. I also have a search field which hides items on demand. The problem is when I hide an item (remove shown class) grid is not re-adjusted because it seems like item although it has height 0 / scaleY 0, it still behaves as part of the grid. I have made a demo to illustrate (one item is hidden for display purpose). Can this be achieved without using display none when I hide the items in grid?

var items = document.querySelectorAll('.item:not(.hidden)')

for (var i = 0, len = items.length; i < len; i++) {
  items[i].classList.add('shown')
}
.wrap {
  display: grid;
  grid-gap: 1rem;
  justify-items: center;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.item {
  padding: 50px;
  background-color: #ccc;
  overflow: hidden;
  box-sizing: border-box;
  transform: scaleY(0);
  transform-style: flat;
  height: 0;
}

.shown {
  transform: scaleY(1);
  opacity: 1;
  height: auto;
}
<div class="wrap">
  <div class="item">1</div>
  <div class="item hidden">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>


</div>

Upvotes: 1

Views: 1863

Answers (1)

DCR
DCR

Reputation: 15665

If you don't want to use display:none you can remove the item. Why can't you use display:none as that would make it easier to display it later?

var items = document.querySelectorAll('.item:not(.hidden)')

document.querySelectorAll('.hidden')[0].remove()



for (var i = 0, len = items.length; i < len; i++) {
  items[i].classList.add('shown')
}
.wrap {
  display: grid;
  grid-gap: 1rem;
  justify-items: center;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.item {
  padding: 50px;
  background-color: #ccc;
  overflow: hidden;
  box-sizing: border-box;
  transform: scaleY(0);
  transform-style: flat;
  height: 0;
}

.shown {
  transform: scaleY(1);
  opacity: 1;
  height: auto;
}
<div class="wrap">
  <div class="item">1</div>
  <div class="item hidden">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>


</div>

Upvotes: 1

Related Questions