グリッドレイアウトのCSS

Bootstrapのグリッドが細かすぎて使いにくい＆ファイルが肥大化するので自分で作ることにした。基本的な構造はBootstrapの真似。
レスポンシブで表示幅が狭くなった時の段組はBootstrapとは異なるものになる。

CSS

/* css grid rayout */
body {
    margin: 0;
    padding: 0;
}

.container {
    position: relative;
    display: block;
    margin: 0 auto;
    max-width: 960px;
    width: 100%;
}

.row {
    display: block;
    box-sizing: border-box;
    margin: auto 0 auto 0;
    width: 100%;
    background-color: #EEF;
}

.row::after {
    display: block;
    visibility: hidden;
    clear: both;
    content: " ";
    line-height: 0;
}

.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12,
.col-3-fix, .col-4-fix, .col-5-fix, .col-7-fix, .col-8-fix, .col-9-fix, .col-10-fix {
    float: left;
    box-sizing: border-box;
}

.col-12 {
    margin: 0 0.5%;
    width: 99%;
}

.col-11, col-11-fix {
    margin: 0 0.5%;
    width: 90.66666%;
}

.col-10, col-10-fix {
    margin: 0 0.5%;
    width: 82.33333%;
}

.col-9, .col-9-fix {
    margin: 0 0.5%;
    width: 73.99999%;
}

.col-8, .col-8-fix {
    margin: 0 0.5%;
    width: 65.66666%;
}

.col-7, .col-7-fix {
    margin: 0 0.5%;
    width: 57.33333%;
}

.col-6 {
    margin: 0 0.5%;
    width: 48.99999%;
}

.col-5, .col-5-fix {
    margin: 0 0.5%;
    width: 40.66666%;
}

.col-4, .col-4-fix {
    margin: 0 0.5%;
    width: 32.33333%;
}

.col-3, .col-3-fix {
    margin: 0 0.5%;
    width: 24%;
}

.col-2 {
    margin: 0 0.5%;
    width: 15.66666%;
}

.col-1 {
    margin: 0 0.5%;
    width: 7.33333%;
}

@media screen and (max-width: 640px) {
    .col-1 {
        width: 32.3333%;
    }
    .col-2 {
        width: 49%;
    }
    .col-3 {
        width: 49%;
    }
    
    .col-4 {
        width: 49%;
    }
    
    .col-5 {
        width: 99%;
    }
    
    .col-7 {
        width: 99%;
    }
    
    .col-8 {
        width: 99%;
    }
    
    .col-9 {
        width: 99%;
    }
    
    .col-10 {
        width: 99%;
    }
    
    .col-11 {
        width: 99%;
    }
}

備考

.container の position: relative;　はこのグリッドレイアウト自体には意味を持たない。内部にpositionプロパティを使う要素がある場合、そのベースとなるために指定しているだけ。

解説

Bootstrapのつくりをまねて作成。
12グリッドレイアウト。
構築の際はクラスrowでcol-*の一群をラップする。
rowについてはBootstrapでも使っているものであるため、Bootstrapとの共用は不可。（たぶん使っても平気だけど。）
640pxを下回ると、col-の数にかかわらず、1～3カラムにカラム数を減らす仕様。
-fixがついているものは、640pxを下回っても比率を変えないもの。2段組の比率を保持することを目的としている。