クロムの列カウントの問題

Question

Google Chromeと列数に問題があります。現在、次のCSS部分を使用しています。 Firefoxでは、それが正常に動作しますが、クロムでは、結果がこれです：私は「表示：インラインブロック」を削除した場合

Current Status

：

Without display:inline-block

.grid項目から、それはこのように見えます

私はこれを解決するために数時間をテストしましたが、私はヒントを持っていません。 3つの投稿のみを持つカテゴリがありますが、列数は「4」です。

奇妙な部分は、より多くの投稿（4+）を持つページではうまく動作します。

これを修正する解決策が必要ですか。私は無限の負荷（Jetpack）を介してコンテンツを読み込む際に問題を引き起こす可能性があるので、javascriptやmasonryを使用したくない。

私はあなたが助けることを願っています。前もって感謝します！

.grid { 
-moz-column-count:4; 
-moz-column-gap:2em; 
    column-count:4; 
    column-gap:2em; 
    padding-bottom:2px; 
    -webkit-column-gap:2em; 
    -webkit-column-count:4; 
} 

.grid-item { 
    background-color: #eee; 
    margin-bottom:2em; 
    display:inline-block; 
} 

Answer 1

列ルールは、高さを調整するために要素を分割します。あなたの場合、それは起こった。幸いにも、特定の要素をbreak-inside: avoid;と一緒に保つようブラウザに指示することができます。

現時点では、このプロパティは値autoとavoidを一般に受け入れます。 複数列のレイアウト内の要素にavoidを使用すると、プロパティが分割されないようにすることができます。

.grid-item { 
    -webkit-column-break-inside: avoid; 
    page-break-inside: avoid; 
    break-inside: avoid; 
}