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

阿西姆·KT

我当时在看这个问题：CSS Grid Layout中的百分比和fr单位之间的差异，并且了解它fr适用于容器中的可用空间。我尝试检查它是否引起混乱。

在此笔两者%和fr作用就像完全相同。

在如下代码中：

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

我的印象是：

如果尝试使用33%该容器，则将分为三个相等的部分，而不管每个网格项目的内容长度如何（按预期工作）。
如果尝试使用1fr，则每个网格项将获得内容的长度与容器宽度中的长度完全相同的可用空间部分（在这种情况下为三分）。也就是说，中间部分将获得更多空间，因为它将从左右部分中获得该部分。

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

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

马哈库斯

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

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

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

要注意的另一件事是，fr不限于加到100。如果您的百分比值超过100，则将无法正常工作。另一方面，使用fr可以随意组合。

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

<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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。