Question

我在这里问，因为我很擅长数学。

假设网格大小为1920px，而且我没有使用显式大小。

将会有多少fr。 1200px？我怎么计算它？

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

规范说：

12.7.1. Find the Size of an fr

此算法找到fr单位可以没有的最大大小   超过目标大小。必须使用一组网格轨道调用它   和一些填充空间。


让 剩余空间 成为填充空间减去基本尺寸   非灵活的网格轨道。

让 flex factor sum 为灵活轨道的弹性因子的总和。如果此值小于1，请将其设置为1。

让 假设的fr 为剩余空间除以灵活因子总和。

如果假设的fr大小和灵活轨道的弹性系数的乘积小于轨道的基本大小，请重新启动此算法，将所有此类轨道视为不灵活。

返回假设的fr尺寸。

他们的意思是＆＃34;假设的fr大小＆＃34;将是单位（1fr）？我想是的

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

所以我想这是一种获得n个像素值的方法。

但是，如果我想做相反的事情，那将是计算多少frs的1200px的正确方法/正确公式呢？

更新

这是一个现实的例子，我正在做的事情。 minmax(min, max)给了我很多帮助。我已经解决了一些溢出错误。并想出如何在网格模板轨道中使用rem单位，但仍然可以从收缩中受益：D

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

你有一个网格容器，沿X轴或Y轴有1200px的可用空间（没关系）。

如果容器的一个网格轨道设置为1fr，则该列/行将消耗所有1200px。

如果您有grid-template-columns: 1fr 1fr，那么每列将获得相等的可用空间分布。所以每列的宽度为600px，类似于：

grid-template-columns: 600px 600px

在您的情况下，这是如何运作的：

来自规范：

必须使用一组网格轨道和一些 空间来调用 。

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

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

您填补的空间为1200px。

让 剩余空间 为填充空间减去非柔性网格轨道的基本尺寸。

同样，填充空间（＆＃34;剩余空间＆＃34;）为1200px。

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

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

fr算法将减去200px轨道。剩下的空间可以供fr。使用。

让 flex factor sum 为灵活曲目的弹性因子的总和。

这意味着我们将fr值加起来：

1 + 3.3335 + 1 = 5.3335

弹性系数总和为5.3335。

让 假设的fr 为剩余空间除以灵活因子总和。

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单位并非用于设置网格轨道的特定长度，这一点非常重要。它的工作是在容器中分配可用空间（类似于flexbox＆＃39; s flex-grow）。所以你的问题似乎有点理论和不切实际。如果容器重新调整大小，或者将不灵活的轨道投入混合，则上面的所有像素计算都会被抛弃。

更新（根据评论）

有一个小错误。我的网格大小是1920px而不是1200 ...但它是一个可以推断的例子。我希望3.3335fr与1200px有关，而不是所有轨道的总和... 3.3335fr是~1200px，网格中有两个相邻的1fr列，宽度为1920px。

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

这意味着：

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

导致：

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

计算CSS网格布局

1 个答案: