MENU

CSSで均等配置・等間隔でガター幅を指定できるグリッドレイアウトを作る

レスポンシブデザインが主流となった今、グリッドレイアウトは見慣れていると思います。タイルやカードデザインなどでは、グリッドレイアウトがよく使われます。今回は、等間隔でしかもガター幅を指定できる方法を2種類紹介したいと思います。

マークアップ


1
2
3
4
5
6
7
8
9
10
11
12

.list.list-itemレイアウト用の要素なので、コンテンツはその中身の div 要素内に書いていきます。

floatを使う方法

1
2
3
4
5
6
7
8
9
10
11
12

.list 
{
  margin: 0 -12px -12px 0;  /* ガター分だけネガティブマージン */
}

/* clearfix */
.list:before, .list:after 
{
  display: table;
  content: '';
}
.list:after 
{
  clear: both;
}

.list-item 
{
  float: left;
  -webkit-box-sizing: border-box;  /* Chrome  */
  -moz-box-sizing: border-box;     /* Firefox */
  box-sizing: border-box;
  width: 16.66667%;
  padding: 0 12px 12px 0;  /* ガター */
}
.list-item > div 
{
  color: #fff;
  line-height: 4;
  text-align: center;
  background-color: #bd452d;
}

デモではガターを 12px にしています。ネガティブマージンborder-box を使い等間隔になるようにしています。width の値はこの場合6等分なので、100/6 = 16.66666666… となるので、小数第6位を四捨五入して、16.66667% となります。5等分だと20%とキリのいい数字になりますが、そうでない場合は小数点以下も記述しましょう。

flexboxを使う方法

1
2
3
4
5
6
7
8
9
10
11
12

.list 
{
  display: -ms-flexbox;     /* IE10    */
  display: -webkit-box;     /* Android */
  display: -webkit-flex;    /* Safari  */
  display: flex;
  -ms-flex-wrap: wrap;      /* IE10    */
  -webkit-flex-wrap: wrap;  /* Safari  */
  flex-wrap: wrap;
  margin: 0 -12px -12px 0;  /* ガター分だけネガティブマージン */
}
.list-item 
{
  -webkit-box-sizing: border-box;  /* Chrome  */
  -moz-box-sizing: border-box;     /* Firefox */
  box-sizing: border-box;
  width: 16.66667%;
  padding: 0 12px 12px 0;  /* ガター */
}
.list-item > div 
{
  color: #fff;
  line-height: 4;
  text-align: center;
  background-color: #bd452d;
}

floatと比べるとベンダープレフィックスがたくさんあります。ガターの仕組みはfloatの方法と変わりません。ただ、こちらはflexbox本来の機能を利用することもできるので便利だと思います。順番を逆にしたりするのも簡単ですね。