minmax()
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since October 2017.
試してみましょう
構文
/* <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>
, <flex>
, またはキーワード値 max-content
, min-content
, auto
のうちの一つを取ります。
もし min が max より大きい場合は無視され、 minmax(min,max)
は min として扱われます。最大値として、 <flex>
値はグリッドトラックのフレックス係数を設定します。それは 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>
結果
仕様書
Specification |
---|
CSS Grid Layout Module Level 2 # funcdef-grid-template-columns-minmax |
ブラウザーの互換性
BCD tables only load in the browser
関連情報
- グリッドレイアウトガイド: グリッドレイアウトの基本概念 - minmax() によるトラックの寸法制御
- グリッド、論理的な値、書字方向
- 動画チュートリアル: Introducing minmax()