左に画像があって、真ん中にタイトルと説明があって、右に日付があるようなカードのHTML/CSSでの表現はGridが便利だった

こういうのHTML/CSSで書く時どうしてます？

最低限必要な中身はこんな感じだと思います

<div class="class">
  <img class="image" />
  <h2 class="title" />
  <p class="description" />
  <p class="date" />
</div>

Twitterでも聞いてみました

こういうのHTML/CSSで書く時どうしてます？
画像と右側の文字群を親にdisplay: flex指定してレイアウトするか、画像と日付をpositionで指定するか、grid？を使うかあたりで悩んでおります、、 pic.twitter.com/XEC96mfaFP

— こばしゅん (@ksyunnnn) October 2, 2019

なんとなく思いつくのは display: flexじゃないですかね。

ただその場合 h2.titleと p.descriptionを更に<div/>で囲ってあげる必要がありますね。それでも問題ないんですが、どうせならHTMLはこのままで、CSSのみでデザインを反映したくないですか？

自分はgrid使いますかね。
grid-template:
"image title date" 30px
"image description description" 1fr /
40px 180px 50px;

的な感じでしょうか。

— ザリガニデザインオフィス (@zarigani_design) October 2, 2019

Twitter最高。display: grid使えばいい感じにできそうということが模範解答つきで教えてもらえました。神かよ..

更にこのあたりを参考にして、実装してみました。

※gridに関する記述のみ抜粋

.card {
  display: grid;
  row-gap: 8px;
  column-gap: 16px;
  grid-template:
    "image title date" 30px
    "image description description" 1fr /
    80px 1fr 90px;
}

.image {
  grid-area: image;  
}

.title {
  grid-area: title;  
}

.description {
  grid-area: description;
}

.date {
  grid-area: date;
}

grid-templateの箇所だけ、最初は吐き気を催すかもしれませんが、落ち着いてください。何度みても吐き気がします。

なんとなくテーブルのような構造をイメージしながら読めばわかりやすいのかな、と個人的に思っているのですが

grid-template:
    /* 1行目の高さ(row)と、1行目に含む内容 */
    "image title date" 30px

    /* 2行目の高さ(row ※1frは残りの長さを指定するgridでの表現)と、2行目に含む内容
       スラッシュ(/)以降は、縦の列(column)の幅をそれぞれ指定
     */
    "image description description" 1fr /
    80px 1fr 90px;
}

まあこんな感じです、、。まあ雰囲気で使っていきましょう、、

結果がこちら〜

See the Pen Grid Card by Kobashi syunsuke (@ksyunnnn) on CodePen.

それでは、Happy Gridライフを〜