開発ブログ

WWWクリエイターズが送る、Git、CSS、HTML、コマンドライン、Macの便利機能など、開発に関する役立ち情報発信します。気まぐれに更新。

CSS、Floatを使ってグリッドレイアウトを実現する

最終更新:2017-05-07 by Joe

CSSでグリッド(碁盤目)レイアウトを実現する方法です。

Floatを使ったグリッドレイアウト

元祖です。Twitter社がBootstrapというサイト開発用で用いられていました。

ポイントはグリッドの個々のアイテムを下降コンテナにマイナスのマージンを含める点です。

グリッドレイアウト:HTML

<div class="grid-container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

グリッドレイアウト:CSS

.grid-container{
  margim-right:-1%;
  margim-left:-1%;
  overflow:hidden;
  width:auto;
}
.grid-container > .item{
  float:left;
  margin:30px 1%
  width:48%;
  height:100px
}

グリッドレイアウト亜種:CSS

上記は2カラムですが、3カラム、4カラム、亜種の作成が容易です。HTMLにクラスを追加する形で、上書きできます。CSSの優先度は「Specificity(どのくらい限定的か)」にもとづきます。

複合クラスでスタイルが指定されれば、一つのクラスによるスタイル指定を上書きできます。

<style>
.grid-container.column-3 > .item{
   width:31.3333%;
}

.grid-container.column-4 > .item{
  width:23%;
}
.grid-container.column-5 > .item{
  width:18%;
}
</style>

 

以上、CSSのグリッドレイアウトについてでした。

 

閉じる