Quantcast
Channel: CSSタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8655

グリッドレイアウトで余白、隙間を設定する方法

$
0
0

はじめに

gridレイアウトでは個別の位置指定をしない限り、grid枠に従ってすきまなく順番に配置されます。
今回はgridレイアウトに余白を設定する方法をまとめてみました。

gridの基本はこちらにまとめてあるので、よかったら参考にしてください。
gridの使い方

gridレイアウトに余白を付ける

余白の付け方は簡単で、
横方向の余白はcolumn-gapプロパティ、縦方向にはrow-gapプロパティを使うだけです。

#{display:grid;grid-template-columns:repeat(3,1fr);column-gap:10px;row-gap:30px;}

これでgridのそれぞれの隙間に余白を付けることができます。

また、gap:10px;のようにまとめて付けることもできます。

余白を細かく指定するときは下記の2つを使用します。

justify-content

justify-contentは、コンテナ内におけるグリッドの横方向(インライン軸)の位置を指定するプロパティです。

使える値は

start       左寄せ
center      中央寄せ
end       右寄せ
stretch      軸の領域いっぱいにグリッドを広げる
space-between  均等配置 / 左右の余白無し
space-around   均等配置 / 左右の余白ありはアイテム間の半分
space-evenly   均等配置 / 左右の余白はアイテム間と同様

などがあります。

align-content

align-contentは、コンテナ内におけるグリッドの縦方向(ブロック軸)の位置を指定するプロパティです。

使える値は

start       上寄せ
center      中央寄せ
end       下寄せ
stretch      軸の領域いっぱいにグリッドを広げる
space-between   均等配置 / 上下の余白無し
space-around   均等配置 / 上下の余白ありはアイテム間の半分
space-evenly   均等配置 / 上下の余白はアイテム間と同様

などがあります。

おわり

gridはflexboxに比べてシンプルに作成できるのでぜひ使ってみてください。


Viewing all articles
Browse latest Browse all 8655

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>