CSS網格布局中百分比和fr單位之間的差異我正在玩CSS網格布局，并遇到了一個我無法找到答案的問題。請考慮以下示例：:root {
--grid-columns: 12;
--column-gap: 10px;
--row-gap: 10px;}.grid {
display: grid;
grid-template-columns: repeat(var(--grid-columns), calc(100% / var(--grid-columns)));
grid-column-gap: var(--column-gap);
grid-row-gap: var(--row-gap);
justify-content: center; } [class*=l-] {
border: 1px solid red;}.l-1 {
grid-column-start: span 1; }.l-2 {
grid-column-start: span 2;}.l-3 {
grid-column-start: span 3;}.l-4 {
grid-column-start: span 4;}.l-5 {
grid-column-start: span 5;}.l-6 {
grid-column-start: span 6;}.l-7 {
grid-column-start: span 7;}.l-8 {
grid-column-start: span 8;}.l-9 {
grid-column-start: span 9;}.l-10 {
grid-column-start: span 10;}.l-11 {
grid-column-start: span 11;}.l-12 {
grid-column-start: span 12;}<div class="grid">
<div class="l-6">Column 1</div>
<div class="l-6">Column 2</div>
<div class="l-3">Column 3</div>
<div class="l-4">Column 4</div>
<div class="l-3">Column 5</div>
<div class="l-2">Column 6</div>
<div class="l-1">Column 7</div>
<div class="l-10">Column 8</div>
<div class="l-1">Column 9</div>
<div class="l-5">Column 10</div>
<div class="l-5">Column 11</div>
<div class="l-2">Column 12</div></div>正如您所看到的那樣，由于設置的百分比寬度，列會超出屏幕寬度calc(100% / var(--grid-columns))。如果有人能解釋為什么百分比寬度會產生這樣的差異，那將會很棒。
2 回答
拉丁的傳說
TA貢獻1789條經驗 獲得超8個贊
fr
該fr裝置僅適用于容器中的自由空間。
所以在你的代碼中：
grid-template-columns: repeat(12, 1fr);
...容器中的自由空間在12列中平均分配。
由于列只處理自由空間，grid-column-gap因此不是一個因素。fr在確定長度之前從容器寬度中減去它（規格參考）。
以下是瀏覽器的計算方法：
(free space - gutters) / 12 = 1fr
%
當你使用百分比時......
grid-template-columns: repeat(12, calc(100% / 12));
...容器分為12列，每列寬8.33333％。這是一個實際長度，不像fr單位，只涉及自由空間。
柱長和網格間隙都考慮在寬度中。
以下是瀏覽器的計算方法：
8.33333% * 12 = 100% +11 * 10px = 110px
有明顯的溢出。
（注意：grid-*-gap屬性僅適用于網格項之間 - 從不在項目和容器之間。這就是為什么網格間隙的數量是11，而不是13。）
這有效：
grid-template-columns: repeat(12, calc(8.3333% - 9.1667px));
其中包括：
12列
每列的寬度取決于容器的整個寬度（
100%）并除以12100% / 12 = 8.3333% (individual column width)
然后減去列間隙（有11個）
10px * 11 = 110px (total width of column gaps)110px / 12 = 9.1667px (amount to be deducted from each column)
.grid {
display: grid;
grid-template-columns: repeat(12, calc(8.3333% - 9.1667px));
grid-column-gap: 10px;
grid-row-gap: 10px;
justify-content: center;}.l-1 { grid-column-start: span 1; }.l-2 { grid-column-start: span 2; }.l-3 { grid-column-start: span 3; }.l-4 { grid-column-start: span 4; }.l-5 { grid-column-start: span 5; }.l-6 { grid-column-start: span 6; }.l-7 { grid-column-start: span 7; }.l-8 { grid-column-start: span 8; }.l-9 { grid-column-start: span 9; }.l-10 { grid-column-start: span 10; }.l-11 { grid-column-start: span 11; }.l-12 { grid-column-start: span 12; }[class*=l-] { border: 1px solid red; }<div class="grid"> <div class="l-6">Column 1</div> <div class="l-6">Column 2</div> <div class="l-3">Column 3</div> <div class="l-4">Column 4</div> <div class="l-3">Column 5</div> <div class="l-2">Column 6</div> <div class="l-1">Column 7</div> <div class="l-10">Column 8</div> <div class="l-1">Column 9</div> <div class="l-5">Column 10</div> <div class="l-5">Column 11</div> <div class="l-2">Column 12</div></div>
- 2 回答
- 0 關注
- 913 瀏覽
相關問題推薦
添加回答
舉報
0/150
提交
取消