HTML/CSS入門 Gridで重なりを表現してみよう

CSS Gridを使って要素の重なりを表現してみます。

以下のような感じです。

少しわかりづらいですが、ピンクの要素の下部に黒の要素が重なっています。ピンクが画像、その画像の説明が入ります。

完成形は以下です。


参考にHTMLとCSSを載せておきます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="main.css">
    <title>grid001</title>
</head>
<body>
    <div class="container">
        <img class="picture" src="img/tamibuz.png" width="500" height="350">
        <div class="desctiption">
            たみぼうずの自画像。
            いつも口空いていることを指摘される。<br/>
            マラソンは60代男性の平均と同じペース。<br />
            フロントエンドのエンジニア。<br />
            トマトが好き。
        </div>
    </div>
</body>
</html>
.container{
    display: grid;
    align-items: end;

    width: 500px;
    height: 350px;
    border: 5px solid lightgreen;
    border-radius: 4px;
}
.picture {
    grid-row: 1/3;
    grid-column: 1/2;
}
.desctiption {
    grid-row: 2/3;
    grid-column: 1/2;

    background: #000;
    opacity: 0.4;
    color: #FFF;
}