我在这里问是因为我数学很烂。
假设网格大小为 1920 像素，并且我没有使用显式大小。
即是多少fr。1200 像素？以及我如何计算它？
.grid {
display: grid;
grid-template-columns: 1fr 3.3335fr 1fr;
}
规范说：
该算法找到一个 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>