カード型レイアウト、3行にするとレイアウトが崩れてしまいます

Question

カード型のレイアウトの勉強をしています。

【コーディングの解説】HTMLとCSSでカードグループをつくる

上記のサイトをみてやっていくと

2行のレイアウトは

<div class="card-group">
<div class="card">
	
			
<div class="card__imgframe">

</div><!-- /.card__imgframe -->
<div class="card__textbox">
	<div class="card__titletext">
 タイトルが入ります。タイトルが入ります。タイトルが入ります。
	</div><!-- /.card__titletext -->
	<div class="card__overviewtext">
		概要が入ります。概要が入ります。概要が入ります。概要が入ります。
	</div><!-- /.card__overviewtext -->
</div><!-- /.card__textbox -->


</div><!-- /.card --> 
<div class="card">
	
			
<div class="card__imgframe">

</div><!-- /.card__imgframe -->
<div class="card__textbox">
	<div class="card__titletext">
 タイトルが入ります。タイトルが入ります。タイトルが入ります。
	</div><!-- /.card__titletext -->
	<div class="card__overviewtext">
		概要が入ります。概要が入ります。概要が入ります。概要が入ります。
	</div><!-- /.card__overviewtext -->
</div><!-- /.card__textbox -->


</div><!-- /.card --> 
<div class="card">
	
			
<div class="card__imgframe">

</div><!-- /.card__imgframe -->
<div class="card__textbox">
	<div class="card__titletext">
 タイトルが入ります。タイトルが入ります。タイトルが入ります。
	</div><!-- /.card__titletext -->
	<div class="card__overviewtext">
		概要が入ります。概要が入ります。概要が入ります。概要が入ります。
	</div><!-- /.card__overviewtext -->
</div><!-- /.card__textbox -->


</div><!-- /.card --> 
<div class="card">
	
			
<div class="card__imgframe">

</div><!-- /.card__imgframe -->
<div class="card__textbox">
	<div class="card__titletext">
 タイトルが入ります。タイトルが入ります。タイトルが入ります。
	</div><!-- /.card__titletext -->
	<div class="card__overviewtext">
		概要が入ります。概要が入ります。概要が入ります。概要が入ります。
	</div><!-- /.card__overviewtext -->
</div><!-- /.card__textbox -->


</div><!-- /.card --> 
</div><!-- /.cardgroup -->

.card-group{
  margin-left: auto;
  margin-right: auto;
  max-width: 640px;
  width: 90%;
  height: auto;
   /* ポイント１ */
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
}
/* ポイント２ */
.card-group > :nth-child(2n){
  margin-left: 20px;
}
/* ポイント３ */
.card-group > :nth-child(n+3){
  margin-top: 20px;
}
.card{
  /* ポイント４ */
  width: calc((100% - 20px * 1) /2);
  height: auto;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0,0,0,.2)
}
.card__imgframe{
  width: 100%;
  height: auto;
  padding-top: 56.25%;
  background: #bbb;
  box-sizing: border-box;
}
.card__textbox{
  width: 100%;
  height: auto;
  padding: 20px 18px;
  background: #fff;
  box-sizing: border-box;
}
.card__textbox >*+*{
  margin-top: 10px;
}
.card__titletext{
  font-size: 20px;
  font-weight: bold;
  line-height: 125%;
}
.card__overviewtext{
  font-size: 12px;
  line-height: 150%;
}

サイトの説明通りうまくいくのですが、

.card-group > :not(:nth-child(3n-2)){
  margin-left: 20px;
}  
■カードレイアウトの始め以外に余白を空ける指定
否定セレクタ（:not）と１行目の要素（3n-2）の組み合わせで最初の行以外の要素を選択

.card{
  width: calc((100% - 20px * 2) / 3);
}
■余白の数を3で割る

の指定をすると、

記述の仕方がまちがっているのでしょうか？

コードペンURL

Answer 1

下記の修正でどうでしょう。

/* ポイント２ */
.card-group > :nth-child(3n - 1){
  margin: 0 20px;
}
/* ポイント３ */
.card-group > :nth-child(n+4){
  margin-top: 20px;
}

やっていることは、
ポイント２ (3n - 1)番目の要素(２列目の要素)の左右にマージン
ポイント３ 4番目以降の要素の上にマージン

IE対応を考慮しなくてもいいのなら、gapプロパティを使うのが簡単です。
親に設定するだけで、ポイント２ポイント３の設定は不要です。

.card-group{
  margin-left: auto;
  margin-right: auto;
  max-width: 640px;
  width: 90%;
  height: auto;
   /* ポイント１ */
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 20px; /* 追加 */
}

Comments

[niconic73027793]

ありがとうございます！
そういう記述の方法もあったんですね。

4行目だと　n+4 にする設定はサイトには載ってませんでした。
gap を使った指定は楽ですね！