flex-wrapを使って、縦横3列の構成を綺麗に表示させたい

Question

前提・実現したいこと

表題の通り、skill-conatinerにflex-wrapを機能させて、.html-code,.wordpress-code,.webapp
を3列に繰り越したいのですが、wordpress-codeでうまくいかない

発生している問題・エラーメッセージ

.wordpress-codeで上記の画像のようになる。

試したこと

該当のソースコード

字数制限により、下記により詳細のコードを添付します
恐れ入りますが、ご教授頂けると幸いです。
よろしくお願いいたします。
詳細のコード

追記

現状: display grid;　を使って、横一列に並んだのですが、
余白gapを使っても、余白が作れないです。
原因がどこにあるのか教えていただけると幸いです。

試したことは、wordpress-codeなどの親要素にある「 grid-template-columns: 1fr 1fr 1fr ;」
の3つ目にある1frを消去し、余白を持たせようと試みましたが、
できませんでした。

再度修正したCode(Js-fiddle)

code

Comments

[yambejp]

全体的にぐちゃぐちゃになっているようなので
もう少しかんたんな例から始めたほうが良いと思います

Answer 1

縦横3列の構成という決め打ちであれば、グリッドレイアウトがいいかと思います。
フレックスレイアウトはあくまで1次元レイアウトであるため、行列を固定した構成に向いていません。

この記事で学べること
・ページ全体のレイアウトはGrid Layoutが適してる
・横並びのレイアウトはFlexboxが適してる
・格子状のレイアウトはGrid Layoutが適してる
・テキストが回り込みの指定はFloatが適してる
これからのレイアウトはGrid Layoutで決まり？特徴で使い分けたいCSSレイアウト手法 - ICS MEDIA

Comments

[free_teku]

いつも、ご回答ありがとうございます。
記事を参考にさせていただきました。1今使っているのは
grdi-column-startを使って、それぞれの要素を横に並列に並べることができました。

問題は、それぞれの要素(カード)の大きさ調整です。

これをどうやって変更させたら、レスポンシブ時に
うまく変更しやすいのかが苦戦しています。

追記で質問です。
html-codeやwordpress-code,webappがそれぞれの要素の親要素になっているので、

display: grid;を使って、グリッドアウトを使うようにしました。
しかし、うまくいきません。
追記に、詳細書きましたので、ご回答いただけますでしょうか？

[Lhankor_Mhy]

コードがないと何とも言えなさそうですが、スクリーンショットはオーバーフローしているように見えますね。

[free_teku]

再度、コードを添付いたしました。お手数おかけしますが、ご確認いただけると幸いです。

[Lhankor_Mhy]

やはり、オーバーフローしているようです。

.skills_list[role="list"] {
position: relative;
width: max(26%, 320px);
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

となっていますので、それぞれの幅は 320px となっているはずです。
320*3=960px が最低でも必要なところ、ビューポート幅が足りていないということでしょうね。
スクリーン幅を思い切り大きくとれば重ならないので。