著者のプロフィール
説明
著者に限らないのですが、アバター画像の横に、ユーザーの名前や肩書などを並べる際にもCSS Gridは有用です。
HTMLを見れば分かる通り、とても簡潔な状態です。レイアウトを指定するためにgrid-templateプロパティを使っているので、メディアクエリを使って、画面幅に応じて、レイアウトを自由に変えることもできます。
CSS Flexboxでも可能なレイアウトですが、左の画像側と、右のテキスト側を区別するために、テキスト側要素をを囲む必要が出てきます。そうなった場合、メディアクエリを使ってレイアウトを変えたいとなったときに、HTMLの都合上、不可能なレイアウトがでてきてしまうでしょう。
HTML
<p class="Author">
<img class="Author_Img" src="http://lorempixel.com/output/animals-q-g-200-200-7.jpg" alt="名前 名前" width="100" height="100">
<span class="Author_Name">姓名 太郎</span>
<span class="Author_Title">フロントエンド・エンジニア</span>
</p>
CSS
.Author {
display: grid;
grid-template:
"img name" auto
"img title" auto
/100px 1fr
;
gap: 0 10px;
padding: 10px;
border-radius: 4px;
background-color: #f0f1f1;
}
.Author_Img {
grid-area: img;
border-radius: 100%;
background-color: #ccc;
}
.Author_Name {
grid-area: name;
align-self: end;
}
.Author_Title {
grid-area: title;
align-self: start;
font-size: 0.8em;
}