CSS グリットがうまく反映されない件

Question

cssグリッドの表記を用いて作成しております。

• グリッドを孫要素に反映させたいと考えております。

<ul class = "container_2">
            <li><img src="img/犬.jpeg" class = "pic_5_1" alt="画像の説明" ></li>
            <li><img src="img/ライオン.jpeg" class = "pic_5_2" alt="画像の説明" ></li>
            <li><img src="img/猫.jpeg" class = "pic_5_3" alt="画像の説明"></li>  
            <li><img src="img/サル.jpeg" class = "pic_5_4" alt="画像の説明"></li>
            <li><img src="img/ペンギン.jpeg" class = "pic_5_5" alt="画像の説明"></li>
        </ul>

.container_2{
    padding: 0;
    position: relative;
    display: grid;
    grid-template-rows: 200px 100px 100px 200px;
    grid-template-columns: 300px 300px;
}
.pic_5_1{
    width: 300px;
    height: 300px;
    grid-row: 1/3;
    grid-column: 1/2;
}

• gridの処理を孫要素であるimgタグに反映させたいと考えておりますが、うまくいきません。

解決策、ないしこのような手法を使うといいよということを教えていただけると幸いです。

Answer 1

CSS Gridは孫要素に影響しません。
小要素のliでグリッドの配置を決定し、imgではdisplay: block; width: 100%; height: 100%; object-fit: contain;とかで帳尻を合わせるしかないです。

Comments

[yuyu]

返信ありがとうございます。
liのところにGridを反映させてimgタグになんとか反映させる方法などありませんでしょうか？

[KAOsaka]

完成形がわからないのでなんとも言えないのですが、そのまま当てはめると https://jsfiddle.net/ar7u1p3x/12/ こちらのデモのようになりますね。