HTML Table columns count responsive to window width

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.

Possible duplicate of [CSS3 column layout with dynamic number of columns](https://stackoverflow.com/questions/20597025/css3-column-layout-with-dynamic-number-of-columns) — GalAbra, Jan 18 '18 at 19:16

score 1 · Accepted Answer · answered Jan 19 '18 at 09:52

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>

This works perfectly! This is the answer! Simplest as possible! Thanks. — José João De Oliveira Júnior, Jan 19 '18 at 13:30

HTML Table columns count responsive to window width

1 Answers1