White Space
WebLife

【CSS】Grid Layout で意図しない行間が空いてしまう時の対処法

  • CSS

display: gridでレイアウトを組んでいるときに、auto や min-content 指定のときに行に余白（スペース）が生まれてしまう時の対処法を紹介します。

例

こちらのコードの例を使っていきます。head や body などの右側の要素の高さに余白が開いてしまっています。

See the Pen Grid Layout Less Blank by d3nsk (@d3nsk3) on CodePen.dark

HTML

<div class="grid">
  <div class="image">...</div>
  <div class="head">...</div>
  <div class="body">...</div>
  <div class="item">...</div>
</div>

CSS

.grid {
  display: grid;
  grid-template: 
    "image head" auto
    "image body" auto
    "image item" auto 
    / 100px auto;
  gap: 20px;
}

.image {
  grid-area: image;
}
.head {
  grid-area: head;
}
.body {
  grid-area: body;
}
.item {
  grid-area: item;
}
grid-templategrid-template-columns、grid-template-rowsなどの省略形です。
今回はgrid-areaで名前をつけ、それぞれ行と列の設定をしています。

対処法

グリッドレイアウトのプロパティを調整する

今回は全ての行に対してautoを指定していますが、全てautoだと左側の要素の高さに合わせて親要素の高さも増え、その中で均等配置されてしまいます。

そこで、一番最後の要素に対して1frを設定します。

CSS

.grid {
  display: grid;
  grid-template: 
    "image head" auto
    "image body" auto
    "image item" 1fr
    / 100px auto;
  gap: 20px;
}

See the Pen Grid Layout Less Blank Resolved by d3nsk (@d3nsk3) on CodePen.dark


autoで要素分の高さになった後、1frで残りの余白を詰めることができました。

line-height での調整

余計な line-height が入っていると、1行でも余白が大きめにあいているように見えます。複数行になる想定でない場合、line-height に 0 を指定すると余白が消える可能性があります。

画像などを grid レイアウトの中に入れている場合は有効かもしれません。

.head {
  line-height: 0;
}

※ただし、複数行になると文字が重なるため使用できる箇所は限定的です。また、grid レイアウトのプロパティが原因の場合は治りません。

他にも grid には最小値と最大値を決められるminmax()、中身の要素で可変した時の最小値になるmin-content、可変した時の最大値になるmax-contentなど多数の指定方法があるので使い分けられるようにしていきたいですね。