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

パーセンテージと fr 単位の違いは何ですか?

CSS グリッド レイアウトを使用する場合、列の幅を定義するための 2 つの一般的な単位があります: パーセンテージ (%) とfr単位。どちらの単位も柔軟なグリッド レイアウトを作成するために使用できますが、特定の状況では動作が異なります。

パーセント単位 (%)

パーセント単位は、コンテナーの幅を示す相対単位です。たとえば、幅が 50% の列はコンテナの幅の半分を占めます。パーセンテージ単位は、固定幅の列を作成するためによく使用されます。

ただし、コンテナの幅が明示的に定義されていない場合、パーセンテージ単位は問題を引き起こす可能性があります。たとえば、コンテナの幅が auto の場合、列は利用可能なスペースに合わせて拡大または縮小されます。これは、特にレスポンシブ デザインで、望ましくない動作につながる可能性があります。

fr 単位

fr 単位は、コンテナー内の利用可能な空き領域を参照する相対単位です。たとえば、幅が 1fr の列は、コンテナ内の空き領域の 1 つの等しい部分を占めます。 fr 単位は、利用可能なスペースに自動的に調整される柔軟な列を作成するためによく使用されます。

fr 単位はコンテナの幅の影響を受けません。たとえば、コンテナの幅が auto の場合でも、列は空き領域の 1 つの等しい部分を占めます。これにより、fr 単位はレスポンシブなグリッド レイアウトの作成に最適になります。

結論

パーセンテージ単位は固定幅の列を作成する場合に便利ですが、fr 単位は柔軟な列を作成する場合に便利です。使用する単位を選択するときは、列の望ましい動作を考慮することが重要です。

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