横並びカードリスト-02

PCの場合は横並びカードリストで表示し、スマホの場合は縦並びリストで表示するレスポンシブレイアウト対応のHTML・CSSコード

3つ並びの場合

出力

• タイトル

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

• タイトル

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

• タイトル

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

• タイトル

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

• タイトル

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

• タイトル

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

HTML

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

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

SCSS

.tmp_cardlist02{
    &.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: 100%;
                display:-webkit-box;display:-ms-flexbox;display: -webkit-flex;display:flex;
                &:nth-child(n+2){margin-top: 2%;}
            }
            .imgbox{position: relative;height:auto;overflow: hidden;background: #888;
                @media screen and (min-width:769px){width: 100%;}
                @media screen and (max-width:768px){width: 40%;}
                &::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;
                @media screen and (max-width:768px){-webkit-box-flex:1.0;-ms-flex:1;flex:1;}
            }
        }
    }
}

4つ並びの場合

出力

• タイトル

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

• タイトル

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

• タイトル

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

• タイトル

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

• タイトル

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

• タイトル

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

HTML

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

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

SCSS

.tmp_cardlist02{
    &.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: 100%;
                display:-webkit-box;display:-ms-flexbox;display: -webkit-flex;display:flex;
                &:nth-child(n+2){margin-top: 2%;}
            }
            .imgbox{position: relative;height:auto;overflow: hidden;background: #888;
                @media screen and (min-width:769px){width: 100%;}
                @media screen and (max-width:768px){width: 40%;}
                &::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;
                @media screen and (max-width:768px){-webkit-box-flex:1.0;-ms-flex:1;flex:1;}
            }
        }
    }
}