3

If I have html like this:

<div id="a">
  <div>a</div>
  <div>b</div>
  <div>c</div>
  <div>d</div>
  <div>e</div>
  <div>f</div>
  <div>g</div>
  <div>h</div>
  <div>i</div>
</div>

I know I can make the items nicely spaced out as in the picture with the red boxes using a flex box, justify-content: space-around, and flex-wrap:wrap. But I'm wondering, is it possible with just css to make the items space themselves out such that the items spread out vertically and horizontally, like in the green image where it would attempt to put the same number of items in each line/row (as long as they're all the same dimensions)?

I'm interested in the case where you don't know ahead of time how many items will be inside the main div #a and you don't know their widths either.

enter image description here

Here's a js-fiddle of the red-boxes version: https://jsfiddle.net/p0Lahgbj/

B T
  • 57,525
  • 34
  • 189
  • 207
  • 2
    how should boxes be distributed if they were 10 or 11? – Fabrizio Calderan Mar 07 '16 at 09:26
  • @fcalderan I would imagine an underlying algorithm would attempt to minimize or maximize something - like minimize the differences in how much content is put on each line for example. If there were 11, it'd probably be best of there were 4 rows, 2 with 3 boxes each, and the last 2 with 2 boxes each. For 10 maybe it could do 3 rows, two with 4 boxes, and one with 2 boxes? I dunno, I'm just wondering if this is something css can do in any approximate way. – B T Mar 07 '16 at 09:34
  • if boxes are 10 and you place them in 4-4-2 the difference is 2. If you place them in 3-3-3-1 the difference is 2 again, so in both these cases you have the same minimization: you should clearly define all the possible cases (or a predictable behaviour) before implementing a solution. – Fabrizio Calderan Mar 07 '16 at 09:40
  • space-between? Please provide a jsFiddle. – vaso123 Mar 07 '16 at 09:40
  • @lolka_bolka I added a jsFiddle of the red boxes version for ya – B T Mar 07 '16 at 09:45
  • 1
    I'm sorry, but it is not clear at all what you want. What I gathered so far: You have an unknown number of boxes and those boxes are of unknown width (are they all the same width? Do you also need something that makes them all the same width?) The positioning of the boxes should be determined by the width of the boxes (as per your comment to Thomas Orlitas answer) and by their amount (as per your initial question). But how exactly? What takes precedence? Do you have any algorithm how this should work? Are you even 100% sure of what you want? Because right now there are too many variables. – mmgross Mar 07 '16 at 11:01
  • 2
    possibly related: http://stackoverflow.com/q/32802202/3597276 – Michael Benjamin Mar 07 '16 at 14:35
  • Basically...NO. See Michael_B's link. – Paulie_D Mar 07 '16 at 17:07
  • @mmgross I don't have a specific and exact thing in mind. It sounds like css doesn't have this ability, since if it did, someone would likely bring up something along the lines of what I described. – B T Mar 07 '16 at 20:17

1 Answers1

1

Using CSS vw unit:

#a {
    border: 1px solid gray;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    width: 450px;
}
#a > div {
    border: 1px solid red;
    width: 100vw;     
    max-width: 33%; /* to have 3 columns */
    box-sizing: border-box;
}
<div id="a">
  <div>a</div>
  <div>b</div>
  <div>c</div>
  <div>d</div>
  <div>e</div>
  <div>f</div>
  <div>g</div>
  <div>h</div>
  <div>i</div>
</div>

9 boxes:

[---] [---] [---]
[---] [---] [---]
[---] [---] [---]

10 boxes:

[---] [---] [---]
[---] [---] [---]
      [---]

11 boxes:

[---] [---] [---]
[---] [---] [---]
   [---] [---]

etc...

JsFiddle 9 boxes

JsFiddle 10 boxes

JsFiddle 11 boxes

Thomas Orlita
  • 1,554
  • 14
  • 28
  • So this is actually a step in the right direction I think, but its not really what I'm looking for. I don't want to have to specify the number of columns in any way like you're doing. I'd like the browser to choose how many columns to use based on the widths of the content. But +1 for going in the right direction! – B T Mar 07 '16 at 10:38
  • Not quite. Its sounding like the real answer is that its not possible in pure css at the moment. Thanks for the attempts tho! – B T Mar 07 '16 at 20:19