Flexbox vs GSS: How to make an unknown number of elements span their container equally

Question

I have been playing a bit with GridStyleSheets, but having trouble getting an unknown number of elements in a container to have equal widths, equal spacing and span their container. I have been able to achieve this with Flexbox, but having trouble achieving the same result with GSS.

I created 2 CodePens to illustrate what I'm trying to do. Looking to achieve the same result as Flexbox is providing, but using GSS.

CSS/Flexbox - http://codepen.io/davidwickman/pen/BNzxWq enter image description here Here you can add or subtract the number of <article> tags and the elements flex accordingly.

GSS - http://codepen.io/davidwickman/pen/QbErMR enter image description here Here is my attempt at GSS, but I cannot get things to work as expected. Almost seems like I need to divide the width of the container by the count of the <article>'s and apply that to the article[width].

Maybe I'm missing something, maybe there's a better way to go about this to make it work in GSS? Any help is appreciated, thanks!

you could hand-code some css to apply different widths to different numbers of children. i would think 3-6 would be enough coverage, but there's no limit. — dandavis, May 18 '15 at 21:51

score 2 · Answer 1 · answered May 19 '15 at 00:05

I'd use an approach like this: http://codepen.io/paulyoung/pen/rVLKKd

div {
    @h |-(&)-| gap(10) in(::window);
    @v |-(&) gap(10) in(::window);

    @h |-(article)-...-| in(&) gap(20) {
        width: == ^article-width;
        height: == 65;
    }

    @v |-(article)-| in(&) gap(20);
}

score 2 · Accepted Answer · answered May 19 '15 at 00:16

this will do the trick:

http://codepen.io/d4tocchini/pen/MweXBO

* {
  margin: 0;
  box-sizing: border-box;
}

div {   
  @h |(&)| in(::window);        
  @v |-(article)-| in(&) gap(20);
  @h |-(article)-...-| in( & ) gap(20) {
    height: == 65;
    width: == :next[width];
  }
}

The div didn't have it's y, height or width constrained. A good rule of thumb for constrained elements is to remove margins & add box-sizing: border-box, and always make sure the vertical & horizontal positions & sizes are constrained.

There are actually many ways to accomplish the same layout. This will work as well:

* {
  margin:0;
  box-sizing: border-box;
}

@h |(div)| in(::window) {           
  gap-size == 20;
  article-width >= 0; 
  @h |-(article)-...-| in( & ) gap(gap-size) {
    @v |-(&)-| in(^) gap(gap-size);
    height: == 65;
    width: == article-width;
  }
}

Flexbox vs GSS: How to make an unknown number of elements span their container equally

2 Answers2