カードレイアウトの横幅のcalc 計算で 余白を引いてさらに割る理由について

Question

CSSのカード要素にについて勉強しています。

カードレイアウト勉強記事
» 忍者CODE あなたのコードが未来を灯す

上記のサイトのような場合だと、

<section>
        <ul class="card-wrap">
            <li class="card">
                <h2 class="card__title">カードのタイトル</h2>
                <div class="card__img"></div>
                <div class="card__text">
                    <p>カードのテキストが入ります</p>
                    <p>カードのテキストが入ります</p>
                    <p>カードのテキストが入ります</p>
                    <p>カードのテキストが入ります</p>
                </div>
            </li>
            <li class="card">
                <h2 class="card__title">カードのタイトル</h2>
                <div class="card__img"></div>
                <div class="card__text">
                    <p>カードのテキストが入ります</p>
                    <p>カードのテキストが入ります</p>
                    <p>カードのテキストが入ります</p>
                    <p>カードのテキストが入ります</p>
                </div>
            </li>
            <li class="card">
                <h2 class="card__title">カードのタイトル</h2>
                <div class="card__img"></div>
                <div class="card__text">
                    <p>カードのテキストが入ります</p>
                    <p>カードのテキストが入ります</p>
                    <p>カードのテキストが入ります</p>
                    <p>カードのテキストが入ります</p>
                </div>
            </li>
            <li class="card">
                <h2 class="card__title">カードのタイトル</h2>
                <div class="card__img"></div>
                <div class="card__text">
                    <p>カードのテキストが入ります</p>
                    <p>カードのテキストが入ります</p>
                    <p>カードのテキストが入ります</p>
                    <p>カードのテキストが入ります</p>
                </div>
            </li>
            <li class="card">
                <h2 class="card__title">カードのタイトル</h2>
                <div class="card__img"></div>
                <div class="card__text">
                    <p>カードのテキストが入ります</p>
                    <p>カードのテキストが入ります</p>
                    <p>カードのテキストが入ります</p>
                    <p>カードのテキストが入ります</p>
                </div>
            </li>
            <li class="card">
                <h2 class="card__title">カードのタイトル</h2>
                <div class="card__img"></div>
                <div class="card__text">
                    <p>カードのテキストが入ります</p>
                    <p>カードのテキストが入ります</p>
                    <p>カードのテキストが入ります</p>
                    <p>カードのテキストが入ります</p>
                </div>
            </li>
            <li class="card">
                <h2 class="card__title">カードのタイトル</h2>
                <div class="card__img"></div>
                <div class="card__text">
                    <p>カードのテキストが入ります</p>
                    <p>カードのテキストが入ります</p>
                    <p>カードのテキストが入ります</p>
                    <p>カードのテキストが入ります</p>
                </div>
            </li>
            <li class="card">
                <h2 class="card__title">カードのタイトル</h2>
                <div class="card__img"></div>
                <div class="card__text">
                    <p>カードのテキストが入ります</p>
                    <p>カードのテキストが入ります</p>
                    <p>カードのテキストが入ります</p>
                    <p>カードのテキストが入ります</p>
                </div>
            </li>
            <li class="card dammy"></li>
            <li class="card dammy"></li>
            <li class="card dammy"></li>
        </ul>
    </section>

ul,li {
  list-style: none;
}
.card-wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.card {
    border: 1px solid;
    margin-right: 8px;
    margin-bottom: 16px;
    width: calc((100% / 3) - 8px);
}
.card.dammy {
    border: none;
}
.card:nth-child(3n) {
    margin-right: 0;
}
.card__title {
    font-weight: bold;
    font-size: 16px;
    padding: 8px;
}
.card__text {
    padding: 8px;
    font-size: 12px;
}
.card__img {
    width: 100%;
    height: 100px;
    background-color: #0e6edf;
}

box の右側に8px ずつとっているから、全体を3で割った数に　8px 引くのはわかるのですが、

【HTML＆CSS】カード型レイアウト（モジュール）のコーディング方法 | PENGIN BLOG

上記サイトの場合、

<ul class="bl_flexContainer">
    <li class="el_flexItem"></li>
    <li class="el_flexItem"></li>
    <li class="el_flexItem"></li>
    <li class="el_flexItem"></li>
    <li class="el_flexItem"></li>
</ul>

.bl_flexContainer {
	display: flex;
	flex-wrap: wrap;
	padding: 20px;
}
.el_flexItem {
	width: calc(100% / 3 - 40px / 3);
	height: 300px;
	margin-right: 20px;
	margin-bottom: 30px;
	background-color: royalblue;
}

余白を引いて　さらに3で割っています。

何故3で割る必要があるのでしょうか？

Answer 1

画面の横幅を埋めるように１列にボックスが３つ並んでいて、
ボックス同士の隙間が20pxずつあるため、

(ボックスの幅 * 3) + (20px * 2) = 100%

となり、この式を変形すると

(ボックスの幅 * 3) + 40px = 100%
(ボックスの幅 * 3) = 100% - 40px
(ボックスの幅 * 3) / 3 = (100% - 40px) / 3
ボックスの幅 = (100% - 40px) / 3
ボックスの幅 = (100% / 3) - (40px / 3)

ということになります。

Comments

[niconic73027793]

わかりやすい　計算式ありがとうございます。
calc(100% / 3 - 40px / 3)　と　(100% - 40px) / 3　は同じということですね。

[niconic73027793]

でも

https://ninjacode.work/course/HTML_CSS/2/5
上記のケースの場合、
.card {
border: 1px solid;
margin-right: 8px;
margin-bottom: 16px;
width: calc((100% / 3) - 8px);
}
隙間が8px ずつあるのに

width: calc((100% /3) - (16px /3));
計算すると　表示があわないですね。

[KAOsaka]

その場合border6本の幅も計算に入れる必要があります。

[niconic73027793]

width: calc((100% / 3) - 22px);
width: calc((100% / 3) - (22px / 3));
余白6本も入れると上記になるわけですね。