css grid layoutで画像を使うと画像の下にスペースができる+画像が完全に小さくならない原因の解決策

前提・実現したいこと

二列で三行の画面にフィットする食品リストを作成しています。そこでcss gridを使いましたが、画像の下にスペースができて画面外に謎のスペースができてしまいます。また画面を縮めていった再に画像がどんどん小さくなってほしいのですが、これも実現できません

発生している問題・エラーメッセージ

画像の下にスペースができて画面外に謎のスペースができてしまいます。また画面を縮めていった再に画像がどんどん小さくなってほしい（消えるまで小さくなっていい）のですが、

該当のソースコード

Sass
* {
    margin:0;
    padding:0
}

.food-card {
    width: 90vw;
    height: 100vh;
    grid-template-rows: 1fr;
    grid-template-columns: 1fr  1fr 1fr;
    display:grid;
    
    .card {
      display: grid;
      grid-template-rows: auto 1fr;
    }

    
    .card-img {
  width: 100%;
  height: 100%;
    }
}

html
<div class="food-card">
  <div class="card">
    <div class="card-body">
      <h3>肉まん
      </h3>
      <p class="card-text">ふんわりやわらかな生地でこだわりの具材をたっぷり包みました。そのまま食べられるので、いつでもどこでも手軽にお召し上がりいただけます。</p>
    </div>
    <div class="card-image">      <img class="card-img" src="" alt="ふんわりやわらかな生地でこだわりの具材をたっぷり包みました。">

    </div>
  </div>
  <div class="card">
    <div class="card-body">
      <h3>肉まん
      </h3>
      <p class="card-text">ふんわりやわらかな生地でこだわりの具材をたっぷり包みました。そのまま食べられるので、いつでもどこでも手軽にお召し上がりいただけます。</p>
    </div>
    <div class="card-image">      <img class="card-img" src="" alt="ふんわりやわらかな生地でこだわりの具材をたっぷり包みました。">

    </div>
  </div>
  <div class="card">
    <div class="card-body">
      <h3>肉まん
      </h3>
      <p class="card-text">ふんわりやわらかな生地でこだわりの具材をたっぷり包みました。そのまま食べられるので、いつでもどこでも手軽にお召し上がりいただけます。</p>
    </div>
    <div class="card-image">
      <img class="card-img" src="" alt="ふんわりやわらかな生地でこだわりの具材をたっぷり包みました。">
    </div>
  </div>
</div>

試したこと

overflowを使うとはみ出さなくなりますが、根本解決に至った気がしないのでできれば使いたくありません。

補足情報（FW/ツールのバージョンなど）

Sassはgulp最新版でビルドします。できればhtmlは変えない方法でよろしくお願いします。

行動規範の内容に同意します

回答1件

ベストアンサー

画像の下にスペースができて画面外に謎のスペースができてしまいます。

画像がベースラインに合わせられているためです。その余白はディセンダーと呼ばれます。詳細は Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification の 9.4.2 Inline formatting contexts に書かれているとおりです。

これを解決するための方法には、 vertical-align プロパティもしくは display プロパティを変更する方法があります。

vertical-align プロパティを変更する場合 (動作確認用リンク):

Sass
1* {
2  margin: 0;
3  padding: 0;
4}
5
6.food-card {
7  width: 90vw;
8  height: 100vh;
9  grid-template-rows: 1fr;
10  grid-template-columns: 1fr 1fr 1fr;
11  display: grid;
12
13  .card {
14    display: grid;
15    grid-template-rows: auto 1fr;
16  }
17
18  .card-img {
19    width: 100%;
20    height: 100%;
21    vertical-align: top; /* 追加 */
22  }
23}

display プロパティを変更する場合 (動作確認用リンク):

Sass
1* {
2  margin: 0;
3  padding: 0;
4}
5
6.food-card {
7  width: 90vw;
8  height: 100vh;
9  grid-template-rows: 1fr;
10  grid-template-columns: 1fr 1fr 1fr;
11  display: grid;
12
13  .card {
14    display: grid;
15    grid-template-rows: auto 1fr;
16  }
17
18  .card-img {
19    display: block; /* 追加 */
20    width: 100%;
21    height: 100%;
22  }
23}

また画面を縮めていった再に画像が原寸よりどんどん小さくなってほしいのですが、これも実現できません

grid アイテムでの最小コンテンツサイズの解決値が原因です。

§ 6.6. Automatic Minimum Size of Grid Items

The automatic minimum size for a grid item in a given dimension is its specified size if it exists, otherwise its transferred size if that exists, else its content size, each as defined in [CSS-FLEXBOX-1]. However, if the grid item spans only grid tracks that have a fixed max track sizing function, its specified size and content size in that dimension (and the input to the transferred size in the other dimension) are further clamped to less than or equal to the stretch fit the grid area’s size (so as to prevent the automatic minimum size from forcing overflow of its fixed-size grid area).

これを解決するためには、 minmax 関数もしくは min-height プロパティを用いて最小値の上書きを行う必要があります。

minmax 関数を用いる場合 (動作確認用リンク):

Sass
1* {
2  margin: 0;
3  padding: 0
4}
5
6.food-card {
7  width: 90vw;
8  height: 100vh;
9  grid-template-rows: minmax(0, 1fr); /* 変更 */
10  grid-template-columns: 1fr 1fr 1fr;
11  display: grid;
12
13  .card {
14    display: grid;
15    grid-template-rows: auto minmax(0, 1fr); /* 変更 */
16  }
17
18  .card-img {
19    display: block;
20    width: 100%;
21    height: 100%;
22  }
23}

min-height プロパティを用いる場合 (動作確認用リンク):

Sass
1* {
2  margin: 0;
3  padding: 0
4}
5
6.food-card {
7  width: 90vw;
8  height: 100vh;
9  grid-template-rows: 1fr; 
10  grid-template-columns: 1fr 1fr 1fr;
11  display: grid;
12
13  .card {
14    display: grid;
15    grid-template-rows: auto 1fr;
16    min-height: 0; /* 追加 */
17  }
18  
19  .card-image {
20    min-height: 0; /* 追加 */
21  }
22
23  .card-img {
24    display: block;
25    width: 100%;
26    height: 100%;
27  }
28}

投稿2019/11/23 16:16

s8_chu

総合スコア14731

kyoya0819

2019/11/23 16:29

補足で画像下の余白をなくす方法には邪道な考え方で font-size: 0; line-height: 0 と指定するやり方もあります。ただ、本当に邪道なので必要に迫られた時ぐらいしか使わないほうが良いです。こんなやり方もあるんだなー程度で知っておいてください。（本当に必要に迫られる場面が来るかどうかは不明） http://ideahacker.net/2013/12/03/6983/

行動規範の内容に同意します