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です!
簡単ですね。みなさんもぜひ試してみてくださいね。