簡単そうなレイアウトなのに、gridを使って表示できない。

添付画像のレイアウトをgridを使い再現しようとしているのですが、
うまく表示されません。

解決可能かたがいましたら、ご教示いただけますと幸いです。

よろしくお願いいたします。

▼実現したいこと
添付画像の表示。
添付画像は左から[PC],[タブレット],[スマホ]

▼出来ないこと
・コンテンツ幅760px内で、均等にPCの場合は1行４つのシェイプ(画像）で、5つ目以降は折り返しされて、2行目に同じように4つ表示されてまた4つ表示されたら折り返す。
（タブレット、スマホなどは1行に２つ表示）

▼出来たこと
∟黒の三角形のシェイプはディスプレイ幅いっぱいにできました。　　
∟「見出し」の位置は表示できました。

▼表示について補足
黒色三角形と1行目の赤色シェイプは、添付画像のように重なるように表示。
添付画像でいうと1行目左２つの画像は重なっているので、そのように表示

▼ソースコードについて
・クラスwrapperのgrid-template-columns、grid-template-rowsもしくはgirid-templateで色々試したのですが、できませんでした。
・クラスinnerのgrid-rowもしくはgrid-columnで色々試したのですが、できませんでした。
・HTMLには新しいdivなどを追加・削除しても問題ありません。

▼HTML
    <div class="contents">
        <div class="wrapper">
            <div class="head"></div>
            <p class="read">見出し</p>
            <div class="inner red">
                <img src="https://placehold.jp/170x170.png" width="170" height="170" >
            </div>
            <div class="inner red">
                <img src="https://placehold.jp/170x170.png" width="170" height="170" >
            </div>
            <div class="inner red">
                <img src="https://placehold.jp/170x170.png" width="170" height="170" >
            </div>
            <div class="inner red">
                <img src="https://placehold.jp/170x170.png" width="170" height="170" >
            </div>
        </div>
    </div>

.wrapper {
    display: grid;
    max-width: 760px;
    margin: 0 auto;
//    grid-template-columns: ;  
//    grid-template-rows: 
}


.head {
    background-color: #e60046;
    height: 140px;
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    -webkit-clip-path: polygon(0 0, 0 90%, 100% 0);
    clip-path: polygon(0 0, 0 90%, 100% 0);
    z-index: -1;
}

.read {
     grid-row: 1/1;
     grid-column: 1/1;
     color: #fff;
     font-size: 3rem;
 }
 
 .inner {
    // grid-row: ;
    // grid-column: ;
}
 .red {
      background-color: red;
}

行動規範の内容に同意します

回答1件

ベストアンサー

こんばんは。

コンテンツ幅760px内で、均等にPCの場合は1行４つのシェイプ(画像）で、5つ目以降は折り返しされて、2行目に同じように4つ表示されてまた4つ表示されたら折り返す。

1frでサイズをフレックスに指定してもいいですし、どのみち760/4=190pxなのは決まっているのですから、px単位で指定しても構わないと思います。

サンプル

css
1.wrapper {
2    grid-template-columns: repeat( 4, 1fr ) [end];  
3}
4
5.head {
6//    position: relative;
7    position: absolute;
8}
9
10.read {
11//     grid-column: 1/1;
12     grid-column: 1 / span end;
13 }