ｈｔｍｌの横並びに関して。

横並びのCSSを作りたいのですが、
一行目は二つの横並び。
二行目は三つの横並び。

という感じで、行によって横並びの数は変わるのですが、CSSは一つで対応ってできますでしょうか？

一つ一つの間は（5%）くらい空け、端も5%くらいの余白を設けたく、
余白の大きさは統一です。
だからそれに合わせ大きさが自動で変わるようなCSSを作れないかな、と考えているのですが。。。
またレスポです。

thyda.eiqau

2020/06/22 08:52

何をもって「CSSは一つ」とするか、定義をご提示ください。1ファイルに複数のルールを書いてよいなら当然可能です。あと、現状のHTMLおよびCSSと、期待するイメージ図をご提示ください。

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

回答2件

グリッドレイアウトを使ってはいかがですか。

サンプル

html
1<section>
2  <div>
3  1
4  </div>
5  <div>
6  2
7  </div>
8  <div>
9  3
10  </div>
11  <div>
12  4
13  </div>
14  <div>
15  5
16  </div>
17</section>

css
1section{
2  display: grid;
3  grid-template-columns: repeat( 6, 10%  );
4  justify-content: space-evenly;
5}
6
7div{
8  grid-column:  span 2 / span 2;
9}
10div:nth-child(-n+2){
11  grid-column: span 3 / span 3;
12}