MENU

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

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

マークアップ




  
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 の値はこの場合６等分なので、100/6 = 16.66666666… となるので、小数第６位を四捨五入して、16.66667% となります。５等分だと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本来の機能を利用することもできるので便利だと思います。順番を逆にしたりするのも簡単ですね。