グリッドレイアウトを構築するCSS

HTML/CSS

シンプルにグリッドレイアウトを構築するためのCSSです。

構造

グリッド全体を囲む「container」、グリッドの行(横並び部分)を囲む「row」、グリッドの個々の部分である「col(カラム)」で分かれています。カラム部分には幅を指定するためのクラスを付加します。ガターが必要な場合はガター幅を指定したクラスも加えます。

カラム部分は「border-box」にしておくと、カラム幅の計算やガター幅の指定が楽になります。

ガター幅は「padding」もしくは「border」で指定します。

注意点

ガターの色をカラム部分と変える場合はガターを「border」で指定してボーダー色を変更するのが簡単です。

ただし「border」の幅はパーセント指定ができないので、そのままだと画面サイズに合わせて幅を変化させることができません。可変にしたい場合はメディアクエリを細かく入れて対応するか、カラム内に入れ子のdivなどを配置して「background-color」を設定すると良いと思います。

CSS

.container {
    overflow: hidden; /* ネガティブマージンではみ出た部分を非表示にする */
    width: 80%;
    max-width: 960px;
    margin: auto;
}
.row {
    overflow: hidden; /* clearfix */
    margin: 0 -2% 0; /* 端にあるガターを埋める */
}
.col {
    box-sizing: border-box;
}
.col__gutter {
    padding-right: 2%;
    padding-left: 2%;
    /* borderで指定する場合 */
    /* border-right: solid 20px transparent; */
    /* border-left: solid 20px transparent; */
}
@media only screen and (min-width: 600px) {
    .col { float: left; }
    /* 6カラムの場合 */
    .grid-01 { width: 16.666666%; }
    .grid-02 { width: 33.333333%; }
    .grid-03 { width: 50%; }
    .grid-04 { width: 66.666666%; }
    .grid-05 { width: 83.333333%; }
    .grid-06 { width: 100%; }
}

Demo

See the Pen gagroa by pepo (@pepoblog) on CodePen.

コメント