grid or flexを使って、横3列を2列にしたい

前提・実現したいこと

標題をしたいのですが、レスポンシブ時に、毎回、カードの大きさを調整している現状があります。
大きさを変えずに(コードを書くもじ)を減らしたい

試したこと

containerのmax-widthをgoogle ツールで確認しながら調整していましたが、こんなにめんどくさい書き方は
あまりよろしくないと判断し、ほかのアイデアがないかと思い、質問しました。

回転させた状態にはしたいと感じています。
レスポンシブ時(特にスマホ時)は縦長はUI目線でさけたいです。、

該当のソースコード

HTML
1<!DOCTYPE html>
2<html>
3<head>
4	<title></title>
5     <link rel="stylesheet" href="/asset/css/destyle.css">
6 <link rel="stylesheet" href="/asset/css/style.css">
7</head>
8<body>
9	<div class="skills-inner">
10		<h2 class="skills-tt ttl-adjust">Skills</h2><!-- /.about-ttl -->
11		<div class="skills-container">
12			<ul class="skills_list" role="list">
13				<li class="skills_item pc-skills pc-skills_front passive">
14					<h3 class="pc-skills_ttl">H</h3><!-- /.pc-skills_ttl -->
15					<div class="pc-skills_img"><img alt="" src="./asserts/img/skills/html.png"></div><!-- /.skill_img -->
16					<a href=""></a>
17				</li><!-- /.skills_item -->
18				<!--2-->
19				<li class="skills_item pc-skills pc-skills_back active">
20					<h3 class="pc-skills_ttl">H</h3><!-- /.pc-skills_ttl -->
21					<div class="pc-skills_img pc-skills_img_back"><img alt="" src="./asserts/img/skills/html.png"></div><!-- /.skill_img -->
22					<p class="skills-desc_back">★</p><!-- /.skills-desc -->
23					<a href=""></a>
24				</li><!-- /.skills_item -->
25			</ul><!-- /.skills_list -->
26			<ul class="skills_list" role="list">
27				<li class="skills_item pc-skills pc-skills_front passive">
28					<h3 class="pc-skills_ttl">C</h3><!-- /.pc-skills_ttl -->
29					<div class="pc-skills_img"><img alt="" src="./asserts/img/skills/css.png"></div><!-- /.skill_img -->
30					<a href=""></a>
31				</li><!-- /.skills_item -->
32				<!--2-->
33				<li class="skills_item pc-skills pc-skills_back active">
34					<h3 class="pc-skills_ttl">C</h3><!-- /.pc-skills_ttl -->
35					<div class="pc-skills_img pc-skills_img_back"><img alt="" src="./asserts/img/skills/css.png"></div><!-- /.skill_img -->
36					<p class="skills-desc_back"></p><!-- /.skills-desc -->
37					<a href=""></a>
38				</li><!-- /.skills_item -->
39			</ul><!-- /.skills_list -->
40			<ul class="skills_list" role="list">
41				<li class="skills_item pc-skills pc-skills_front passive">
42					<h3 class="pc-skills_ttl">JQuery</h3><!-- /.pc-skills_ttl -->
43					<div class="pc-skills_img"><img alt="" src="./asserts/img/skills/jquery.png"></div><!-- /.skill_img -->
44					<a href=""></a>
45				</li><!-- /.skills_item -->
46				<!--2-->
47				<li class="skills_item pc-skills pc-skills_back active">
48					<h3 class="pc-skills_ttl">J</h3><!-- /.pc-skills_ttl -->
49					<div class="pc-skills_img pc-skills_img_back"><img alt="" src="./asserts/img/skills/jquery.png"></div><!-- /.skill_img -->
50					<p class="skills-desc_back">★</p><!-- /.skills-desc -->
51					<a href=""></a>
52				</li><!-- /.skills_item -->
53			</ul><!-- /.skills_list -->
54			<ul class="skills_list" role="list">
55				<li class="skills_item pc-skills pc-skills_front passive">
56					<h3 class="pc-skills_ttl">j</h3><!-- /.pc-skills_ttl -->
57					<div class="pc-skills_img"><img alt="" src="./asserts/img/skills/javascript.png"></div><!-- /.skill_img -->
58					<a href=""></a>
59				</li><!-- /.skills_item -->
60				<!--2-->
61				<li class="skills_item pc-skills pc-skills_back active">
62					<h3 class="pc-skills_ttl">j</h3><!-- /.pc-skills_ttl -->
63					<div class="pc-skills_img pc-skills_img_back"><img alt="" src="./asserts/img/skills/javascript.png"></div><!-- /.skill_img -->
64					<p class="skills-desc_back">★</p><!-- /.skills-desc -->
65					<a href=""></a>
66				</li><!-- /.skills_item -->
67			</ul><!-- /.skills_list -->
68			<ul class="skills_list" role="list">
69				<li class="skills_item pc-skills pc-skills_front passive">
70					<h3 class="pc-skills_ttl">o</h3><!-- /.pc-skills_ttl -->
71					<div class="pc-skills_img"><img alt="" src="./asserts/img/skills/wordpress.png"></div><!-- /.skill_img -->
72					<a href=""></a>
73				</li><!-- /.skills_item -->
74				<!--2-->
75				<li class="skills_item pc-skills pc-skills_back active">
76					<h3 class="pc-skills_ttl">W</h3><!-- /.pc-skills_ttl -->
77					<div class="pc-skills_img pc-skills_img_back"><img alt="" src="./asserts/img/skills/wordpress.png"></div><!-- /.skill_img -->
78					<p class="skills-desc_back">★</p><!-- /.skills-desc -->
79					<a href=""></a>
80				</li><!-- /.skills_item -->
81			</ul><!-- /.skills_list -->
82			<ul class="skills_list" role="list">
83				<li class="skills_item pc-skills pc-skills_front passive">
84					<h3 class="pc-skills_ttl">P</h3><!-- /.pc-skills_ttl -->
85					<div class="pc-skills_img"><img alt="" src="./asserts/img/skills/php.png"></div><!-- /.skill_img -->
86					<a href=""></a>
87				</li><!-- /.skills_item -->
88				<!--2-->
89				<li class="skills_item pc-skills pc-skills_back active">
90					<h3 class="pc-skills_ttl">P</h3><!-- /.pc-skills_ttl -->
91					<div class="pc-skills_img pc-skills_img_back"><img alt="" src="./asserts/img/skills/php.png"></div><!-- /.skill_img -->
92					<p class="skills-desc_back">★★★☆☆</p><!-- /.skills-desc -->
93					<a href=""></a>
94				</li><!-- /.skills_item -->
95			</ul><!-- /.skills_list -->
96			<ul class="skills_list" role="list">
97				<li class="skills_item pc-skills pc-skills_front passive">
98					<h3 class="pc-skills_ttl">P</h3><!-- /.pc-skills_ttl -->
99					<div class="pc-skills_img"><img alt="" src="./asserts/img/skills/python.png"></div><!-- /.skill_img -->
100					<a href=""></a>
101				</li><!-- /.skills_item -->
102				<!--2-->
103				<li class="skills_item pc-skills pc-skills_back active">
104					<h3 class="pc-skills_ttl">P</h3><!-- /.pc-skills_ttl -->
105					<div class="pc-skills_img pc-skills_img_back"><img alt="" src="./asserts/img/skills/python.png"></div><!-- /.skill_img -->
106					<p class="skills-desc_back">★★☆☆☆</p><!-- /.skills-desc -->
107					<a href=""></a>
108				</li><!-- /.skills_item -->
109			</ul><!-- /.skills_list -->
110			<ul class="skills_list" role="list">
111				<li class="skills_item pc-skills pc-skills_front passive">
112					<h3 class="pc-skills_ttl">a</h3><!-- /.pc-skills_ttl -->
113					<div class="pc-skills_img"><img alt="" src="./asserts/img/skills/react.png"></div><!-- /.skill_img -->
114					<a href=""></a>
115				</li><!-- /.skills_item -->
116				<!--2-->
117				<li class="skills_item pc-skills pc-skills_back active">
118					<h3 class="pc-skills_ttl">a</h3><!-- /.pc-skills_ttl -->
119					<div class="pc-skills_img pc-skills_img_back"><img alt="" src="./asserts/img/skills/react.png"></div><!-- /.skill_img -->
120					<p class="skills-desc_back">★★☆☆☆</p><!-- /.skills-desc -->
121					<a href=""></a>
122				</li><!-- /.skills_item -->
123			</ul><!-- /.skills_list -->
124			<ul class="skills_list" role="list">
125				<li class="skills_item pc-skills pc-skills_front passive">
126					<h3 class="pc-skills_ttl">M</h3><!-- /.pc-skills_ttl -->
127					<div class="pc-skills_img"><img alt="" src="./asserts/img/skills/mysql.png"></div><!-- /.skill_img -->
128					<a href=""></a>
129				</li><!-- /.skills_item -->
130				<!--2-->
131				<li class="skills_item pc-skills pc-skills_back active">
132					<h3 class="pc-skills_ttl">M</h3><!-- /.pc-skills_ttl -->
133					<div class="pc-skills_img pc-skills_img_back"><img alt="" src="./asserts/img/skills/mysql.png"></div><!-- /.skill_img -->
134					<p class="skills-desc_back">★☆☆☆☆</p><!-- /.skills-desc -->
135					<a href=""></a>
136				</li><!-- /.skills_item -->
137			</ul><!-- /.skills_list -->
138		</div><!-- /.skills-container -->
139	</div><!-- /.container -->
140	<!-- /.skills -->
141    <script src="./asserts/js/jquery-3.6.0.min.js"></script>
142      <script src="./asserts/js/script.js"></script>
143</body>
144</html>

補足情報（FW/ツールのバージョンなど）

CSS,JS

追記

![現状(https://d1666c7av167g2.cloudfront.net/questions/2022-01-12/0c7b36ad-1c02-41e5-8e1a-3e569669fb45.png)

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

回答1件

どうしたいのかが今一つわからないのですが、3列、2列と列数が決め打ちされているならば、auto-fitを指定する必要はないのではないかな、と思いました。

css
1
2.skills-inner {
3  margin: 0 auto;
4  width: 1280px;
5  padding: 0px 15px;
6}
7
8@media screen and (min-width: 600px) and (max-width: 1024px) {
9  .skills-inner {
10    max-width: initial;
11    padding: 0px 5%;
12  }
13}
14
15@media screen and (max-width: 599px) {
16  .skills-inner {
17    padding: 0px 5%;
18  }
19}
20
21.skills-ttl {
22  line-height: 3;
23  position: relative;
24  z-index: 1;
25  text-transform: capitalize;
26  font-size: 3.0rem;
27}
28
29.skills-ttl::first-letter {
30  color: #c42d2d;
31}
32
33.skills-ttl::after {
34  content: "スキル";
35  width: 10%;
36  height: 10%;
37  font-size: 1.8rem;
38  padding-top: 20px;
39  padding-left: 20px;
40}
41
42.skills-ttl {
43  line-height: 3;
44  position: relative;
45  z-index: 1;
46  text-transform: capitalize;
47  font-size: 3.0rem;
48}
49
50.skills-container {
51  display: -ms-grid;
52  display: grid;
53  -ms-grid-columns: (minmax(26%, 1fr))[auto-fit];
54      grid-template-columns: repeat(auto-fit, minmax(26%, 1fr)); /* ←これ */
55  gap: 2%;
56  margin-bottom: 10%;
57}
58
59@media screen and (max-width: 1025px) {
60  .skills-container {
61    display: -webkit-box;
62    display: -webkit-flex;
63    display: -ms-flexbox;
64    display: flex;
65    -webkit-flex-wrap: wrap;
66        -ms-flex-wrap: wrap;
67            flex-wrap: wrap;
68    -webkit-justify-content: space-around;
69        -ms-flex-pack: distribute;
70            justify-content: space-around;
71    -webkit-box-align: center;
72    -webkit-align-items: center;
73        -ms-flex-align: center;
74            align-items: center;
75    max-width: 900px;
76  }
77}
78
79@media screen and (max-width: 700px) {
80  .skills-container {
81    -webkit-box-pack: initial;
82    -webkit-justify-content: initial;
83        -ms-flex-pack: initial;
84            justify-content: initial;
85  }
86}
87
88.skills_list[role="list"] {
89  position: relative;
90  width: max(26%, 320px);
91  -webkit-box-sizing: border-box;
92          box-sizing: border-box;
93}
94
95@media screen and (max-width: 700px) {
96  .skills_list[role="list"]:nth-child(n) {
97    width: max(20%, 260px);
98  }
99}
100
101@media screen and (max-width: 1025px) {
102  .skills_list {
103    margin-right: 30px;
104  }
105}
106
107.skills_item {
108  -webkit-transform-style: preserve-3d;
109          transform-style: preserve-3d;
110  -webkit-transition: -webkit-transform 10s;
111  transition: -webkit-transform 10s;
112  transition: transform 10s;
113  transition: transform 10s, -webkit-transform 10s;
114  display: -webkit-box;
115  display: -webkit-flex;
116  display: -ms-flexbox;
117  display: flex;
118  -webkit-box-orient: vertical;
119  -webkit-box-direction: normal;
120  -webkit-flex-direction: column;
121      -ms-flex-direction: column;
122          flex-direction: column;
123  width: 100%;
124  height: 80%;
125  margin-top: 60px;
126  transform-style: preserve-3d;
127  -webkit-transition: opacity 0.5s, -webkit-transform 1s;
128  transition: opacity 0.5s, -webkit-transform 1s;
129  transition: transform 1s, opacity 0.5s;
130  transition: transform 1s, opacity 0.5s, -webkit-transform 1s;
131  background-color: #fff;
132}
133
134.skills_item:nth-of-type(2n) {
135  margin: 10px 1%;
136}
137
138.skills_item .skills_img img {
139  width: 40%;
140}
141
142.skills_item > a {
143  position: absolute;
144  width: 100%;
145  height: 100%;
146  top: 0;
147  left: 0;
148  text-indent: 100%;
149  /*テキスト非表示*/
150  white-space: nowrap;
151  /*テキスト非表示*/
152  overflow: hidden;
153  /*テキスト非表示*/
154}
155
156.skills_item > a:hover {
157  opacity: .5;
158  -webkit-transform: rotate(-180deg);
159          transform: rotate(-180deg);
160}
161
162.pc-skills {
163  padding: 0 2rem 2rem 2rem;
164  top: 0;
165  left: 0;
166  -webkit-backface-visibility: hidden;
167          backface-visibility: hidden;
168  background: white;
169  -webkit-box-shadow: 1px 1px 40px 5px rgba(0, 0, 0, 0.15);
170          box-shadow: 1px 1px 40px 5px rgba(0, 0, 0, 0.15);
171  /*   border-radius: 30px; */
172  border-radius: 8px;
173  height: auto;
174}
175
176.pc-skills.passive {
177  z-index: 1;
178  -webkit-transform: rotateY(0deg);
179          transform: rotateY(0deg);
180}
181
182.pc-skills_ttl {
183  text-align: center;
184  font-size: 2.5rem;
185  line-height: 3;
186  text-align: center;
187}
188
189.pc-skills_img {
190  width: 60%;
191  margin: 5% auto;
192}
193
194.pc-skills_front {
195  position: relative;
196  z-index: 1;
197  -webkit-transform: rotateY(0);
198          transform: rotateY(0);
199}
200
201.pc-skills_back {
202  position: absolute;
203  z-index: -1;
204  -webkit-transform: rotateY(-180deg);
205          transform: rotateY(-180deg);
206}
207
208.pc-skills_back._active {
209  margin-top: 15%;
210}
211
212.pc-skills_back .pc-skills_img_back {
213  opacity: .5;
214}
215
216.pc-skills_back .skills-desc_back {
217  color: #0fe4a4;
218  font-size: 2.0rem;
219  text-align: center;
220}

投稿2022/01/11 02:14

Lhankor_Mhy

総合スコア36960

free_teku

2022/01/11 07:44

Lhankor_Mhyさん、いつもありがとうございます。おっしゃる通りです。autofitは使う必要ないですね・・指定している部分に関して言うと、ちょうどいい下限だったので、2列三列に指定しました。特に2列に関して伝えると、レスポンシブ時にスマホを縦にスクロールさせるのがUI的に、ナンセンスだと感じ、2列と指定しました。