チェックボックスやラジオボタンをただ順番に並べるのではなく、綺麗に整列させたい。
例えば1行に3個ずつ並べたいときはdisplay:gridを使う。
<!DOCTYPE html>
<html>
<head>
<title>チェックボックスを1行に3個ずつ表示 (グリッド)</title>
<style>
/* スタイル付け */
.checkboxArea {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 1行に3つの列を作成 */
gap: 10px; /* チェックボックス間の余白を設定 */
}
.checkboxArea label {
display: block; /* ラベルをブロック要素として表示 */
}
</style>
</head>
<body>
<!-- チェックボックスを表示 -->
<div class="checkboxArea">
<label>
<input type="checkbox"> チェックボックス 1
</label>
<label>
<input type="checkbox"> チェックボックス 2
</label>
<label>
<input type="checkbox"> チェックボックス 3
</label>
<label>
<input type="checkbox"> チェックボックス 4
</label>
<label>
<input type="checkbox"> チェックボックス 5
</label>
<label>
<input type="checkbox"> チェックボックス 6
</label>
<label>
<input type="checkbox"> チェックボックス 7
</label>
<label>
<input type="checkbox"> チェックボックス 8
</label>
<label>
<input type="checkbox"> チェックボックス 9
</label>
<label>
<input type="checkbox"> チェックボックス 10
</label>
</div>
</body>
</html>
結果は以下の通り、1行に3個ずつ並べられた。

grid-template-columns
: グリッドコンテナ内の列の幅を設定するためのプロパティ。repeat(3, 1fr)
:repeat
関数を使用して、3つの列を作成し、各列の幅を1fr
に設定する意味。
具体的には、
grid-template-columns
プロパティは、グリッドコンテナ内に何本の列を配置するかを指定します。repeat(3, 1fr)
は、3本の列を作成し、各列の幅を1fr
に設定します。1fr
は “fraction”(分数)を表し、利用可能な水平スペースを均等に3つの部分に分割します。各列は等しい幅を持ちます。
これにより、グリッドコンテナ内に3つの等幅の列が作成され、チェックボックスなどの要素がこれらの列に均等に配置され、1行に3つの要素が表示される。