グリッドレイアウトで余分な余白ができてしまう

Question

実現したいこと

左カラムに<h>と<p>、右カラムに画像を配置するグリッドレイアウトをしています。
この時、左カラムの要素の文字量だけの高さにしてgapを適用したいです。

発生している問題・分からないこと

下記コードでは本来、<h3>は1行分だけの高さを想定していますが、間を埋めるように高さに余白ができてしまっています。
これを、本来は1行分の高さのままgapを適用するようにしたいです。
ご教授お願いします。

該当のソースコード

<div class="container">
  <div class="grid__wrapper">
    <h3 class="grid__ttl">ダミーダミーダミーダミーダミー</h3>
    <p class="grid__txt">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque aliquid in dignissimos. Quibusdam iste autem, repellendus corporis laboriosam ducimus repudiandae at repellat quidem ipsum, suscipit a veritatis beatae exercitationem fuga.</p>
    <div class="grid__img"><img src="https://picsum.photos/id/237/400/400"</div>
  </div>
</div>

p,h3{
  padding:0; margin:0;
}
.container{
  width:900px;
  height:100vh;
  background:#eee;
}

.grid__wrapper{
  display:grid;
  grid-template-columns: repeat(2, auto);
  grid-template-rows: repeat(2, auto);
  grid-auto-flow: column;
  padding:32px 0 40px;
  background:green;
  gap:32px 20px;
/*   align-items:start; */
}


.grid__ttl{
  background:red;
}

.grid__txt{
  background:blue;
}
.grid__img{
  grid-row: span 2;
}

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

align-itemsプロパティを使えば要素の文字量に応じた高さになりますが、今度はgapがその分だけ埋めてしまうようです。

補足

可能であればhtml構造は変えないままCSSのみで実現したいです。

Comments

[iceclaimer]

また、<h>タグに限らず、<p>タグ内の文字量に応じても同様の処理ができるようにしたいです

[yambejp]

グリッドの要素の高さを優先すればがgapが想定と違ってきたりしませんか？
もうすこし仕様を固めたほうがよいと思います

[juner]

auto だと 余白が作れない場合にそれだけ伸びてしまう為、正攻法だと 左のカラムを 縦方向 flex にした方がよさそうな気がしますね。もしくは余白用の cell を用意して それに受け持たせるか

Answer 1

auto で高さを指定するのではなくて、 余白を 1fr で指定したらいいのではないでしょうか？

.grid__wrapper {
  grid-template-rows: min-content 1fr;
}

参考

• 動作確認用 playground
• 固定のトラックサイズと可変のトラックサイズ - グリッドレイアウトの基本概念 - CSS: カスケーディングスタイルシート | MDN

追伸

もしも、p も余白空けたいならこうとか？

.grid__wrapper {
  grid-template-rows: repeat(3, auto);
}
.grid__img {
  grid-row: span 3;
}

参考

• 動作確認用 playground

Answer 2

grid__ttlクラスにheightを指定し、grid__wrapperクラスのgapを調整してみては？

.grid__ttl{
  height:fit-content;
}
.grid__wrapper{
  gap: 20px;
}