レスポンシブデザインでのcssの書き方のすっきりさせたいです

Question

前提・実現したいこと

現在、WPのニュースサイトのようなものを作成しており、
各記事へ遷移するパネルのコーディングをしております。

【PC】
大パネル：3
小パネル：3

【SP】
大パネル：2
小パネル：4

レスポンシブで上記のような表示の出し分けがしたいです。

流し込みの関係上、大パネルも小パネルも同じulとしております。

そのため、liひとつひとつに連番を振っており、
articleListStyle01,articleListStyle02,articleListStyle03はwidthがどうこう...
SPの時はarticleListStyle01,articleListStyle02だけwidthが...
というように、番号に対してstyleをつけています。

発生している問題

表示の実現はできそうではあるのですが、
cssの記述が長くなってしまい、もっとすっきりした書き方できないかな？と思っています。

下記のように書くしかないでしょうか？

#content .articleList06 > li.articleListStyle01,
#content .articleList06 > li.articleListStyle02,
#content .articleList06 > li.articleListStyle03 {
  width: 33%;
}
#content .articleList06 > li.articleListStyle01 > a,
#content .articleList06 > li.articleListStyle02 > a,
#content .articleList06 > li.articleListStyle03 > a {
  display: initial;
}

#content .articleList06 > li.articleListStyle01 .imgArea img,
#content .articleList06 > li.articleListStyle02 .imgArea img,
#content .articleList06 > li.articleListStyle03 .imgArea img {
  width: initial;
}

.
.
.

Comments

[s8_chu]

CSS Grid Layout は使用しても良いのでしょうか？もし可能であれば、具体的な HTML 構造を質問文に追記していただけませんか？
また、画像ではタイトルがすべて同じテキストになっていますが、どのような順番で配置されますか？

[Lhankor_Mhy]

HTMLを見てみないと何とも言えませんが、
#content .articleList06 > li
までは不要のように感じます。

[kaori_oka]

s8_chuさん、Lhankor_Mhyさん
ご確認ありがとうございます。
途中まで作ってしまったのと、急いでいたので
hatena19さんの提示してくださいったnth-childで解決しました！

Answer 1

すでに flex があったのでグリッドレイアウトで。

ul {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

li:nth-child(n+3) {
  grid-column: 1 / -1;
}

@media (min-width: 768px) {
  ul {
    grid-template-columns: repeat(3, 1fr);
  }

  li:nth-child(3) {
    grid-column: auto;
  }
}

https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Grid_Layout

Answer 2

Flexboxを使うなら、nth-childを使って、下記のような感じでどうでしょうか。

<ul id="content">
  <li>list1</li>
  <li>list2</li>
  <li>list3</li>
  <li>list4</li>
  <li>list5</li>
  <li>list6</li>
</ul>

#content {
  display: flex;
  flex-wrap: wrap;
}
#content li {
  width: 100%;
  border: 1px solid;
  box-sizing: border-box;
}
#content li:nth-child(-n+2) {
  width: 49%;
}
@media screen and (min-width: 600px) { 
 #content li:nth-child(-n+3) {
    width: 32%;
  }
} 

Comments

[kaori_oka]

ありがとうございます、無事解決できました！