计算 fr 单位的实际长度

Calculating the actual length of fr units

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

假设网格大小为 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>

您有一个网格容器,沿 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。


  1. 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。


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

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

1 + 3.3335 + 1 = 5.3335

弹性因子总和为 5.3335。


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