横並びカードリスト-01

PC・スマホ両方とも横並びでカードタイプのリストで表示するレスポンシブ対応のHTML・CSSコード

3つ並びの場合

出力

• タイトル

  ここにティスクリプション

• タイトル

  ここにティスクリプション

• タイトル

  ここにティスクリプション

• タイトル

  ここにティスクリプション

• タイトル

  ここにティスクリプション

• タイトル

  ここにティスクリプション

HTML

<ul class="tmp_cardlist01 column03">
<li class="list">
<div class="imgbox">
<img src="">
</div>
<div class="textbox">
<p>タイトル</p>
<p>ここにティスクリプション</p>
</div>
</li>

以下リストをループ
・
・
・
</ul>

SCSS

.tmp_cardlist01{
    &.column03{
        display:-webkit-box;display:-ms-flexbox;display: -webkit-flex;display:flex;
        -ms-flex-wrap:wrap;-webkit-flex-wrap:wrap;flex-wrap:wrap;
        .list{margin-left: 2%;background: white;
            @media screen and (min-width:769px){width: calc((100% - 4%)/3);
                &:nth-child(n+4){margin-top: 2%;}
                &:nth-child(3n+1){margin-left: 0;}
            }
            @media screen and (max-width:768px){width: calc((100% - 2%)/2);
                &:nth-child(n+3){margin-top: 2%;}
                &:nth-child(2n+1){margin-left: 0;}
            }
            .imgbox{position: relative; width: 100%; height:auto;overflow: hidden;background: #888;
                &::before{content: ""; display: block; padding-top: 62.5%;}
                img{position:absolute;left: -100%;right: -100%; top:-100%; bottom:-100%;width:100%; height:auto;margin:auto;}
            }
            .textbox{padding: 1rem;}
        }
    }
}

4つ並びの場合

出力

• タイトル

  ここにティスクリプション

• タイトル

  ここにティスクリプション

• タイトル

  ここにティスクリプション

• タイトル

  ここにティスクリプション

• タイトル

  ここにティスクリプション

• タイトル

  ここにティスクリプション

HTML

<ul class="tmp_cardlist01 column04">
<li class="list">
<div class="imgbox">
<img src="">
</div>
<div class="textbox">
<p>タイトル</p>
<p>ここにティスクリプション</p>
</div>
</li>

以下リストをループ
・
・
・
</ul>

SCSS

.tmp_cardlist01{
    &.column04{
        display:-webkit-box;display:-ms-flexbox;display: -webkit-flex;display:flex;
        -ms-flex-wrap:wrap;-webkit-flex-wrap:wrap;flex-wrap:wrap;
        .list{margin-left: 2%;background: white;
            @media screen and (min-width:769px){width: calc((100% - 6%)/4);
                &:nth-child(n+5){margin-top: 2%;}
                &:nth-child(4n+1){margin-left: 0;}
            }
            @media screen and (max-width:768px){width: calc((100% - 2%)/2);
                &:nth-child(n+3){margin-top: 2%;}
                &:nth-child(2n+1){margin-left: 0;}
            }
            .imgbox{position: relative; width: 100%; height:auto;overflow: hidden;background: #888;
                &::before{content: ""; display: block; padding-top: 62.5%;}
                img{position:absolute;left: -100%;right: -100%; top:-100%; bottom:-100%;width:100%; height:auto;margin:auto;}
            }
            .textbox{padding: 1rem;}
        }
    }
}