CSS グリッド: パーセントと「fr」単位: 違いは何ですか?

CSS グリッド レイアウトにおけるパーセンテージと fr 単位の違い

fr 単位を使用する場合、コンテナ内の空き領域は列間で均等に分配されます。 Grid-column-gap プロパティは要因ではありません。

ただし、% を使用すると、コンテナーは多数の列に分割され、各列の幅はパーセンテージで決定されます。列の長さとグリッドのギャップの両方が幅に考慮されます。

列とギャップの合計幅がコンテナの幅を超えると、オーバーフローが発生する可能性があります。

オーバーフローを回避するには、 calc() 関数を使用すると、各列の幅からグリッドのギャップの幅を減算できます。

以上がCSS グリッド: パーセントと「fr」単位: 違いは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。