4

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

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

即是多少fr。1200 像素？以及我如何计算它？

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

规范说：

12.7.1. 查找大小fr

该算法找到一个 fr 单元在不超过目标大小的情况下可以达到的最大大小。它必须用一组网格轨道和一些空间来填充。

  • 让剩余空间为要填充的空间减去非灵活网格轨道的基本尺寸。
  • 设flex factor sum为柔性轨道的 flex factor 之和。如果此值小于 1，请将其设置为 1。
  • 假设fr 大小为剩余空间除以弹性因子总和。
  • 如果假设的 fr 大小和灵活轨道的 flex 因子的乘积小于轨道的基本大小，则重新启动此算法，将所有此类轨道视为不灵活的。
  • 返回假设的 fr 大小。

他们的意思是“假设的 fr 大小”将用于单位 (1fr) ？大概吧

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

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

但是，如果我想做相反的事情，这将是计算有多少 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>

4

1 回答 1

4

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

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

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

grid-template-columns: 600px 600px

在你的情况下，它是这样工作的：

从规范：

它必须用一组网格轨道和一些空间来填充。

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

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

您要填充的空间是 1200 像素。

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

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

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

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

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

  1. 设flex factor sum为柔性轨道的 flex factor 之和。

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

1 + 3.3335 + 1 = 5.3335

弹性系数总和为 5.3335。

  1. 假设fr 大小为剩余空间除以弹性因子总和。

1200 像素 / 5.3335fr = 225 像素

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

  • 1fr= 225 像素
  • 2fr= 450像素
  • 3fr= 675像素
  • ETC...

这意味着：

 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）。所以你的问题似乎有点理论和不切实际。如果容器稍微调整大小，或者将不灵活的轨道放入混合中，则上述所有像素计算都会被丢弃。

更新（基于评论）

有一个小错误。我的网格大小是 1920 像素而不是 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
于 2017-05-13T13:24:01.823 回答