フレックスボックスが効かない理由を教えてくださいませ

Question

wordpressでこちらのテーマを使っております。
DEMO「http://themecountry.com/demo/?theme=Pingraphy」
DL「https://ja.wordpress.org/themes/pingraphy」

やりたいことは、カードの横幅を50%ずつにすることです。

しかし、
.item{
width:50%
}
を書いても、なぜかカードの横幅がこの画像のように被ってしまうのです。

カードの親要素のmasonlyというclassにフレックスボックスを書いてみたらどうかなと思ったのですが、さっぱり効果がありません。
.masonly {
display: flex;
flex-wrap: wrap;
}

リストじゃなきゃフレックスボックスって使えないのかな？と思って、masonryをdivじゃなくてulにしたり、itemをarticleじゃなくてliにしても、やっぱりダメでした。

どうすればカードが被らずに50%にできそうでしょうか？
ひょっとしてこれってCSSじゃ無理ですか？

Answer 1

気付いていらっしゃると思いますが、ご使用のテーマは、Masonry という JavaScript のライブラリが使用されています。

http://masonry.desandro.com/

Masonry は、可変グリッドレイアウトを動的に生成するライブラリの大御所というところです。動的にグリッドを生成しているので、デベロッパーツールで単純に Div の width を変更しても思い通りにはいきません。まずは、Masonry のドキュメントを読んでいただき、Masonry の使用方法と仕様を把握し、その後、Pingraphy ではどのように実装されているのかを把握されるとよいと思います。

ざっと Pingraphy の JavaScript をみた感じですと、結構面倒臭そうです（笑）

余談ですが、http://themecountry.com/demo/?theme=Pingraphy のデモは、iFrame で表示されているので、単純にブラウザーのソース表示ですと、見たいソースにたどり着けません。なので http://demo.themecountry.com/pingraphy/ にアクセスすることをオススメします。