【CSS】 同じクラス名の要素を連続で等間隔に並べる3つの方法

こんにちは、さち です。

サイトを作るときに、同じ形式（同じクラス名）の要素を連続で等間隔に並べるようにしたいことってありますよね？（上図参照）

実装する「CSS」にはいろいろな書き方があって、どれを使うかは状況次第。

ということで、同じクラス名の要素を等間隔に配置する方法についてまとめてみます。

完成予定図

 .block クラス要素同士を 30px の間隔で配置してみましょう。

どのような「CSS」を書けばできるでしょうか？

実装方法

【方法1】 「margin-top」で実装

<div class="parent">
  <div class="child">テキスト</div>
  <div class="child">テキスト</div>
  <div class="child">テキスト</div>
  <div class="child">テキスト</div>
</div>

/* 2個目以降の「.child」要素だけに適用 */
.child + .child {
  margin-top: 30px;
}

/* この記述でもできる */
.child:nth-of-type(n+2) {
  margin-top: 30px;
}

2個目以降の .child 要素だけに margin-top: 30px; を適用するという、シンプルな発想の方法です。

セレクターの .child + .child は、.child 要素の直後にある .child 要素という意味なので、連続して並ぶ2個目以降の .child 要素だけに margin-top: 30px; が適用されます。

【方法2】 「flex」で実装

<div class="parent">
  <div class="child">テキスト</div>
  <div class="child">テキスト</div>
  <div class="child">テキスト</div>
  <div class="child">テキスト</div>
</div>

.parent {
  display: flex;
  flex-direction: column;/* 要素を「縦」方向に並べる */
  gap: 30px;/* 30px間隔で並べる */
}

「親」要素である .parent 要素に CSS を適用します。

flex-direction: column; によって .child 要素が並ぶ方向を「縦」方向にします。

また、gap: 30px; によって「子」要素である .child 要素同士の間隔を 30px にします。

【方法3】 「grid」で実装

<div class="parent">
  <div class="child">テキスト</div>
  <div class="child">テキスト</div>
  <div class="child">テキスト</div>
  <div class="child">テキスト</div>
</div>

.parent {
  display: grid;
  gap: 30px;/* 30px間隔で並べる */
}

「親」要素である .parent 要素に CSS を適用します。

gap: 30px; によって「子」要素である .child 要素同士の間隔を 30px にします。