CSSグリッドの振る舞い

Question

私はグリッドレイアウトが新しく、それを使って自動折り返しのデザインを試みています。

私のコードは以下の通りです：

#grid { 
 
    display: grid; 
 
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); 
 
    grid-template-rows: 200px 200px 200px 200px; 
 
    grid-gap: 10px; 
 
} 
 

 
#grid > div { 
 
    background-color: #ccddaa; 
 
    min-width: 310px; 
 
}

<div id="grid"> 
 
    <div>text</div> 
 
    <div>text</div> 
 
    <div>text</div> 
 
    <div>text</div> 
 
</div>

Codepen例：https://codepen.io/arielcessario/pen/GvdwLJ

私が気づいた事は、私は（ないDEVモードでクローム/オペラ・ウィンドウのサイズを変更するということです、モバイルエミュレーションではない）、結果は次のようになります。

ご覧のとおり、すべてが期待通りに積み上げられています。

しかし、私は、モバイルデバイスをエミュレートする、またはモバイルブラウザでそれをしようとしようとすると、これは私が得るものです：

これは、モバイルでのプロジェクトのスクリーンショットです：

幅にかかわらず積み重ねることはありません。

注：私は、モバイルビューで検査した場合、任意のボックスの幅が379pxよりも小さいことはありません

• 、グリッドの全幅は768px未満になることはありません。
• 私は仕事の種類がmax-withであるが、パーセンテージは使用しない。
• Firefoxエミュレータでうまく動作しますが、Firefoxのモバイルブラウザではうまく動作しません。
• Michael_Bが指摘したように、ペンはモバイルで問題なく動作しますが、問題は実際のプロジェクトであり、クロムでエミュレートすると問題になります。

私は何かが不足していると思いますが、私はそれを見つけることができません。前もって感謝します。

Answer 1

モバイルで問題を再現することはできません。目標は、小さい画面のための単一の列の場合

しかし、これを試してみてください。

は、あなたのグリッド項目（explanation）にmin-width: 0を追加します。

OR

メディアクエリを使用するには、次のようにコンテナを調整します

@media (max-width: 500px) { 
    #grid { 
     grid-template-columns: 1fr; 
    } 
}