２カラム、3カラムのレイアウト崩れの原因がわかりません

Question

忍者コード中級　02の問題です

下記のコードで2カラム、３カラムを達成できます。
CSS最終行の
.column .column__cat:last-child {
margin-right: 0;
}
をコメントアウトするとレイアウトが崩れてしまいます。
boxの幅を
width: calc((100% / 3) - 8px);
このようにcalcで指定しているので、レイアウトが崩れないと思ったのですが
なぜ一番右のボックスの右側marginを無くすととレイアウトが崩れてしまうのでしょうか。
理屈がわかりません。よろしくお願いします。

<section class="wrapper">
  <section class="column column--two">
    <div class="column__cat"></div>
    <div class="column__cat"></div>
  </section>
  <section class="column column--three">
    <div class="column__cat"></div>
    <div class="column__cat"></div>
    <div class="column__cat"></div>
  </section>
</section>

.wrapper {
    width: 300px;
    margin: auto;
}
.column{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 24px;
}
.column--two .column__cat {
    width: calc(50% - 8px);
}
.column--three .column__cat {
    width: calc((100% / 3) - 8px);
}
.column__cat {
    width: 100px;
    height: 100px;
    border: 1px solid;
    background: red;
    box-shadow: 10px 10px 15px -10px;
}
.column .column__cat {
    margin-right: 8px;
}
.column .column__cat:last-child {
    margin-right: 0;
}

Answer 1

こんにちは。

なぜ一番右のボックスの右側marginを無くすととレイアウトが崩れてしまうのでしょうか。

理屈がわかりません。

2カラムの方について、
最後のmargin-right:0ありの場合、
1+142+1+8+1+142+1=296px　（1はボーダーです）
となりますが、
最後のmargin-right:0なしの場合、
1+142+1+8+1+142+1+8=304px
となりますので、溢れます。

3カラムについても同様です。

---

参考：
box-sizing - CSS: カスケーディングスタイルシート | MDN

Comments

[daisuke01]

pxの計算までありがとうございます。borderの考慮が甘かったことに反省しています。明快なご指摘ありがとうございました。今後ともよろしくお願いします。

Answer 2

boxの幅を

width: calc((100% / 3) - 8px);
このようにcalcで指定しているので、レイアウトが崩れないと思ったのですが

border の幅を考慮する必要があります。border: 1px solid;としてますので左右で2pxになりますので、
width: calc((100% / 3) - 10px);
で3列になります。

あるいは、幅の計算法を border を含めるようにする指定してもいいでしょうか。
box-sizing: border-box;

---

flexを使うなら、要素間の余白はmarginは使わずに、
justify-content: space-between; で両端揃えにするか、
gapで指定したほうが簡単でしょう。(gapはie非対応)

Comments

[daisuke01]

ありがとうございます。とてもわかりやすかったです。また、別の解決方法の提示も感謝しています。プログラミング頑張ります。

Answer 3

box-sizingプロパティの初期値がcontent-boxになっているため
実際のwidthは両側のborder幅(2px)を加えた値になっていることが理由かと。

例えば

.column__cat {
    box-sizing: border-box;
}

を追加すればレイアウトは崩れないと思いますが
last-childにもmarginが適用されているので少し左寄りになります。

参考にして下さい。

Comments

[daisuke01]

ありがとうございます。borderはうっかりしていました。今後ともよろしくお願いします。。