1

我在下面创建了一个布局display: grid，我使用了旧padding-top技巧来制作流畅的方形 div，但我想知道是否有更好的方法来做到这一点，无论是使用 CSS Grid 还是 Flexbox。布局应该是原样，而不是使用 JS。

https://codepen.io/anon/pen/GWzavX

.o-container {
  margin: 0 auto;
  max-width: 1280px;
}

.o-grid {
  box-sizing: border-box;
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 1fr);
  max-width: 100%;
  padding: 0 1rem;
  width: 100%;
}

.o-grid__content {
  box-sizing: border-box;
  height: 100%;
  padding: 1rem;
  position: absolute;
  top: 0;
  width: 100%;
}

.o-grid__item {
  box-shadow: inset 0 0 0 1px red;
  position: relative;
}

.o-grid__item--tall {
  grid-row: span 2;
}

.o-grid__item--wide {
  grid-column: span 2;
  padding-top: 50%;
}
<div class="o-container">
  <div class="o-grid">
    <div class="o-grid__item o-grid__item--wide">
      <div class="o-grid__content">
        1. 2x1
      </div>
    </div>
    <div class="o-grid__item">
      <div class="o-grid__content">
        2. 1x1
      </div>
    </div>
    <div class="o-grid__item o-grid__item--tall">
      <div class="o-grid__content">
        3. 1x2
      </div>
    </div>
    <div class="o-grid__item">
      <div class="o-grid__content">
        4. 1x1
      </div>
    </div>
    <div class="o-grid__item">
      <div class="o-grid__content">
        5. 1x1
      </div>
    </div>
    <div class="o-grid__item">
      <div class="o-grid__content">
        6. 1x1
      </div>
    </div>
  </div>
</div>

4

3 回答 3

2

我在下面创建了一个布局display: grid，我使用了旧padding-top技巧来制作流畅的方形 div，但我想知道是否有更好的方法来做到这一点，无论是使用 CSS Grid 还是 Flexbox。

事情的真相是你将不得不找到另一种方法来完成这项工作，除非你只为 Chrome 编写代码。

在 CSS Grid 中，这个padding-top技巧在 Firefox 中失败了。规范提供了原因：

6.4. 网格项目边距和填充

作者应该完全避免在网格项目的填充或边距中使用百分比，因为它们在不同的浏览器中会得到不同的行为。

网格项目的百分比边距和填充可以通过以下任一方式解决：

  • 他们自己的轴（左/右百分比根据宽度解析，顶部/底部根据高度解析），或者，
  • 内联轴（左/右/上/下百分比都根据宽度解析）。

用户代理必须选择这两种行为之一。

注意：这种差异很糟糕，但它准确地捕捉到了世界的当前状态（实现之间没有共识，CSSWG 内部也没有共识）。CSSWG 的意图是让浏览器集中在其中一种行为上，届时将修改规范以要求这样做。

这个问题也存在于 Flexbox 中：为什么百分比填充在 Firefox 中对弹性项目不起作用？

因此，此时您最好的选择可能是视口百分比单位。

从规范：

5.1.2。视口百分比长度：vw, vh, vmin,vmax单位

视口百分比长度与初始包含块的大小有关。当初始包含块的高度或宽度发生变化时，它们会相应地缩放。

  • vw unit - 等于初始包含块宽度的 1%。
  • vh 单位- 等于初始包含块高度的 1%。
  • vmin 单位- 等于 or 中的较小vw者vh。
  • vmax 单位- 等于 或 中的较大vw者vh。

这是一个粗略的草图：修改后的codepen

于 2017-04-16T20:53:24.437 回答
0

没有“干净”的方法来实现元素的设置纵横比，网格与否。零高度和基于百分比的填充技巧可能是最常见的解决方案。

这样做的缺点是它锁定了元素的高度，所以如果元素太小，它的内容就会溢出。

我喜欢一种稍微不同的方法，它使用浮动的伪元素来实现相同的结果，但如果需要，还允许元素增长以包含溢出：

.o-grid__item--wide::before {
  content: "";
  float: left;
  padding-bottom: 50%;
}
.o-grid__item--wide::after {
  clear: left;
  content: " ";
  display: table;
}

在网格中使用它，您可能希望摆脱您的grid-template-rows声明。否则，如果一个元素增长到包含溢出，它也会改变所有其他网格行的高度。

于 2017-04-04T19:48:08.720 回答
0

尝试用

height: calc(25vw - 1.5rem);

或者更好的是，将其应用于所有网格元素，而不仅仅是第一个：

.o-grid__item {
  box-shadow: inset 0 0 0 1px red;
  position: relative;
  height: calc(25vw - 1.5rem); /* allow for the spacing between squares */
}

.o-grid__item--tall {
  grid-row: span 2;
  height: calc(50vw - 1rem); 
}

.o-grid__item--wide {
  grid-column: span 2;
}
于 2017-04-03T16:23:56.530 回答