column-countプロパティでずれが生じたときの対応方法

column-countプロパティで段組み設定をしたときに下記のようなずれが生じてしまった経験、ありませんか？

See the Pen
column-count by sayuri (@giraffeweb)
on CodePen.0

そのときの対処法を、備忘録として残しておきます。

ul{
	-webkit-column-count: 2;
	-moz-column-count: 2;
	column-count: 2;
  li{
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      display: inline-block;
      list-style: none;
      padding-bottom: 20px;
      width: 100%;
    }
}

See the Pen
column-count解決策 by sayuri (@giraffeweb)
on CodePen.0

「box-sizing: border-box;」「display: inline-block;」を追加するだけでOKです！
簡単ですね。みなさんもぜひ試してみてくださいね。

Share: