100日チャレンジ23日目🐯

デイトラ中級Day13.14

今日はカードのコーディングとperfectpixelの使い方

.card__items {
display: flex;
flex-wrap: wrap;
}
.card__item:not(:nth-child(3n + 1)) {
width: calc(33.3% - 24px * 2 / 3);
margin-left: 24px;
}
100%の幅をピッタリ３等分して33.33333333%余白24pxが2つなので「-24px * 2」 （-48px）余白の分をそれぞれのカード幅から引きたいので、カード数で割って「-24px * 2 / 3」（-48px / 3 = -16px）1枚あたり(33.33333333% - 24px * 2 / 3)の幅のカードが3つ並ぶとピッタリ横幅100%になる

（100% / カード枚数 - 余白の幅 * 余白の数 / カード枚数 )

余白の取り方や計算の仕方が難しいけどそれが楽しい

perfectpixelで元の画像とのズレが見えると違いがわかる

わかるとGoogleの検証でズレを治していく
完璧なコードを書けるよに頑張ろう

#デイトラ
#１００日チャレンジ