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.
Please take two minutes to fill out our short survey.
試してみましょう
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. This column has more text in it.</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: rgba(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>, <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 |