Question

Does CSS have a way to automatically set the amount of (fixed-width) columns in a table so that they fill the width of the div element they’re in?

Like, if you have a narrow screen, the table layout may be like so:

. . .
. . .
. . .
. . .

But if you make it slightly wider, the table layout becomes this:

. . . .
. . . .
. . . .

The usage case for this is for an image gallery, though if there’s a simpler and easier way to do it than by using tables, I’m all ears.

PS: I am trying to keep the amount of javascript/jquery stuff to a minimum, so I would prefer solutions that don’t use it.

Answer 1

Not with a <table>, but you could just use elements like this:

<div id="gallery">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
  <div>Item 5</div>
  <div>Item 6</div>
  <div>Item 7</div>
  ...
</div>

And the CSS:

#gallery>div {
  display:inline-block;
  vertical-align:top;
  width:80px;
  height:80px;
}

They will be treated like text, and wrap accordingly. Since they are the same size, the result is a grid. Additionally, this means you don’t have to have a divisible number. If you have a prime number of elements, for example, it would be impossible to make a proper table out of them. Here, though, it gets taken care of for you, like the words at the end of this sentence are at the start of the last line.