I want my inner CSS grid to maintain it's width even when elements are filtered out of it. I tried many solutions for a few hours but just gave up and got the effect by placing dummy elements in my component's rendering array. I want to see if there's a less hacky way to do that just for code maintainability.

Here's the .css for my body and grid

body {
  background-color: #f8fff7;
  color: #4c6f72;
  display: grid;
  font-family: 'Lato', sans-serif;
  justify-content: center;
  text-align: center;
}

.pokemon-grid {
  column-gap: 2rem;
  display: grid;
  grid-template-columns: 23% 23% 23%;
  justify-content: center;
  padding-bottom: 2rem;
  padding-top: 1rem;
  row-gap: 1.25rem;
  text-align: center;
}

Thank you!!