グリッド レイアウトは、優れたアダプティブ レイアウト テクノロジであるフレキシブル サイズ (フレックス サイズ) をサポートしています。
柔軟なサイズ設定では、fr サイズ単位を使用します。これは、「分数」または「小数単位」という単語の最初の 2 文字に由来し、全体のスペースの一部を表します。
たとえば、次の CSS ルール:
grid-template-columns: 100px 1fr max-content minmax(min-content, 1fr);
は 4 つの列があることを意味し、最初の列は 100px の固定サイズ、3 列目の max-content はオーバーフローや折り返しのない要素のみを含むサイズを意味し、残りの 2 列は要素を含むサイズを意味します。列はすべて柔軟なサイズです。
弾性サイズの計算ルールに従って、2 つは残りの利用可能なスペースを均等に分割します (これら 2 つの列の弾性係数は等しく、両方とも 1)。
CSS3 デモ コード:
#grid { display: grid; width: 100%; grid-template-columns: 100px 1fr max-content minmax(min-content, 1fr); } #title { background-color: lime; } #score { background-color: yellow; } #stats { background-color: lime; } #message { background-color: orange; } p { height: 80px; line-height: 80px; text-align: center; }
HTML コード:
<p id="grid"> <p id="title">Site Logo</p> <p id="score">Slogan</p> <p id="stats">User Zone</p> <p id="message">Message</p> </p>
関連推奨事項:
以上がCSS3 アダプティブ レイアウト テクノロジー 柔軟なサイズの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。