個々のCSSグリッド行の高さの値を設定します

Question

私はgrid-columnプロパティを使用してグリッド全体に一番上の行があるCSSグリッドレイアウトを持っています。

私はこの行を100pxの高さに設定し、それ以降のすべての行をgrid-auto-rowsの高さ200pxに設定する方法を知っていますか？

すべての特定の行に対してgrid-template-rowsという値を入力できますが、ページに多くのdivがあり、100pxと200pxの値を入力したくない場合は、grid-template-rowsプロパティ。

特定の行に個別のピクセル値を設定し、それ以外のものをgrid-auto-rowsとする必要があると思いますか？

私はドキュメントでこれを行う方法を見つけることができないようです。

何か助けが素晴らしいだろう！

https://codepen.io/emilychews/pen/dZPJGQ

.gridwrapper { 
 
    display: grid; 
 
    grid-template-columns: repeat(2, 2fr); 
 
    grid-auto-rows: 200px; 
 
    grid-template-rows: 100px 200px; 
 
    grid-gap: 10px; 
 
} 
 

 
nav { 
 
    background: yellow; 
 
} 
 

 
.gridwrapper div { 
 
    padding: 1em; 
 
    background: red; 
 
    color: white; 
 
    box-sizing: border-box; 
 
} 
 

 
.gridwrapper div:nth-child(odd) { 
 
    background: blue; 
 
} 
 

 
nav { 
 
    grid-column: 1/-1; 
 
} 
 

 
/*MAKE DIVS 1FR ON MOBILE*/ 
 
@media only screen and (max-width: 736px) { 
 
    .gridwrapper { 
 
    grid-template-columns: 1fr; 
 
    } 
 
}

<div class="gridwrapper"> 
 
    <nav class="grid">1</nav> 
 
    <div class="grid">2</div> 
 
    <div class="grid">3</div> 
 
    <div class="grid">4</div> 
 
    <div class="grid">5</div> 
 
    <div class="grid">6</div> 
 
</div>

Answer 1

誰もが、私はこれを設定する方法を知っています：ここで

https://codepen.io/harora/pen/EbaQxr

は、グリッドモデルへのすてきな参照があります行を100pxの高さに設定し、その後のすべての行をgrid-auto-rowsの高さ200pxに設定しますか？

はい。グリッドはこれをきれいに簡単に行うことができます。

まず、グリッド項目自体に高さの値を設定する必要はありません。これは、CSSグリッドの大きな利点の1つ、つまりコンテナレベルでのグリッドアイテムの寸法を制御する能力を無効にします。

あなたのグリッドは常に少なくとも1つの行を持つことがわかります：一番上の行。それはあなたのexplicit gridです。

追加行数はわかりません。その数は変わり、予測できません。それはあなたのimplicit gridです。

grid-template-rows and grid-template-columnsプロパティは、明示的なグリッド内でトラックサイズを設定します。

grid-auto-rows and grid-auto-columnsのプロパティでは、暗黙グリッドのトラックサイズが設定されます。

したがって、これはあなたが探しているものはおそらくです：私はあなたが一緒にグリッドの自動行とグリッドのテンプレート行を使用することができます決して実現

.gridwrapper{ 
    display: grid; 
    grid-template-rows: 100px; /* top row is 100px in height */ 
    grid-auto-rows: 200px;  /* any new rows created are 200px in height */ 
} 

revised codepen

Answer 2

あなたはgrid-template-rowsプロパティを使用することができます。

私はあなたがこのような何かを探していると思います： Grid Model Explained