CSSフレキシボックス3列グリッド（4X4 + 1大）

Question

私はフレキシボックスでこれを取得する方法を把握しようとしているが、私が得ることができる唯一のことは、コードスニペットである：

このCSSだけを管理するアイディアがありますか（PHPのforeachループなので、HTMLの構造に実際に触れることはできません）？

CSS gridヘルプを使用できますか？

.grid { 
 
    display: flex; 
 
    justify-content: start; 
 
    flex-wrap: wrap; 
 
} 
 

 
.photo { 
 
    position: relative; 
 
    flex: 0 0 calc(25% - 20px); 
 
    margin: 10px; 
 
    align-self: flex-start; 
 
    overflow: hidden; 
 
    background: black; 
 
} 
 

 
.photo:after { 
 
    content: ""; 
 
    display: block; 
 
    padding-top: 100%; 
 
} 
 

 
.large { 
 
    flex: 0 0 calc(50% - 20px); 
 
}

<div class="grid"> 
 
    <div class="photo large"></div> 
 
    <div class="photo"></div> 
 
    <div class="photo"></div> 
 
    <div class="photo"></div> 
 
    <div class="photo"></div> 
 
</div>

Answer 1

これは正方形であること、その後事実に基づいて、あなたは、単に右に、大きな絶対を配置することができ、そしてそのパディングトップで、小さいですトリックは、大のの高さを制御します。

はその後、gridにパディングを設定することにより、我々は左側に小さくしておくと大のための右の上のスペースを作ります。

さらに、小文字のをスペースの50％（25％ではなく）に変更する必要があります。

スタックは、それはより複雑になりますので、私のdivが応答正方形で...私はあなたが結合された二つの質問が多くの助けを見つけることができませんでし

.grid { 
 
    position: relative; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    padding-right: 50%; 
 
} 
 

 
.photo { 
 
    position: relative; 
 
    flex: 0 0 calc(50% - 20px); 
 
    margin: 10px; 
 
    overflow: hidden; 
 
    background: black; 
 
} 
 

 
.photo:not(.large):after { 
 
    content: ""; 
 
    display: block; 
 
    padding-top: 100%; 
 
} 
 

 
.large { 
 
    position: absolute; 
 
    right: 0; 
 
    width: calc(50% - 20px); 
 
    height: calc(100% - 20px); 
 
}

<div class="grid"> 
 
    <div class="photo large"></div> 
 
    <div class="photo"></div> 
 
    <div class="photo"></div> 
 
    <div class="photo"></div> 
 
    <div class="photo"></div> 
 
</div>

Answer 2

このソリューションは、単にInternet Explorerでそのcompatibilityの留意、css gridを使用しています。

.grid { 
 
    display: grid; 
 
    grid-gap: 10px; 
 
    width:100vw; 
 
    height:100vh; 
 
    grid-template: "item1 item2 large large" "item3 item4 large large" 
 
} 
 

 
.photo { 
 
    background: black; 
 
} 
 
.large { 
 
    grid-area:large; 
 
} 
 
.photo:nth-of-type(2){ grid-area:item1;} 
 
.photo:nth-of-type(3){ grid-area:item2;} 
 
.photo:nth-of-type(4){ grid-area:item3;} 
 
.photo:nth-of-type(5){ grid-area:item4;}

<div class="grid"> 
 
    <div class="photo large"></div> 
 
    <div class="photo"></div> 
 
    <div class="photo"></div> 
 
    <div class="photo"></div> 
 
    <div class="photo"></div> 
 
</div>