I only update when I feel like it.

tomisan.com

Grid system + table-striped風 + 上下中央

Grid system + table-striped風 + 上下中央

BootstrapのGrid systemを使って、table-stripedな見た目にしつつ
レスポンシブ（768px以上）では横4列、767px以下では横2列にする。
テキストは上下中央に。

●768px以上
grid-system-table-striped-center
●767px以下
grid-system-table-striped-center

●HTMLコード

<div class="row stripe">
    <div class="col-xs-4 col-sm-2">
        <h4>吾輩は猫である</h4>
    </div>
    <div class="col-xs-8 col-sm-4">
        <p>吾輩は猫である。名前はまだ無い。</p>
    </div>
    <div class="col-xs-4 col-sm-2">
        <h4>私の個人主義</h4>
    </div>
    <div class="col-xs-8 col-sm-4">
        <p>ここも今日単にその排斥屋</p>
    </div>
    <div class="col-xs-4 col-sm-2">
        <h4>Beulah Colon</h4>
    </div>
    <div class="col-xs-8 col-sm-4">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
    </div>
    <div class="col-xs-4 col-sm-2">
        <h4>ダミーテキスト</h4>
    </div>
    <div class="col-xs-8 col-sm-4">
        <p>これはダミーですこれはダミーです<br>
        これはダミーですこれはダミーですこれはダミーですこれはダミーですこれはダミーですこれはダミーです</p>
    </div>
    <div class="col-xs-4 col-sm-2">
        <h4>吾輩は猫である</h4>
    </div>
    <div class="col-xs-8 col-sm-4">
        <p>吾輩は猫である。名前はまだ無い。</p>
    </div>
    <div class="col-xs-4 col-sm-2">
        <h4>私の個人主義</h4>
    </div>
    <div class="col-xs-8 col-sm-4">
        <p>これはダミーですこれはダミーですこれはダミーですこれはダミーですこれはダミーです</p>
    </div>
</div>

●CSS

.stripe {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-left: 0;
    margin-right: 0;
}
.stripe div {
    padding: 10px 5px;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}
.stripe h4 {
    font-size: 14px;
    font-weight: 700;
}
.stripe p {
    word-break: break-all;
    margin-bottom: 0;
}
.stripe div:nth-child(4n+1),
.stripe div:nth-child(4n+2) {
    background-color: floralwhite;
}
@media screen and (min-width: 768px) {
    .stripe div:nth-child(4n+1),
    .stripe div:nth-child(4n+2) {
        background-color: transparent;
    }
    .stripe div:nth-child(8n+1),
    .stripe div:nth-child(8n+2),
    .stripe div:nth-child(8n+3),
    .stripe div:nth-child(4n) {
        background-color: floralwhite;
    }
    .stripe div:nth-child(8n) {
        background-color: transparent;
    }
}

●DEMO
Grid system + table-striped風 + 上下中央 DEMO