CSSグリッドレイアウトの流体スケーリングアイテム

Question

display: gridを使用してレイアウトを作成しましたが、これまでのpadding-topのトリックを使用して流体の四角形のdivを作成しましたが、これを行う方法があるかどうかは疑問ですCSS GridまたはFlexboxを使用します。レイアウトはそのままで、JSは使用しないでください。

https://codepen.io/anon/pen/GWzavX

.o-container { 
 
    margin: 0 auto; 
 
    max-width: 1280px; 
 
} 
 

 
.o-grid { 
 
    box-sizing: border-box; 
 
    display: grid; 
 
    grid-gap: 1rem; 
 
    grid-template-columns: repeat(4, 1fr); 
 
    grid-template-rows: repeat(2, 1fr); 
 
    max-width: 100%; 
 
    padding: 0 1rem; 
 
    width: 100%; 
 
} 
 

 
.o-grid__content { 
 
    box-sizing: border-box; 
 
    height: 100%; 
 
    padding: 1rem; 
 
    position: absolute; 
 
    top: 0; 
 
    width: 100%; 
 
} 
 

 
.o-grid__item { 
 
    box-shadow: inset 0 0 0 1px red; 
 
    position: relative; 
 
} 
 

 
.o-grid__item--tall { 
 
    grid-row: span 2; 
 
} 
 

 
.o-grid__item--wide { 
 
    grid-column: span 2; 
 
    padding-top: 50%; 
 
}

<div class="o-container"> 
 
    <div class="o-grid"> 
 
    <div class="o-grid__item o-grid__item--wide"> 
 
     <div class="o-grid__content"> 
 
     1. 2x1 
 
     </div> 
 
    </div> 
 
    <div class="o-grid__item"> 
 
     <div class="o-grid__content"> 
 
     2. 1x1 
 
     </div> 
 
    </div> 
 
    <div class="o-grid__item o-grid__item--tall"> 
 
     <div class="o-grid__content"> 
 
     3. 1x2 
 
     </div> 
 
    </div> 
 
    <div class="o-grid__item"> 
 
     <div class="o-grid__content"> 
 
     4. 1x1 
 
     </div> 
 
    </div> 
 
    <div class="o-grid__item"> 
 
     <div class="o-grid__content"> 
 
     5. 1x1 
 
     </div> 
 
    </div> 
 
    <div class="o-grid__item"> 
 
     <div class="o-grid__content"> 
 
     6. 1x1 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

すべてのグリッド要素だけではなく最初の1にそれを適用し、まだ

height: calc(25vw - 1.5rem); 

またはそれ以上でパディングを交換してみてください：

.o-grid__item { 
    box-shadow: inset 0 0 0 1px red; 
    position: relative; 
    height: calc(25vw - 1.5rem); /* allow for the spacing between squares */ 
} 

.o-grid__item--tall { 
    grid-row: span 2; 
    height: calc(50vw - 1rem); 
} 

.o-grid__item--wide { 
    grid-column: span 2; 
} 

Answer 2

要素、グリッドの設定アスペクト比を達成するための「クリーン」な方法はありません。ゼロ高さとパーセントベースのパディングトリックはおそらくこれに対する最も一般的な解決策です。

これは、要素の高さがロックされているため、要素が小さすぎると内容がオーバーフローします。

私は同じ結果を達成するために浮かべ擬似要素を使用しますが、また要素が必要な場合は、オーバーフローを含むように成長することができますslightly different approach好き：

.o-grid__item--wide::before { 
    content: ""; 
    float: left; 
    padding-bottom: 50%; 
} 
.o-grid__item--wide::after { 
    clear: left; 
    content: " "; 
    display: table; 
} 

グリッド内でこれを使用すると、あなたがお勧めしますあなたのgrid-template-rows宣言を取り除く。そうでない場合、ある要素がオーバーフローを含むように成長すると、他のすべてのグリッド行の高さも変更されます。

Answer 3

私はdisplay: gridを使用して、以下のレイアウトを作成しました、私は流体の正方形のdivを持っている古いpadding-topトリックを使用しましたが、これを行うためのより良い方法がある場合、私はCSSグリッドでどちらか、思ったんだけどFlexbox

実際には、Chromeをコーディングする場合を除き、この作業を行う別の方法を見つける必要があります。

CSSグリッドでは、padding-topのトリックはFirefoxで失敗します。スペックは、その理由を提供します。

6.4. Grid Item Margins and Paddings

著者は、彼らが異なる ブラウザで異なる動作を取得しますように、完全にグリッド項目にパディングやマージンの割合を使用しないでください。グリッド項目の

パーセントのマージンとパディングは いずれかに対して解決することができる。

• 自分の軸、または（幅、トップ/ボトム高さに対する解決に対する左/右のパーセンテージの決意）、
• インライン軸（左/右/上/下パーセンテージはすべて幅に対して解決されます）。

ユーザエージェントは、これらの2つの動作のいずれかを選択する必要があります。

注：この差異はうんざりですが、世界の現在の状態を正確に把握します（実装間でコンセンサスがなく、CSSWG内でコンセンサスが ではありません）。ブラウザ が動作の1つに収束することをCSSWGが意図していますが、そのときにはスペックは に変更されます。

この問題は、同様に、フレキシボックスに存在する：Why doesn't percentage padding work on flex items in Firefox?

だから、この時点では、あなたの最善の策は、ビューポートのパーセント単位かもしれません。スペックから

：

5.1.2. Viewport-percentage lengths: the vw, vh, vmin, vmax units

ビューポートのパーセンテージ長は 初期包含ブロックのサイズに対するものです。ブロックを含む最初の の高さまたは幅が変更されると、それに応じて拡大/縮小されます。

• VW部 - 初期包含ブロックの幅の1％に等しいです。
• vhユニット - ブロックの最初の高さの1％に等しい。 ブロック。
• vmin単位 - vwまたはvhの小さい方と等しい。
• vmaxユニット - vwまたはvhの大きい方と同等です。

ここではラフスケッチです：revised codepen