[CSS] wrap 、左寄せ、 margin:auto のスタイルを作りたい。

前提・実現したいこと

CSSでのスタイリングでつまずいているので、Helpをお願いしたいです。
[wrapできる要素] [margin: 0 auto] [左寄せ][中の要素width変動]
を同時に持つレスポンシブコーディングが必要とされている場面で
どう対処したらいいか、分かる方がいらっしゃいましたら教えていただければと思います。

現在のDOMは以下です。

slim
1.container
2  .inner
3    .contents
4    .contents
5    .contents

試したこととしては、
flexboxを全部試したのと（幅変動、margin: autoがうまくいかない）
外側をinlineにしてmargin: autoやtext-align： centerにする、その中の要素にtext-align： leftさせる（幅変動、margin: autoは可能でしたが、中の要素の配列がセンターよせになってしまう）
JSで空の要素で詰め物をする設定をする（１列になったときに詰め物を取る方法がわからない）
考え方からDOMまでいいアイデアがある方がいらっしゃいましたら、アイデアをお願いしたいです。

takopo

2020/10/06 19:09

wrap とは flex:wrap のことでしょうか？ box もしくは包括する要素にサイズは指定されてますか？縮小とはウィンドウサイズのことですか？現時点でできているところまででいいので、問題が再現できるコードを載せていただいた方が回答を得られやすいと思います。

m.ts10806

2020/10/06 23:06

作業依頼に近しい内容になっているので、自身がまず思うようにやってみてください。

sunnyirie

2020/10/07 00:55 編集

wrapはflex:wrapだけではなく、折り返しができる要素として書かせていただきました。梱包する要素は変動できるようにして、中のcontents要素は固定幅にするようにしたいのですが、可能でしょうか？縮小、拡大はwindowサイズです。windowサイズを変えても、中の梱包している要素の幅が変動して、margin :autoになっていて、contents要素を左寄せにする方法が見つからないのです、時間はかなりかけて方法を探しているのですが、どれもあと一歩のところで思うようなスタイルになってくれないです。 Webでも検索したのですが、自分の望んでる記事にも辿り着けずでもし、同じくこのようなスタイルを突破した方がいらっしゃれば、教えて欲しいと思いました。

hatena19

2020/10/07 01:52

いろいろ試したのなら、その中で一番希望に近いもののCSSを提示してださい。 contents要素は固定幅とか、縮小、拡大はwindowサイズとか言葉説明されても、実際どのように設定したのか、回答者が推測して回答するのでは手間です。推測が外れたら無駄になりますし。あと、slimコードはコンパイル済みのHTMLを提示したほうが回答が付きやすいですよ。

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

回答2件

情報不足でよく分からないですが、不足している部分は推測してやりたいことは下記のようなことでしょうか。

html
1<div class="container">
2  <div class="inner">
3    <div class="contents">1</div>
4    <div class="contents">2</div>
5    <div class="contents">3</div>
6    <div class="contents">4</div>
7    <div class="contents">5</div>
8  </div>
9</div>

css
1.container {
2  max-width: 1000px;
3  margin: 0 auto;  
4}
5
6.inner {
7  display: grid;
8  grid-template-columns: repeat(auto-fit,200px);
9  grid-template-rows: auto;
10  justify-content: center;
11  gap: 10px;
12  border: 1px solid;
13}
14
15.contents {
16  height: 100px;
17  background-color : aqua;
18}