css minmax無効なプロパティ値

Question

grid-template-columnsのminmaxプロパティを設定したいとします。しかし何らかの理由で私はそれを働かせることはできません。

はここに私のコードです：私はChromeで.startクラスを検査する場合

.start { 
    width: 100%; 
    display: grid; 
    grid-template-columns: minmax(320px, 1fr) minmax(320px, 1fr); 
    grid-template-rows: auto; 
    grid-gap: 2%; 
} 

<div class="start"> 
    <div class="news"></div> 
    <div class="video"></div> 
</div> 

、それだけでminmax属性の「無効なプロパティ値」と言います。

ビューポートが狭くなると1列のレイアウトになります。

Answer 1

私は、これはあなたが後にしているものだと思う：あなたが1列にしたい小さな画面については、

grid-template-columns: repeat(2, minmax(320px, 1fr)); 

、これを実行するためにメディアクエリを使用します。

grid-template-columns: 1fr; 

---

minmax()表記には正しい構文が必要です。

多くのオプションとバリエーションがあるため、この場合を除いてほとんどのCSSプロパティについて言えるでしょうが、構文は少し複雑で分かりにくいです。つまり、無効なルールを作成するのは比較的簡単です。

minmax()の正しい構文は、下の図（taken from the spec）で詳しく説明しています。

minmax()にはオプションがなく、トラックリストには別のminmax()が続きます。そのため、あなたのルールは無効です。

ここで完全な説明は次のとおりMINMAX（）CSS機能はサイズ範囲以上分及び以下maxに等しい定義

• 7.2. Explicit Track Sizing: the grid-template-rows and grid-template-columns properties

Answer 2

。

/* <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)