思い通りのレイアウトにならない

・起きている問題
思い通りのレイアウトにならない

・問題の詳細
添付しているコードにて、1枚目の画像のレイアウトにしたいのですが、2枚目の画像のレイアウトになってしまいます。右側の余白が思うようにならないです。

・考えられる問題
テキスト幅と画像幅がずれているのでそこの指定が良くないのか？
card-itemの中にcard-item-innerクラスを新しくつけて、画像幅をcard-item-innerのmax-widthに指定すればできるとは思ったのですが、もっといい指定の仕方があるのでは？と思ったのですがどうなのでしょうか？？

該当箇所と思われるHTMLとCSSを添付致します。
もしそこだけで判断できないということでしたらお知らせください。

お手数ですが、ご回答よろしくお願い致します。

HTML
1<section class="card-section">
2  <div class="card-inner inner">
3    <h2 class="section-title">Card</h2>
4    <div class="card-items">
5      <div class="card-item">
6        <a href="#" class="media">
7          <img src="./img/card-img.svg">
8          <div class="media-body">
9            <p class="media-title">
10              タイトルタイトル
11            </p>
12            <p class="media-text">
13              テキストテキストテキストテキストテキストテキストテキストテキストテキスト
14            </p>
15          </div>
16        </a>
17      </div>
18      <div class="card-item">
19        <a href="#" class="media">
20          <img src="./img/card-img.svg">
21          <div class="media-body">
22            <p class="media-title">
23              タイトルタイトル
24            </p>
25            <p class="media-text">
26              テキストテキストテキストテキストテキストテキストテキストテキストテキスト
27            </p>
28          </div>
29        </a>
30      </div>
31      <div class="card-item">
32        <a href="#" class="media">
33          <img src="./img/card-img.svg">
34          <div class="media-body">
35            <p class="media-title">
36              タイトルタイトル
37            </p>
38            <p class="media-text">
39              テキストテキストテキストテキストテキストテキストテキストテキストテキスト
40            </p>
41          </div>
42        </a>
43      </div>
44      <div class="card-item">
45        <a href="#" class="media">
46          <img src="./img/card-img.svg">
47          <div class="media-body">
48            <p class="media-title">
49              タイトルタイトル
50            </p>
51            <p class="media-text">
52              テキストテキストテキストテキストテキストテキストテキストテキストテキスト
53            </p>
54          </div>
55        </a>
56      </div>
57      <div class="card-item">
58        <a href="#" class="media">
59          <img src="./img/card-img.svg">
60          <div class="media-body">
61            <p class="media-title">
62              タイトルタイトル
63            </p>
64            <p class="media-text">
65              テキストテキストテキストテキストテキストテキストテキストテキストテキスト
66            </p>
67          </div>
68        </a>
69      </div>
70      <div class="card-item">
71        <a href="#" class="media">
72          <img src="./img/card-img.svg">
73          <div class="media-body">
74            <p class="media-title">
75              タイトルタイトル
76            </p>
77            <p class="media-text">
78              テキストテキストテキストテキストテキストテキストテキストテキストテキスト
79            </p>
80          </div>
81        </a>
82      </div>
83    </div>
84  </div>
85</section>
86

Sass
1
2.card-section {
3  background: #efefef;
4}
5
6.card-items {
7  display: flex;
8  flex-wrap: wrap;
9  margin-top: 56px;
10}
11
12.card-item {
13	width: calc(33.33333333% - 24px * 2 / 3);
14	margin-right: 24px;
15    margin-top: 24px;
16  
17  &:nth-child(3n) {
18    margin-right: 0;
19  }
20}
21
22

行動規範の内容に同意します

回答2件

まず、見本においてはカードの一覧が中央に寄っているので、それを囲う親要素を中央寄せする必要があります。
ここではcard-innerあるいはinnerの横幅を適当に設定して中央に配置します。

次に、card-itemの横幅を30%程にすることで、親要素の中に余白を残して３個ずつ横に並ぶようになります。
親要素の中で均等に配置する必要がありますから、card-itemsにjustify-content: space-betweenを指定することで実現できます。
なお、次の行からは上に間隔を開けて配置する必要がありますから、４個目以降のcard-itemに対してmargin-topを指定する必要があります。

card-itemにおいては内部の枠に余白が必要だと思うので、box-sizing: border-boxの状態で適当にpaddingを指定して下さい。
中の画像についてはwidth: 100%にして親要素を超えないようにします。
文章に関しては、長くなっても親要素の余白まで達したら折り返して表示されるようになります。

また、HTML5においてはセマンティックなマークアップが推奨されているので、なるべくdivタグに頼らず、文書構造として意味の通るタグを選ぶべきです。
例えば、カードの一覧はulを用いることで一覧であることを明示できます。
また、カードの内部のタイトルにおいてはh3あたりを用いると良いと思います。

投稿2020/08/18 15:00