Flexbox与GSS：如何使未知数量的元素平均跨越容器

Question

我一直在玩GridStyleSheets，但是在容器中获取未知数量的元素时，要有相同的宽度，相等的间距和跨度的容器。我已经能够通过Flexbox实现这一目标，但无法通过GSS实现相同的结果。

我创建了2个CodePens来说明我正在尝试做什么。希望获得与Flexbox相同的结果，但使用GSS。

CSS / Flexbox - http://codepen.io/davidwickman/pen/BNzxWq 在这里，您可以相应地添加或减去<article>标签的数量和元素。

GSS - http://codepen.io/davidwickman/pen/QbErMR 这是我对GSS的尝试，但我无法按预期工作。我似乎需要将容器的宽度除以<article>的计数，并将其应用于article[width]。

也许我错过了一些东西，也许还有更好的方法可以让它在GSS中运作？感谢任何帮助，谢谢！

Answer 1

我会使用这样的方法：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);
}

Answer 2

这样可以解决问题：

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];
  }
}

div没有y，高度或宽度受限制。约束元素的一个好的经验法则是去除边距和边距。添加box-sizing: border-box，并始终确保垂直＆amp;水平位置＆amp;尺寸受到限制。

实际上有很多方法可以实现相同的布局。这也可以：

* {
  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;
  }
}