HTML Table columns count responsive to window width - html

Question

I'm trying to achieve something like this:
I have a variable amount of data that is fetched from a database. I want to put each data received into a single cell and each cell side-by-side from other. At this point I could reach. You can think of a pokedex. Each pokemon info goes into a single cell (number, image, name).
My problem is: each cell has a fixed width, for example, 100 px. I want my table to create as many columns as possible according to window size. For example: if user window has 1345 px, my table will create 13 cells per row. But I want it to be responsive in realtime: if user resize his/her window to 890 px, my table would now have only 8 cells per row.
How can I achieve that?
Thanks!
EDIT: okay, some pointed me to a post I couldn't find on search. Following top voted answer from this post I kinda achieved what I wanted. It works when I'm using img inside my div. But in my case, I have div inside my div. Something like this:
<div class="wrapper">
<div>
<p>some text</p>
<img src="myimagepath.png" />
<p>more text</p>
</div>
</div>
In my example, wrapper makes just 1 column, not distributing to the whole page like it did when it was only img. How can I workaround this?
PS: I don't know if I should continue the thread on answer's post or continue here. Please let me know so we can close this thread and solve on the proper thread.

Answer 1

Maybe something like this?
.pokedex {
display: flex;
flex-wrap: wrap;
}
.pokedex div {
background: aquamarine;
height: 100px;
margin: 0 1px 1px 0;
text-align: center;
width: 100px;
}
p {
font-size: 12px;
margin: 3px;
}
img {
width: 50px;
}
<div class="pokedex">
<div>
<p>Pokemon 1</p>
<img src="https://assets.pokemon.com/assets/cms2/img/pokedex/detail/001.png">
<p>Bulbasaur</p>
</div>
<div>
<p>Pokemon 2</p>
<img src="https://assets.pokemon.com/assets/cms2/img/pokedex/detail/002.png">
<p>Ivysaur</p>
</div>
<div>
<p>Pokemon 3</p>
<img src="https://assets.pokemon.com/assets/cms2/img/pokedex/detail/003.png">
<p>Venusaur</p>
</div>
<div>
<p>Pokemon 4</p>
<img src="https://assets.pokemon.com/assets/cms2/img/pokedex/detail/004.png">
<p>Charmander</p>
</div>
<div>
<p>Pokemon 5</p>
<img src="https://assets.pokemon.com/assets/cms2/img/pokedex/detail/005.png">
<p>Charmeleon</p>
</div>
<div>
<p>Pokemon 6</p>
<img src="https://assets.pokemon.com/assets/cms2/img/pokedex/detail/006.png">
<p>Charizard</p>
</div>
<div>
<p>Pokemon 7</p>
<img src="https://assets.pokemon.com/assets/cms2/img/pokedex/detail/007.png">
<p>Squirtle</p>
</div>
</div>