波旁整洁的方形网格

Question

试图重写另一个模板(它工作得很好，并且是用原始css3编写的-但是非常混乱)。

大多数东西很容易翻译成波旁/整洁，但我坚持要建立一个响应式图像网格。

<section class="page-content">
  {% for post in site.posts reversed %}
    <div class="myevent" style="background-image:url({{post.cover}});">
  {% endfor %}
</section>

在外部容器中，我有一组动态生成的div(使用jekyll的诱惑)，在大屏幕上，我有每个div占用跨度列(4)[我有媒体查询，根据宽度将列更改为8和4]。

每个div都有一个图像作为背景和一个标题文本标签。如果这是一个没有边沿的固定屏幕(即每个div是宽度的33%)，那么添加33vw作为div高度就很简单了我的问题是让div变成平方。因为我不知道提前什么屏幕宽度，多少边填充外容器得到，有多少列，如果有一个排水沟(是的通常，但没有在单列).....

.page-content {
  @include outer-container;
}
.myevent {
  @include span-columns(4);
  @include omega;
  //
  // has to be square - can't figure out how to calculate this
  //
}
.nth-element {
  // clear gutter every third
  @include omega(3n);
}
// I also have new-breakpoints at certain widths dropping to 8 and 4 columns automatically with corresponding omega(2n) and omega(1n) changes as the column totals change.

我不知道如何计算。myevent的实际宽度，并设置这些div的高度等于宽度

Answer 1

对此的一个可能的答案(也是我可能使用的解决方案)是相对定位span-column对象并绝对定位其中的内容。然后我将添加如下内容:

.my-cool-column {
  position: relative;
  &::before {
    content: "";
    display: block
    padding-top: 100%;
  }
}

这将导致padding top等于父元素的宽度。这应该行得通。