web-dev-qa-db-ja.com

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))で設定された幅のパーセンテージにより、列は画面の幅からはみ出します。

しかし、frユニットを使用すると、完全に機能します。

_:root {
  --grid-columns: 12;
  --column-gap: 10px;
  --row-gap: 10px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr); 
  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>_

答えを見つけるために使用されるリソース：

パーセンテージの幅がそのような違いを生む理由を誰かが説明できたら素晴らしいでしょう。

csscss-grid
16
Morpheus

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プロパティはグリッドアイテム間にのみ適用され、アイテムとコンテナの間には適用されません。そのため、グリッドギャップの数は13ではなく11になります。）

これは機能します：

grid-template-columns: repeat(12, calc(8.3333% - 9.1667px));

これは次のように分類されます。

  • 12列

  • 各列の幅は、コンテナの全幅（100%）そしてそれを12で割る

    100% / 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>
30
Michael_B

仕様のこの部分によると fr単位は長さではないため、レイアウトエンジン内で利用可能な空き領域の量を決定した後で「計算」されます。

最初の例で作成した変数IS計算の一部（幅の100％および12で除算））ので、レイアウトエンジンに渡す前に計算が実行されます。

私がレイアウトエンジンと言うとき、私はそれをメタファーとして使用しており、ブラウザによって行われるレンダリングのプロセスで人々を混乱させたくありません。最初の例では、ブラウザにプラグインしてレンダリングプロセスを開始する一連の数値を提示し、2番目の例では、ブラウザが使用できるアルゴリズム/関数をさらに提示していると言っていますそのレイアウト。

2
edswartz