あるサイトの横並びのボックスをレスポンシブで列の数が変化し縦に並び替えする配置を設定し、その間を設定するCSSのプロパティでgapを選び数値を与えてみました。
例えば6列1行に並んでいるものをスマホでみると2列の3行になるような感じ。
CSSでは以下のような感じに設定してみました。
.box {
display: flex;
flex-wrap: wrap;
justify-content: start;
gap: 20px;
}
しかし、折り返して縦並びになっても20pxの上下の隙間にが生まれませんでした。
不思議と横の隙間は生まれてるんですよね。
でも他サイトを構築したときには上下にも隙間は生まれたし、いろいろと組み合わせによっては発生しないのかな？
一時的にmargin-bottomを設定しようかと思っても5、6番目のものだけmargin-bottomの0を設定するのもめんどいので何とかしたいと思って色々と触ってみました。
すると効果ある出来事がありました。
それは、row-gap のプロパティを設定することでした。
もともとgap ってrow-gapとcolumn-gapを同時に設定できるものだと思うんですが、なぜかこれでは上下に隙間生まれず。
row-gapだけを設定すると隙間ができました！
仕組みは分かりませんが、もしgapで隙間が出来なかった場合は個別設定で確認するのもありかもです！