【CSS】Gridで左右交互配置

  • 投稿日
  • 著者 くまだ
  • カテゴリー 未分類

どうも、くまだです。

CSSのGridを使って左右交互配置についてのメモ。

Gridで左右交互配置

CSSで左右交互配置はflexboxでrow-reverse使う方法がありますが、row-reverseはGridでは使えないので、別な方法で左右交互配置できます。

コードは以下になります。

     <div class="p-cards">
      <div class="p-cards__item">
        <div class="p-cards__img">
          <img src="dummy2.png" alt="">
        </div>
        <div class="p-cards__textBox">
          <p class="p-cards__text">テキストテキストテキストテキストテキストテキストテキストテキスト</p>
        </div>
      </div>
      <div class="p-cards__item">
        <div class="p-cards__img">
          <img src="dummy2.png" alt="">
        </div>
        <div class="p-cards__textBox">
          <p class="p-cards__text">テキストテキストテキストテキストテキストテキストテキストテキスト</p>
        </div>
      </div>
      <div class="p-cards__item">
        <div class="p-cards__img">
          <img src="dummy2.png" alt="">
        </div>
        <div class="p-cards__textBox">
          <p class="p-cards__text">テキストテキストテキストテキストテキストテキストテキストテキスト</p>
        </div>
      </div>
    </div>
.p-cards {
    display: grid;
    row-gap: 40px;
}


.p-cards__item{
    display: block grid;
    grid-template-columns: repeat(2,1fr);
    column-gap: 20px;
    align-items: flex-start;
}


.p-cards__item:nth-child(odd){
    direction: rtl;
}

.p-cards__img {
    inline-size: 100%;
}


.p-cards__textBox {
    direction: ltr;
}

以下の部分で画像とテキストブロックを横並びにしています。

.p-cards__item{
    display: block grid;
    grid-template-columns: repeat(2,1fr);
    column-gap: 20px;
    align-items: flex-start;
}

画像とテキストの左右配置の逆は以下の部分でしています。nth-child(odd)はp-cards__item要素の奇数番目に適用させます。

directionプロパティは文書の水平方向の書字方向を指定するプロパティです。

「ltr」で左から右、「rtl」で右から左になります。

.p-cards__item:nth-child(odd){
    direction: rtl; /* 右から左へ */
}

ただし、上の記述だけだと子要素のテキストの方向も影響を受けるので、右から左に書字方向が変わります。

なので、以下の部分で書字方向を左から右に直しておきます。

.p-cards__textBox {
    direction: ltr;　 /* 左から右へ */
}

ここまで読んでくださりありがとうございました。

この記事を書いた人

くまだ

記事一覧