モバイルでグリッドギャップが動作しないのはなぜですか？

Question

最近私はCSSグリッドで遊んできましたが、答えが見つからないことに気がつきました。たとえば、ページを2つの列に分割し、その下の行に別の列（両方の列にまたがる列）を配置するとします。モバイルでは、別のものの上に1つ積み重ねて、その後、特定のブレークポイントの後に上記のレイアウトに戻るようにしたいと思います。ここでマークアップは次のとおりです。

HTML

<div class="grid"> 
    <div class="upper"> 
    <div class="a">A</div> 
    <div class="b">B</div> 
    </div> 
    <div class="lower"> 
    <div class="c">C</div> 
    </div> 
</div> 

SCSSは

.upper, .lower { 
    display: grid; 
} 

.upper { 
    grid-template-columns: 1fr 1fr; 
    grid-template-rows: auto auto; 
    background-color:grey; 
    grid-gap:10px; 

    @media only screen and (max-width:800px) { 
    grid-template-columns: 1fr; 
    grid-template-rows: auto; 
    } 
} 

.lower { 
    grid-template-columns: 1fr; 
    grid-template-rows:auto; 
    background-color: green; 
    grid-gap:10px; 
} 

私は私が私のグリッドセクションの両方のためのgrid-gapを定義したにも関わらず、携帯電話であることを気づきました、列のスタック時にモバイルでgrid-gapは維持されません。下のフィドルでは、ウィンドウを小さくすると、列が1つ積み重なったときに、BとCの間のギャップが存在しないことがわかります。

Fiddle

希望私が意味を作ってるんだ：ここでフィドルです！

編集：FirefoxとChrome（グリッドをサポート）でのみこれをテストしています。

Answer 1

grid-gapルールは適用されないため、BとCの間では機能しません。

このルールは、行と列の間にガターを作成します。グリッドコンテナです。

しかし、あなたは.upperと.lower上grid-gap、ブロックコンテナで2人の兄弟を宣言しています。その親（.grid）はグリッドコンテナではないため、display: gridまたはinline-gridがないためです。

したがって、.upperにgrid-gap: 10pxは間.... 何（.lowerのみ1つのグリッド項目を有する10pxの樋を作成している... .lowerに

とgrid-gap: 10pxをAとBとの間の10pxの樋を作成しています。 grid-gapは、複数のグリッド項目間に溝を作成します）。 grid-gapあなたはグリッドコンテナでなければならない親、それを適用する必要があり.upperと.lower兄弟の間で動作させるために

fiddle demo 1

。

fiddle demo 2

.grid { 
 
    display: grid; /* NEW */ 
 
    grid-gap: 25px; /* NEW */ 
 
} 
 

 
.upper, .lower { 
 
    display: grid; 
 
} 
 

 
.upper { 
 
    grid-template-columns: 1fr 1fr; 
 
    grid-gap: 25px; 
 
} 
 

 
.lower { 
 
    grid-template-columns: 1fr; 
 
    grid-template-rows: auto; 
 
    grid-gap: 10px; /* does nothing unless there are multiple grid items */ 
 
} 
 

 
@media (max-width:800px) { 
 
    .upper { 
 
    grid-template-columns: 1fr; 
 
    grid-template-rows: auto; 
 
    } 
 
} 
 

 
.upper > * { border: 1px dashed red; } 
 
.lower > * { border: 1px dashed blue; }

<div class="grid"> 
 

 
    <div class="upper"> 
 
    <div class="a">A</div> 
 
    <div class="b">B</div> 
 
    </div> 
 

 
    <div class="lower"> 
 
    <div class="c">C</div> 
 
    </div> 
 

 
</div>