We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

この翻訳は不完全です。英語から この記事を翻訳 してください。

minmax() CSS 関数は最小値と最大値でトラックの幅を定義できます。これは CSS Grids で使用されます。

/* <inflexible-breadth>, <track-breadth> values */
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> values */
minmax(200px, 1fr)
minmax(30%, 300px)
minmax(400px, 50%)
minmax(50%, min-content)
minmax(300px, max-content)
minmax(200px, auto)

/* <inflexible-breadth>, <fixed-breadth> values */
minmax(400px, 50%)
minmax(30%, 300px)
minmax(min-content, 200px)
minmax(max-content, 200px)
minmax(auto, 300px)



いずれの引数も <length><percentage><flex> 値または max-contentmin-contentauto の中からひとつのキーワードを取ります。

もし最小値が最大値より大きい場合は無視され、minmax(min,max) は最小として扱われます。もっとも大きい値として、<flex> 値はグリッドトラックの flex factor を設定します。それは最小値としては無効です。


A non-negative length.
A non-negative percentage relative to the inline size of the grid container in column grid tracks, and the block size of the grid container in row grid tracks. If the size of the grid container depends on the size of its tracks, then the <percentage> must be treated as auto. The user agent may adjust the intrinsic size contributions of the track to the size of the grid container and increase the final size of the track by the minimum amount that would result in honoring the percentage.
A non-negative dimension with the unit fr specifying the track’s flex factor. Each <flex>-sized track takes a share of the remaining space in proportion to its flex factor.
Represents the largest max-content contribution of the grid items occupying the grid track.
Represents the largest min-content contribution of the grid items occupying the grid track.
As a maximum, identical to max-content. As a minimum it represents the largest minimum size (as specified by min-width/min-height) of the grid items occupying the grid track.

Formal syntax

minmax( [ <length> | <percentage> | <flex> | min-content | max-content | auto ] , [ <length> | <percentage> | <flex> | min-content | max-content | auto ] )



#container {
  display: grid;
  grid-template-columns: minmax(max-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;


<div id="container">
    Item as wide as the content,<br/>
    but at most 300 pixels.
    Item with flexible width but a minimum of 200 pixels.
    Inflexible item of 150 pixels width.



Specification Status Comment
CSS Grid Layout
minmax() の定義
勧告候補 Initial definition

Browser compatibility

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Basic support 57.0[1] 12[3] 52.0 (52.0)[2] 11[3] 44[4] 10.1
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 未サポート 52.0 (52.0)[2] 未サポート[3] 未サポート 10.3

[1] Implemented behind the experimental Web Platform features flag in chrome://flags since Chrome 29.0.

[2] Implemented behind the preference layout.css.grid.enabled since Gecko 40.0 (Firefox 40.0 / Thunderbird 40.0 / SeaMonkey 2.37), defaulting to false. Since Gecko 52.0 (Firefox 52.0 / Thunderbird 52.0 / SeaMonkey 2.49) the preference is enabled by default.

[3] Internet Explorer and Edge implement an older version of the specification, which doesn't define this property. Although IE 11.608.15063 and EdgeHTML 15.15063 are observed to understand and implement the minmax syntax. Open https://jsfiddle.net/5ku9kwqh/ in the aforementioned versions of IE/Edge to verify.

[4] Implemented behind the Enable experimental Web Platform features flag in chrome://flags since Opera 28.0.

See also


このページの貢献者: uknmr
最終更新者: uknmr,