グリッドレイアウト挑戦中。マージンは同じアキを意地したままで、カラム落ちと折り返しの時は左寄せ、div全体をセンターに配置したい

前提・実現したいこと

作品事例で、グリッドレイアウトでの見せ方に挑戦しています。
参考：https://nssg.jp/

！やりたいこと
マージンは同じ空きを意地したままで、カラム落ち
折り返しの時は左寄せ、配置はセンターを維持

ご教示いただければ幸いです。
どうぞよろしくお願いいたします。

発生している問題・エラーメッセージ

flex-wrap: wrap;で折り返しはできて、左寄せにもなっています。
しかし、センター配置することができません。

該当のソースコード

html
1<div class="row-top">
2<div class="row">
3
4    <div class="col-xs-15"><a href="#"><img src="../assets/img-1.jpg" alt="" width="150" height="150"></a></div>
5    <div class="col-xs-15"><a href="#"><img src="../assets/img-2.jpg" alt="" width="150" height="150"></a></div>
6    <div class="col-xs-15"><a href="#"><img src="../assets/img-3.jpg" alt="" width="150" height="150"></a></div>
7    <div class="col-xs-15"><a href="#"><img src="../assets/img-4.jpg" alt="" width="150" height="150"></a></div>
8    <div class="col-xs-15"><a href="#"><img src="../assets/img-5.jpg" alt="" width="150" height="150"></a></div>
9	<div class="col-xs-15"><a href="#"><img src="../assets/img-6-01.jpg" alt="" width="150" height="150"></a></div>
10    <div class="col-xs-15"><a href="#"><img src="../assets/img-7-01.jpg" alt="" width="150" height="150"></a></div>
11    <div class="col-xs-15"><a href="#"><img src="../assets/img-16.jpg" alt="" width="150" height="150"></a></div>
12    <div class="col-xs-15"><a href="#"><img src="../assets/img-18-01.jpg" alt="" width="150" height="150"></a></div>
13    <div class="col-xs-15"><a href="#"><img src="../assets/img-19.jpg" alt="" width="150" height="150"></a></div>
14	<div class="col-xs-15"><a href="#"><img src="../assets/img-17.jpg" alt="" width="150" height="150"></a></div>
15    <div class="col-xs-15"><a href="#"><img src="../assets/img-1.jpg" alt="" width="150" height="150"></a></div>
16    <div class="col-xs-15"><a href="#"><img src="../assets/img-2.jpg" alt="" width="150" height="150"></a></div>
17    <div class="col-xs-15"><a href="#"><img src="../assets/img-35.jpg" alt="" width="150" height="150"></a></div>
18    <div class="col-xs-15"><a href="#"><img src="../assets/img-36-01.jpg" alt="" width="150" height="150"></a></div>
19
20</div><!--    row    -->
21</div><!--    row-top    -->
22

css
1
2.row-top{
3    width:100%;
4    display: flex;
5    align-items: center;
6}
7
8.row{
9    display: flex;
10    flex-wrap: wrap;
11    margin: 0 auto;
12}
13
14.col-xs-15{
15    overflow: hidden;
16    margin: 0 9px 19px;
17    width: 184.8px;
18    height: 184.8px;
19    text-align: center;
20	
21}
22
23.col-xs-15 img{
24    width: 184.8px;
25    height: 184.8px;
26    -webkit-transform: scale(1);
27    transform: scale(1);
28    -webkit-transition: .5s ease-in-out;
29    transition: .5s ease-in-out;
30}
31
32.col-xs-15:hover img{
33    -webkit-transform: scale(1.15);
34    transform: scale(1.15);
35    transition-duration: 1s;
36}
37

miyabi_pudding

2021/03/24 01:09

> センター配置することができません。 .rowの横幅はどのようにするのでしょうか？固定値、もしくは画面に対してどれだけの比率か明示しないと、センター配置になりようがありません。

renmo

2021/03/24 02:24

ご指摘ありがとうございます。 divに対して横幅は100%で表示を行いたいと思っております。設定して尚やってみます。ありがとうございます。

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

回答1件

ベストアンサー

CSS Grid を使うと簡単にできます。

css
1.row{
2    display: grid;
3    grid-auto-rows: 185px;
4    grid-template-columns: repeat(auto-fit, 185px);
5    justify-content: center; 
6    gap: 18px;
7}
8
9.col-xs-15{
10    overflow: hidden;
11    width: 185px;
12    height: 185px;
13    text-align: center;
14}
15
16.col-xs-15 img{
17    width: 185px;
18    height: 185px;
19    -webkit-transform: scale(1);
20    transform: scale(1);
21    -webkit-transition: .5s ease-in-out;
22    transition: .5s ease-in-out;
23}
24
25.col-xs-15:hover img{
26    -webkit-transform: scale(1.15);
27    transform: scale(1.15);
28    transition-duration: 1s;
29}