【CSS】calcを使ってカードリストを作る方法

calcを使ってカードリストを作る方法についてのメモ。

デモサイトはこちら。

【CSS】calcを使ってカードリストを作る方法

HTML

画像とテキストは自由に変えてください。

<!-- カードリスト -->
<div class="box">
    <div class="box__item">
        <img src="./image/1.JPG" alt="">
        <div class="box__text">
            <h2>タイトル</h2>
            <p>文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。</p>
        </div>
    </div>
    <div class="box__item">
        <img src="./image/1.JPG" alt="">
        <div class="box__text">
            <h2>タイトル</h2>
            <p>文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。</p>
        </div>
    </div>
    <div class="box__item">
        <img src="./image/1.JPG" alt="">
        <div class="box__text">
            <h2>タイトル</h2>
            <p>文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。</p>
        </div>
    </div>
    <div class="box__item">
        <img src="./image/1.JPG" alt="">
        <div class="box__text">
            <h2>タイトル</h2>
            <p>文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。</p>
        </div>
    </div>
    <div class="box__item">
        <img src="./image/1.JPG" alt="">
        <div class="box__text">
            <h2>タイトル</h2>
            <p>文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。</p>
        </div>
    </div>
    <div class="box__item">
        <img src="./image/1.JPG" alt="">
        <div class="box__text">
            <h2>タイトル</h2>
            <p>文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。</p>
        </div>
    </div>
    <div class="box__item">
        <img src="./image/1.JPG" alt="">
        <div class="box__text">
            <h2>タイトル</h2>
            <p>文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。</p>
        </div>
    </div>
    <div class="box__item">
        <img src="./image/1.JPG" alt="">
        <div class="box__text">
            <h2>タイトル</h2>
            <p>文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。文章が入ります。</p>
        </div>
    </div>
</div>

CSS

Scssを使っています。

.box {
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    .box__item {
        width: 30%;
        margin: calc(10%/4);
        @include sp {
            width: 100%;
        }
        &:nth-child(3n) {
            margin-right: 0;
            @include sp {
                margin: calc(10%/4);
            }
        }
        &:nth-child(3n+1) {
            margin-left: 0;
            @include sp {
                margin: calc(10%/4);
            }
        }
        .box__text {
            padding: 15px;
            background-color: #efefef;
            h2 {
                font-size: 25px;
                margin-bottom: 20px;
            }
            p {
                font-size: 17px;
                line-height: 1.5;
            }
        }
    }
}

関連記事:

【有益】大学生におすすめの本まとめ20選【2020年最新版】 【ブログ運営報告】大学生がブログを1ヶ月続けた結果【PV数】 【ワクワク！】すごいWEBサイトまとめ16選【2020年版】 【紹介！】僕が大学を1年間休学してやった「8つ」のこと【挑戦】