【CSS】グリッドレイアウトで要素を折り返す方法

2018年2月17日2019年6月12日CSS,グリッドレイアウト

グリッドレイアウト（Grid Layout）で並べた要素を折り返すには、grid-template-columnsを使用している場合の要素の並び数は「repeat()」を使って「auto-fill」や「auto-fit」にて定義することで要素を折り返す事が可能です

サンプルHTML

<div class="sample1">
	<p>A</p>
	<p>B</p>
	<p>C</p>
	<p>D</p>
	<p>E</p>
	<p>F</p>
	<p>G</p>
	<p>H</p>
	<p>I</p>
</div>

repeat(auto-fill)を使って要素を折り返す

「repeat(auto-fill,サイズ)」とすると全体の幅を超えると折りたたまれます

サイズを「auto」や「1fr」としている場合は要素サイズが縮小されていくので折りたたみは実行されません

サンプルは固定値ですが、グリッドレイアウトのメリットを活かすにはminやminmax()などで最小値を指定すると期待の挙動に近づけれるかもしれません

.sample1{
display: grid;
grid-template-columns: repeat(auto-fill,120px);
grid-template-rows: auto;
grid-gap: 5px;
}

repeat(auto-fit)を使って要素を折り返す

「auto-fill」と「auto-fit」は概ね同じ動作をします

.sample1{
display: grid;
grid-template-columns: repeat(auto-fit,120px);
grid-template-rows: auto;
grid-gap: 5px;
}

「auto-fill」と「auto-fit」の違い

「auto-fill」と「auto-fit」の違いは、「auto-fill」は空いたスペースに見えないですが要素スペースが確保まれます

「auto-fit」は要素分のスペースだけが確保されます

用途的には、続けて次の要素を置きたい時や「justify-content」等で中央寄せにしたい場合は「auto-fit」を使います

関連記事：【CSS】グリッドレイアウト、縦や横で要素の中央揃え方法