CSS网格布局：调整大小时保持水平和垂直排水沟大小相同

Question

我想做的事：我尝试使用 CSS 网格布局来实现页面。在全尺寸下，垂直和水平间距应为 20 像素。但如果它当然必须响应。 确切地说，我希望水平装订线以与垂直装订线相同的方式调整大小，以保持图片之间相同的边距比率。

我的问题：我尝试了几种方法来实现这一点。在下面的代码中，我使用了 1.25em。为什么？我的假设是，由于默认字体大小约为 16px，我认为 1.25em (20px) 应该可以解决问题。但它不起作用......我找不到另一种方法来获得所需的行为。你能帮忙指点一下吗？

.wrapper {
  max-width: 1420px;
  margin: 0 auto 0 auto;
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: auto;
}   
figure {
  margin: 0;
  padding: 0;
}
img {
  max-width: 100%;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
/*First section*/
.wide {
  display: grid;
  grid-template-columns: 100%;  /* 1420px; */
  grid-template-rows: auto 1.25em;
}
.wide-a {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
}
/*Second section*/
.composed {
  display: grid;
  grid-template-columns: 49.295774647% 1.408450704% 49.295774647%;
  grid-template-rows: auto 1.25em auto 1.25em;
}
.composed-a {
  grid-column: 1 / 2;
  grid-row: 1 / 4;
}
.composed-b {
  grid-column: 3 / 4;
  grid-row: 1 / 2;
}
.composed-c {
  grid-column: 3 / 4;
  grid-row: 3 / 4;
}

<div class="wrapper">
    <div class="wide">
      <figure class="wide-a">
        <img src="http://via.placeholder.com/1420x955" width="">
      </figure>
    </div>
    <div class="composed">
      <figure class="composed-a">
        <img src="http://via.placeholder.com/700x950" width="">
      </figure>
      <figure class="composed-b">
        <img src="http://via.placeholder.com/700x490" width="">
      </figure>
      <figure class="composed-c">
        <img src="http://via.placeholder.com/700x440" width="">
      </figure>
    </div> 
</div>

Answer 1

使用视口百分比单位代替像素单位。像这样的：

grid-gap: 10vmin

https://jsfiddle.net/oy7ahgvs/

.wrapper {
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: auto;
  margin: 0 auto;
  border: 1px solid black;
  height: 100vh;
  grid-gap: 10vmin;  /* NEW */
}

.wide {
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: auto 1.25em;
  border: 1px dashed red;
  grid-gap: 10vmin;  /* NEW */
}

.composed {
  display: grid;
  grid-template-columns: 49.295774647% 1.408450704% 49.295774647%;
  grid-template-rows: auto 1.25em;
  border: 1px dashed blue;
}

.composed-a {
  grid-column: 1 / 2;
  grid-row: 1 / 4;
  background-color: orange;
}

.composed-b {
  grid-column: 3 / 4;
  grid-row: 1 / 2;
  background-color: aqua;
}

.composed-c {
  grid-column: 3 / 4;
  grid-row: 3 / 4;
  background-color: lightgreen;
}

figure {
  margin: 0;
  padding: 0;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

body {
  margin: 0;
}

* {
  box-sizing: border-box;
}

<div class="wrapper">
  <div class="wide">
    <figure class="wide-a">
      <img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt="">
    </figure>
  </div>
  <div class="composed">
    <figure class="composed-a">
      <img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt="">
    </figure>
    <figure class="composed-b">
      <img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt="">
    </figure>
    <figure class="composed-c">
      <img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt="">
    </figure>
  </div>
</div>

来自规范：

5.1.2. Viewport-percentage lengths: the vw, vh, vmin, vmax units

视口百分比长度与 初始包含块。当初始的高度或宽度 包含块被更改，它们会相应地缩放。

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