CSS minmax() 関数
Baseline
広く利用可能
この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2017年10月以降、すべてのブラウザーで利用可能です。
minmax() は CSS の関数で、寸法の範囲を min 以上、 max 以下で定義します。 CSS グリッドで使用されます。
試してみましょう
grid-template-columns: minmax(20px, auto) 1fr 1fr;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
grid-template-columns: minmax(2ch, 10ch) 1fr 1fr;
<section class="default-example" id="default-example">
<div class="example-container">
<div class="transition-all" id="example-element">
<div>One. この列にはより多くのテキストがあります。</div>
<div>Two</div>
<div>Three</div>
<div>Four</div>
<div>Five</div>
</div>
</div>
</section>
#example-element {
border: 1px solid #c5c5c5;
display: grid;
grid-gap: 10px;
width: 250px;
}
#example-element > div {
background-color: rgb(0 0 255 / 0.2);
border: 3px solid blue;
text-align: left;
}
構文
/* <inflexible-breadth>, <track-breadth> 値 */
minmax(200px, 1fr)
minmax(400px, 50%)
minmax(30%, 300px)
minmax(100px, max-content)
minmax(min-content, 400px)
minmax(max-content, auto)
minmax(auto, 300px)
minmax(min-content, auto)
/* <fixed-breadth>, <track-breadth> 値 */
minmax(200px, 1fr)
minmax(30%, 300px)
minmax(400px, 50%)
minmax(50%, min-content)
minmax(300px, max-content)
minmax(200px, auto)
/* <inflexible-breadth>, <fixed-breadth> 値 */
minmax(400px, 50%)
minmax(30%, 300px)
minmax(min-content, 200px)
minmax(max-content, 200px)
minmax(auto, 300px)
min および max の 2 つの引数を取る関数です。
どちらの引数も <length>, <percentage>, またはキーワード値 max-content, min-content, auto のうちの一つを取ります。
2 つ目の引数 max は、<flex> の値も同時に受け入れます。（この fr 単位は max でのみ使用できるものであり、min では不正な値となります。）
max < min であった場合、max は無視され、minmax(min,max) は min となります。
値
<length>-
負ではない寸法。
<percentage>-
負ではないパーセント値で、列のグリッドトラックのグリッドコンテナーのインラインサイズ、および行グリッドトラックのグリッドコンテナーのブロックサイズに対する割合。グリッドコンテナーのサイズがトラックのサイズに依存する場合、
<percentage>はautoとして扱う必要があります。ユーザーエージェントは、グリッドコンテナーの寸法に対するトラックの固有の寸法の貢献度を調整し、パーセント値を尊重して最小限の量だけトラックの最終的な寸法を増加させることがあります。 <flex>-
単位
frがついた負ではない寸法で、トラックのフレックス係数を指定します。それぞれの<flex>による寸法のトラックは、フレックス係数の割合に従って残りの空間を配分します。 max-content-
グリッドトラックを占めるグリッドアイテムの max-content の貢献度の最大値を表します。
min-content-
グリッドトラックを占めるグリッドアイテムの min-content の貢献度の最大値を表します。
auto-
minとして使用した場合、グリッドトラックを占めるグリッドアイテムの最大最小サイズ（min-width/min-heightで指定）を表します。maxとして使用した場合は、max-contentと同じです。ただし、max-contentとは異なり、normalやstretchのようにalign-contentやjustify-contentプロパティ値によるトラックの拡張が可能です。
形式文法
<minmax()> =
minmax( min , max )
CSS プロパティ
minmax() 関数は次の中で使用することができます。
例
CSS
#container {
display: grid;
grid-template-columns: minmax(min-content, 300px) minmax(200px, 1fr) 150px;
grid-gap: 5px;
box-sizing: border-box;
height: 200px;
width: 100%;
background-color: #8cffa0;
padding: 10px;
}
#container > div {
background-color: #8ca0ff;
padding: 5px;
}
HTML
<div id="container">
<div>コンテンツと同じ幅で、最大 300 ピクセルのアイテムです。</div>
<div>幅は自由ですが、最小 200 ピクセルが必要なアイテムです。</div>
<div>幅 150 ピクセルの柔軟性のないアイテムです。</div>
</div>
結果
仕様書
| 仕様書 |
|---|
| CSS Grid Layout Module Level 2 # funcdef-grid-template-columns-minmax |