CSS网格：fr和百分比单位差异

Question

我正在查看这个问题：The difference between percentage and fr units in CSS Grid Layout并了解fr适用于容器中的可用空间。我尝试检查它会导致混乱。

在此pen中，%和fr行为完全相同。

在下面的代码中：

main {
    width: 1000px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    // grid-template-columns: repeat(3, 33%);
}

我的印象是：

1. 如果您尝试33%，无论每个网格项目的内容长度（按预期工作），容器都会分成3个相等的部分。
2. 如果您尝试1fr，则每个网格项将获得可用空间的完全相同部分（在这种情况下除以3）可用于内容的宽度之后的宽度容器。即，中间将获得更多空间，因为它将从左右部分获得部分。

但在每种情况下，我都有相同的宽度。为什么呢？

https://codepen.io/asim-coder/pen/JMdPoR

Answer 1

它们两者相同的原因是因为您没有对任何列使用任何静态值，并且仅使用百分比和fr。如果您使用宽度为100px的列，结果会有所不同，因为33％将保留33％，但1fr将耗尽可用空间的全部（在这种情况下将是66％-100px）。

＆＃13;

＆＃13;

main {
  width: 900px;
  display: grid;
  grid-template-columns: 1fr 33% 100px;
  // grid-template-columns: repeat(3, 33%);
}

// Styles for fun
// -------------------------------------------------
@import url('https://fonts.googleapis.com/css?family=Scope+One|Open+Sans:700');
body {
  background: #fff;
  color: rgb(113, 115, 136);
  font-family: 'Scope One', sans-serif;
  font-size: 1rem;
  line-height: 1;
  margin: 1rem;
}

main {
  background: #444;
  border: 3px solid #444;
  grid-gap: 3px;
}

div {
  background: #fff;
  padding: 1.5vw 2vw;
}

h1,
h2 {
  margin: 0;
}

h1 {
  color: rgb(113, 115, 136);
  font-size: 1.5rem;
  font-weight: 700;
  padding-top: .5rem;
}

＆＃13;

<main>
  <div>1fr (longer, width is 66%-200px)</div>
  <div>
    33% (shorter, width is 33%)
  </div>
  <div>100px</div>
</main>

＆＃13;

＆＃13;

＆＃13;

需要注意的另一件事是fr 不限于添加最多100个。如果您的百分比值超过100，那么事情就无法发挥作用。另一方面，使用fr，您可以根据需要组合使用。

＆＃13;

＆＃13;

main {
  width: 900px;
  display: grid;
  grid-template-columns: 33% 33% 66%;
  // grid-template-columns: repeat(3, 33%);
}

main.another {
  width: 900px;
  display: grid;
  grid-template-columns: 1fr 1fr 2fr;
  // grid-template-columns: repeat(3, 33%);
}

// Styles for fun
// -------------------------------------------------
@import url('https://fonts.googleapis.com/css?family=Scope+One|Open+Sans:700');
body {
  background: #fff;
  color: rgb(113, 115, 136);
  font-family: 'Scope One', sans-serif;
  font-size: 1rem;
  line-height: 1;
  margin: 1rem;
}

main {
  background: #444;
  border: 3px solid #444;
  grid-gap: 3px;
}

div {
  background: #fff;
  padding: 1.5vw 2vw;
}

h1,
h2 {
  margin: 0;
}

h1 {
  color: rgb(113, 115, 136);
  font-size: 1.5rem;
  font-weight: 700;
  padding-top: .5rem;
}

＆＃13;

<h1>Broken</h1>

<main>
  <div>33%</div>
  <div>
    33%
  </div>
  <div>66%</div>
</main>

<h1>Works just fine</h1>

<main class="another">
  <div>1fr</div>
  <div>
    1fr
  </div>
  <div>2fr</div>
</main>

＆＃13;

＆＃13;

＆＃13;