カード型レイアウトはwebサイトを作る上でよくあるUIの1つです。

実装方法は色々ありますが、この記事ではFlexboxとネガティブマージンを使った方法を紹介します。

この記事はお悩み解決系の記事なので、Flexboxに関する理解を深めたい方は下の記事をご覧ください。

実装したいデザイン

このようなレイアウトを実装します。画像は3カラムになっていますが、4カラムまで対応します。

デモも作ったので幅を変えて確認してみてください。

space-betweenを使う方法の問題点

余白を均等にする方法で1番最初に思い浮かぶのが、justify-content: space-between;ではないでしょうか？

しかし、管理者やユーザーが投稿するコンテンツでは投稿数がいくつになるか分かりません。justify-contentを使った方法では特定条件で不自然なレイアウトになります。

<div class="posts">
    <article class="posts-item">...</article>
    ...
    <article class="posts-item">...</article>
</div>

.posts {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.posts-item{
    width: 32%;
}

上のコードは、特定条件で不自然なレイアウトになる書き方です。

カラム数のn倍の投稿数がある場合は問題ありません。

カラム数のn倍の投稿数でない場合、不自然なレイアウトになってしまいます。

justify-contentで均等に余白を作る方法は、flex アイテムの個数があらかじめ決まっているものでないと、このような問題が起きます。

nth-childや擬似要素を使う方法について

justify-contentの問題を解決する方法として、nth-childを使う方法や擬似要素を使う方法がありますが、個人的にどちらも少しややこしかったり、不便に感じます。

• nth-childを多用すると分かりにくくなる
• 擬似要素を使った方法は4カラム以上で使えない、かつ他で擬似要素を使いたい時に不便

これらが個人的にあまり好きじゃない理由です。

詳しくは解説しないので、興味がある方は調べてみてください。そして今回紹介するネガティブマージンを使った方法と比べてみてください。

ネガティブマージンでカード型レイアウトを実装する方法

<div class="posts">
    <article class="posts-item">...</article>
    ...
    <article class="posts-item">...</article>
</div>

.posts {
    margin-top: -40px;
}

.posts-item {
    padding-top: 40px;
}

@media screen and (min-width: 500px) {
    .posts {
        display: flex;
        flex-wrap: wrap;
        margin: -40px 0 0 -24px;
    }

    .posts-item {
        width: 50%;
        padding: 40px 0 0 24px;
    }
}

@media screen and (min-width: 800px) {
    .posts-item {
        width: 33.33333%;
    }
}

@media screen and (min-width: 1000px) {
    .posts-item {
        width: 25%;
    }
}

カードの上と左の余白はpaddingで40pxと24pxに設定しています。ただし、このままだとflexコンテナに接する上側の余白と左側の余白が邪魔です。従って、その邪魔な余白をflexコンテナ側でネガティブマージンを使って相殺しています。

図にするとこのようなイメージです。

posts-itemのwidthはcalcを使うとIEでカラム落ちする場合があるので、使っていませんが、IE無視で良ければcalcを使った方がより簡単です。

<div class="posts posts--col4">
    <article class="posts-item">...</article>
    ...
    <article class="posts-item">...</article>
</div>

普段はこのように、バリエーションクラスを使って最大カラム数が4の時は、posts--col4を付与するような運用にしています。

背景色を入れることも考慮したコーディング

このようにカードに背景色を入れたい場合もあると思います。前述したやり方では、図のような形になりません。

<div class="posts posts--col4">
    <article class="posts-item">
        <div class="post">...</div>
    </article>
    ...
    <article class="posts-item">
        <div class="post">...</div>
    </article>
</div>

/* 追加 */
.post {
    background-color: #ddd;
    height: 100%;
}

posts-itemの中にpostを作って、postに対して背景や余白をつけると思い通りになります。height: 100%;がないとコンテンツによってカードの高さがバラバラに見えてしまうので入れています。

gapを使っても実装可能！

2021/4/26のSafari / iOS のアップデートで、Flexboxで使用するgapプロパティがSafariでも使えるようになりました。IE対応が必要ない場合はgapプロパティを使っても実装できます。

<div class="posts">
    <article class="posts-item">...</article>
    ...
    <article class="posts-item">...</article>
</div>

.posts {
    display: flex;
    flex-wrap: wrap;
    gap: 40px 24px;
}

.posts-item {
    width: 100%;
}

@media screen and (min-width: 500px) {
    .posts-item {
        width: calc((100% - (24px * 1)) / 2);
    }
}

@media screen and (min-width: 800px) {
    .posts-item {
        width: calc((100% - (24px * 2)) / 3);
    }
}

@media screen and (min-width: 1000px) {
    .posts-item {
        width: calc((100% - (24px * 3)) / 4);
    }
}

これだけです。

他にも関連の記事を上げています！

レイアウトを作るにはFlexboxの理解が必須です。基礎を学びたい方は上の記事をご覧ください。

Flexboxでもレイアウトは作れますが、デザインによってはCSS Gridの方が適している場合もあります。CSS Gridの使い方は上の記事をご覧ください。

特に今回紹介したカード型レイアウトは、CSS Gridの方がスッキリかけます。CSS Gridが使える環境では、CSS Gridを使うことをおすすめします。

この記事のように、知っておくと良い、Flexbox関連のお悩み解決系の記事も多数あげています。

基礎学習を終えて実践的な経験を積みたい方は「模写修行」を！Flexboxの勉強にもなります！

「模写修行」はこんな方におすすめ！

• FlexboxやCSS Gridの実践的な使い方を学びたい
• 基礎学習を終えて実践的な経験を積みたい
• 破綻しない書き方を学びたい(= CSS設計を意識したコーディングを学びたい)
• 実務と同じようにXDのデータを見ながらコーディングの練習をしたい
• 現役で制作をやっている人のコードを見たい

「模写修行」ではデザインデータ(XD) / web上で見れる解説 / サンプルコードを配布しています。ご自身でデザインを見ながらコーディングに挑戦し、解説とサンプルコードで深く学ぶことができるサービスです。