css - 计算 fr 单位的实际长度

Question

我问这里是因为我数学很烂。

假设网格大小为 1920 像素，并且我没有使用显式大小调整。

即有多少 fr。 1200 像素？我如何计算它？

.grid {
  display: grid;
  grid-template-columns: 1fr 3.3335fr 1fr;
}

规范说:

12.7.1. Find the Size of an fr

This algorithm finds the largest size that an fr unit can be without exceeding the target size. It must be called with a set of grid tracks and some quantity of space to fill.

• Let leftover space be the space to fill minus the base sizes of the non-flexible grid tracks.
• Let flex factor sum be the sum of the flex factors of the flexible tracks. If this value is less than 1, set it to 1 instead.
• Let the hypothetical fr size be the leftover space divided by the flex factor sum.
• If the product of the hypothetical fr size and a flexible track’s flex factor is less than the track’s base size, restart this algorithm treating all such tracks as inflexible.
• Return the hypothetical fr size.

他们的意思是“假设的 fr 大小”是单位 (1fr)？我想是的

1920/(1+3.3335+1) = 359.988750352 <-- The hypothetical fr size
359.988750352 * 3.3335 = 1200.0224993

所以我想这是一种获取有多少像素是 n fr 值的方法。

但是，如果我想反其道而行之，这将是计算 1200px 有多少 fr 的正确方法/正确公式？

---

更新:

这是我正在做的一个活生生的例子。 minmax(min, max) 对我帮助很大。我已经解决了一些溢出的错误。并想出了如何在网格模板轨道中使用 rem 单位但仍然受益于缩小 :D

https://codepen.io/jeflopo/pen/OmZBEJ

/**********************************/
/* BODY - THE MAIN GRID CONTAINER */
/**********************************/
/**********************************/
/* DEFINING GRID AREAS            */
/**********************************/
.header {
  grid-area: header;
}

.navigation {
  grid-area: nav;
}

.main {
  grid-area: main;
}

.posts {
  grid-area: posts;
}

.sidebar {
  grid-area: sidebar;
}

.footer {
  grid-area: footer;
}

/**********************************/
/* HOW HAS GRID AREAS TO BEHAVE ? */
/**********************************/
/* I'VE LET THEM TO SHRINK TO 0 AND I WILL CONTROL IT WITH MEDIA QUERIES
SETTING `min` of minmax(min, max) to 0 DRASTICALLY PREVENTS THE LAYOUT TO OVERFLOW WHEN RESIZING THE WINDOW.
*/
.header,
.navigation,
.main,
.footer {
  display: grid;
  grid-template-columns: 1fr minmax(0, 120rem) 1fr;
}

.main .container {
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: minmax(0, 120rem) 30rem;
  grid-template-areas: "posts sidebar";
  margin: 0;
  padding: 1rem 0;
}
.main .posts {
  grid-column: 1/2;
  padding: 1rem;
}
.main .sidebar {
  grid-column: 2/3;
  padding: 1rem;
}

/**********************************/
/* CONTENT WRAPPER                */
/**********************************/
/* THESE GRID AREAS (header, main, and footer) OCCUPY FULL TRACKS.
I USE THIS TO CONSTRAINT THE CONTENT OF GRID AREAS TO THE CENTER COLUMN IN THE MAIN GRID. */
.container {
  grid-column: 2/3;
}

/******************************************/
/* SOME BASIC STYLING PRESETS             */
/******************************************/
html {
  font-size: 10px;
}

body {
  font-family: 'Open Sans', sans-serif;
  font-size: 1.6rem;
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
  color: #00f;
}

ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

li {
  display: inline;
}
li a {
  color: #fff;
}

.header {
  background: #888;
}

.navigation {
  background: #666;
}

.posts {
  background: #f66;
}

.sidebar {
  background: #6f6;
}

.footer {
  background: #888;
}

<header class="header">
  <div class="container">
    <div class="header__logo">
      <a href="#"><h1>LOGO</h1></a>
    </div>
  </div>
</header>
<nav class="navigation">
  <ul class="container">
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Item 3</a></li>
  </ul>
</nav>
<main class="main" role="main">
  <div class="container">
    <section class="posts">
      <article class="post">
        <h1>This is a title</h1>
        <p>This is the body of an article</p>
      </article>
    </section>
    <aside class="sidebar">
      <span>SIDEBAR</span>
    </aside>
  </div>
</main>
<footer class="footer">
  <div class="container">
    <p>FOOTER</p>
  </div>
</footer>

Answer 1

您有一个网格容器，沿 X 轴或 Y 轴(无关紧要)有 1200 像素的自由空间。

如果容器有一个网格轨道设置为 1fr，该列/行将占用全部 1200px。

如果您有 grid-template-columns: 1fr 1fr，那么每列将获得平均分配的可用空间。因此每列的宽度为 600 像素，类似于:

grid-template-columns: 600px 600px

---

在您的情况下，它是这样工作的:

From the spec:

It must be called with a set of grid tracks and some quantity of space to fill.

您已使用此规则调用网格轨道:

grid-template-columns: 1fr 3.3335fr 1fr

您要填充的空间是 1200px。

---

1. Let leftover space be the space to fill minus the base sizes of the non-flexible grid tracks.

同样，要填充的空间(“剩余空间”)是 1200px。

没有非灵活的网格轨道。这就像设置为 200px 的列:

grid-template-columns: 1fr 3.3335fr 200px 1fr

fr 算法会减去那条 200 像素的轨道。剩余空间可供 fr 使用。

---

2. Let flex factor sum be the sum of the flex factors of the flexible tracks.

这意味着我们将 fr 值相加:

1 + 3.3335 + 1 = 5.3335

flex 因子总和为 5.3335。

---

3. Let the hypothetical fr size be the leftover space divided by the flex factor sum.

1200 像素/5.3335fr = 225 像素

---

现在我们知道每个 fr 单位代表 225px。

• 1fr = 225px
• 2fr = 450px
• 3fr = 675px
• 等...

这意味着:

 grid-template-columns: 1fr 3.3335fr 1fr

相当于:

 grid-template-columns: (1fr x 225px) (3.3335fr x 225px) (1fr x 225px)

结果是:

 grid-template-columns: 225px 750.0375px 225px

---

不过，请务必注意，fr 单元并非旨在为网格轨道设置特定长度。它的工作是分配容器中的空闲空间(类似于 flexbox 的 flex-grow)。所以你的问题似乎有点理论化和不切实际。如果容器的大小发生了轻微的调整，或者混合中加入了不灵活的轨道，则上述所有像素计算都会被取消。

---

更新(基于评论)

There's an small error. My grid size is 1920px not 1200... But its an extrapolable example. I wanted 3.3335fr relate to 1200px, and not to be the sum of all tracks... 3.3335fr are ~1200px with two adjacent 1fr columns in a grid thats 1920px width.

如果网格容器的宽度为 1920px，则假设的 fr 大小为 360px。

这意味着:

 grid-template-columns: (1fr x 360px) (3.3335fr x 360px) (1fr x 360px)

结果是:

 grid-template-columns: 360px 1200px 360px