计算 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.

他们的意思是 "hypothetical fr size" 是单位 (1fr)？我想是的

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

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

但是，如果我想反过来怎么办，这将是正确的 way/correct 公式来计算多少 fr 是 1200px？

更新：

这是我正在做的一个活生生的例子。 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 像素的自由 space。

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

如果您有 grid-template-columns: 1fr 1fr，则每列将获得均等的免费 space 分配。所以每一列都是 600px 宽，类似于：

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

您要填充的 space 是 1200px。

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

同样，要填充的 space（“剩余 space”）是 1200 像素。

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

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

fr 算法会减去那条 200 像素的轨道。剩下的 space 将提供给 fr。

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

这意味着我们将 fr 个值相加：

1 + 3.3335 + 1 = 5.3335

弹性因子总和为 5.3335。

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

1200px / 5.3335fr = 225px

现在我们知道每个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 单位并非旨在为网格轨道设置特定长度。它的工作是在容器中分发免费 space（类似于 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

计算 fr 单位的实际长度

Calculating the actual length of fr units

css

specifications

css-grid