グリッド・アイテム・リストを特別な順序で作成します。 （フレックスボックスなどで）

Question

私は特別なグリッドリストを作ろうとしていますが、（デスクトップとモバイルで）うまくいくソリューションを見つけることはできません。私のためのヒント。

特別なレイアウトのリスト（左の画像）が必要ですが、これは複数のネストされたグリッドを追加することで問題にはなりませんが、リスト要素（ラッパー）にクラスを追加したい別のグリッドレイアウト（右画像）。私はフレックスボックスで作業しようとしたが、CSS3ソリューションはないと思うし、ジャバスクリプトでそれをやらなければならない - しかし、私がjs-solutionを取る前に、私はUに質問したい。

私は何を意味するかを説明するためにイメージを追加しました。

Answer 1

これは、あなたは常にあなたの現在のソリューションのいくつかのコードを追加する必要がありますマージン

.list { 
 
    display: inline-flex; 
 
    flex-wrap: wrap; 
 
    width: 150px; 
 
    border: solid 1px green; 
 
    margin: 5px; 
 
} 
 

 
.item { 
 
    width: 50px; 
 
    height: 50px; 
 
    box-shadow: inset 0px 0px 0px 1px blue; 
 
} 
 

 
.list:not(.first) .jumbo { 
 
    width: 100px; 
 
    height: 100px; 
 
    margin-bottom: -100px; 
 
} 
 

 
.list:not(.first) .jumbo + .item { 
 
    margin-right: 100px; 
 
} 
 
.first .item:first-child { 
 
    width: 150px; 
 
}

<div class="list"> 
 
    <div class="item">1</div> 
 
    <div class="item jumbo">2</div> 
 
    <div class="item">3</div> 
 
    <div class="item">4</div> 
 
    <div class="item">5</div> 
 
</div> 
 

 
<div class="list first"> 
 
    <div class="item">1</div> 
 
    <div class="item jumbo">2</div> 
 
    <div class="item">3</div> 
 
    <div class="item">4</div> 
 
    <div class="item">5</div> 
 
</div>