複数の画像をフルスクリーン表示にさせたい

複数の画像をフルスクリーン表示にさせたいです。
同サイズの画像が３つ横並びでモニターいっぱい、
下の段にももう１行、計２行の画像６つ並べたいです。

試してみたこと：画像部分にvhの設定などを行ってみましたが、
うまくいきませんでした。

完成予想図も添付しましたので、
ご参考にしていただければ幸いです。

よろしくお願いいたします。

html
1<!DOCTYPE html>
2<html lang="ja">
3    <head>
4        <meta charset="utf-8">
5        <meta name="viewport" content="width=device-width, initial-scale=1.0">
6        <title>タイトルタイトルタイトル</title>
7        <meta name="description" content="ディスクリプションディスクリプションディスクリプション">
8        <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
9        <link rel="preconnect" href="https://fonts.gstatic.com">
10        <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&family=Roboto:wght@400;700&display=swap" rel="stylesheet">
11        <link rel="stylesheet" href="css/style.css">
12        <link rel="stylesheet" href="css/responsive.css">
13        <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
14    </head>
15    <body>
16        <div class="photo-wrapper">
17                <div class="photo-cssGridContainer">
18                    <div class="photo-cssGrid photoBottom">
19                        <figure><a href="#"><img src="ダミーダミーダミー" alt=""></a></figure>
20                        <p>0000.00</p>
21                        <h3>画像キャプション画像キャプション</h3>
22                    </div>
23                    <div class="photo-cssGrid photoBottom">
24                        <figure><a href="#"><img src="ダミーダミーダミー" alt=""></a></figure>
25                        <p>0000.00</p>
26                        <h3>画像キャプション画像キャプション</h3>
27                    </div>
28                    <div class="photo-cssGrid photoBottom">
29                        <figure><a href="#"><img src="ダミーダミーダミー" alt=""></a></figure>
30                        <p>0000.00</p>
31                        <h3>画像キャプション画像キャプション</h3>
32                    </div>
33                    <div class="photo-cssGrid photoBottom">
34                        <figure><a href="#"><img src="ダミーダミーダミー" alt=""></a></figure>
35                        <p>0000.00</p>
36                        <h3>画像キャプション画像キャプション</h3>
37                    </div>
38                    <div class="photo-cssGrid photoBottom">
39                        <figure><a href="#"><img src="ダミーダミーダミー" alt=""></a></figure>
40                        <p>0000.00</p>
41                        <h3>画像キャプション画像キャプション</h3>
42                    </div>
43                    <div class="photo-cssGrid photoBottom">
44                        <figure><a href="#"><img src="ダミーダミーダミー" alt=""></a></figure>
45                        <p>0000.00</p>
46                        <h3>画像キャプション画像キャプション</h3>
47                    </div>
48        </div>
49    </body>
50</html>

css
1@charset "UTF-8";
2* {
3    box-sizing: border-box;
4}
5html {
6    font-size: 100%;
7}
8body {
9    font-family: 'Noto Sans JP', sans-serif;
10    font-family: 'Roboto', sans-serif;
11    /*font-family: 'Lora', serif;
12    font-family: 'Noto Serif JP', serif;*/
13}
14a {
15    text-decoration: none;
16}
17h2, h3, p {
18    font-weight: normal;
19}
20.container {
21    width: 1170px;
22    padding: 0 15px;
23    margin: 0 auto;
24}
25.photo-wrapper {
26    padding-top: 150px;
27    text-align: center;
28}
29.photo-cssGridContainer {
30    display: flex;
31    flex-wrap: wrap;
32    justify-content: space-between;
33    padding-top: 70px;
34}
35.photo-cssGrid {
36    padding: 0 10px;
37    text-align: left;
38}
39.photoBottom {
40    margin-bottom: 80px;
41}
42.photo-cssGrid figure {
43    overflow:hidden;
44    margin: 0 auto;
45    width: 33vh;
46    height: 100%;
47}
48.photo-cssGrid h3 {
49    padding: 5px 0;
50    font-size: 14px;
51    letter-spacing: 3px;
52}
53.photo-cssGrid p {
54    font-size: 12px;
55    text-align: left;
56    color: grey;
57    letter-spacing: 3px;
58    padding-top: 10px;
59}
60.photo-cssGrid img {
61    width: 100%;
62    height: 100%;
63    object-fit: cover;
64    transition:1s all;
65}
66.photo-cssGrid img:hover {
67    transform:scale(1.1,1.1);
68    transition:1s all;
69}

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

回答1件

ベストアンサー

flexを設定した要素の子要素(Flexアイテム)に幅を設定する。(3列なら33%)

css
1.photo-cssGrid {
2    padding: 0 10px;
3    text-align: left;
4    width: 33%; /* 追加 */
5}
6.photoBottom {
7    margin-bottom: 80px;
8}
9.photo-cssGrid figure {
10    overflow:hidden;
11    margin: 0 auto;
12/*    width: 33vh;
13    height: 100%; */
14}