gridなしで配置の調整をしたい

画像の配置調整をgridなしで行いたいです。
大きく２つあります。

・１つ目
１段目を２段の両端に揃えて均等配置配置したいです。
→ ここを解決したいのですが、上手い解決方法はないでしょうか。。

・２つ目
３段目の２枚を２段目の左側に配置したい為、gridを使用して調整しています。
Chormeだと正常ですが、IEだとgrid非対応の為レイアウトが崩れます。
→CSS変換など試したのですが、上手くいきません。
https://autoprefixer.github.io/

画像が理想形なんですが、上記２点についてグリッドを使わない方法で
いい方法があれば教えて頂きたいです。
よろしくお願いします。

html
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5    <meta charset="UTF-8">
6    <title>Document</title>
7</head>
8<style type="text/css">
9    /*上段画像*/
10    .content_top {
11        text-align: center;
12        margin-top: 70px;
13    }
14
15    /*上段画像を横配置*/
16    .mainContainer {
17        display: flex;
18    }
19
20    /*上段画像横幅の配置*/
21    .item_1,
22    .item_2,
23    .item_3 {
24        margin-left: 14%;
25    }
26
27    /*下段画像*/
28    .content_bottom {
29        margin-top: 40px;
30        /*IE対応したい*/
31        display: grid;
32        grid-template-columns: repeat(4, min-content);
33        /*上*/
34        justify-content: center;
35        grid-column-gap: 5px;
36    }
37
38    /*下段画像配置*/
39    div.row_spot1,
40    .row_spot2,
41    .row_spot3 {
42        margin: 0 auto;
43        display: contents;
44    }
45
46</style>
47
48<body>
49    <div class="content_top">
50        <div class="mainContainer">
51            <div class="item_1">
52                <img src="https://www.homepage-tukurikata.com/image/lion.jpg" width="250" height="250" alt="video">
53            </div>
54            <div class="item_2">
55                <img src="https://www.homepage-tukurikata.com/image/lion.jpg" width="250" height="250" alt="video">
56            </div>
57            <div class="item_3">
58                <img src="https://www.homepage-tukurikata.com/image/lion.jpg" width="250" height="250" alt="video">
59            </div>
60        </div>
61    </div>
62    <div class="content_bottom">
63        <div class="row_spot1">
64            <div class="photo">
65                <img src="https://www.homepage-tukurikata.com/image/lion.jpg" width="250" height="250" alt="video">
66            </div>
67            <div class="photo">
68                <img src="https://www.homepage-tukurikata.com/image/lion.jpg" width="250" height="250" alt="video">
69            </div>
70            <div class="photo">
71                <img src="https://www.homepage-tukurikata.com/image/lion.jpg" width="250" height="250" alt="video">
72            </div>
73            <div class="photo">
74                <img src="https://www.homepage-tukurikata.com/image/lion.jpg" width="250" height="250" alt="video">
75            </div>
76        </div>
77        <div class="row_spot2">
78            <div class="photo">
79                <img src="https://www.homepage-tukurikata.com/image/lion.jpg" width="250" height="250" alt="video">
80            </div>
81            <div class="photo">
82                <img src="https://www.homepage-tukurikata.com/image/lion.jpg" width="250" height="250" alt="video">
83            </div>
84        </div>
85    </div>
86</body>
87
88</html>

hatena19

2021/02/04 20:00

画像は250×250で固定でいいのですか。

Lhankor_Mhy

2021/02/05 01:32

人に質問をしておいて同じ内容で質問を建てるのは感じ悪いですね。 https://ja.wikipedia.org/wiki/%E3%83%9E%E3%83%AB%E3%83%81%E3%83%9D%E3%82%B9%E3%83%88#.E3.83.9E.E3.83.8A.E3.83.BC.E9.81.95.E5.8F.8D.E3.81.A8.E3.81.95.E3.82.8C.E3.82.8B.E3.81.93.E3.81.A8.E3.81.8C.E3.81.82.E3.82.8B.E7.90.86.E7.94.B1

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

回答1件

HTMLの方で画像サイズをwidth="250" height="250"と設定しているのでそのサイズで固定として、

css
1/*上段画像*/
2.content_top {
3  text-align: center;
4  margin-top: 70px;
5}
6
7/*上段画像を横配置*/
8.mainContainer {
9  width: 1015px;
10  margin: 0 auto;
11  display: flex;
12  justify-content: space-between;
13}
14
15/*下段画像*/
16.row_spot1, .row_spot2 {
17  width: 1015px;
18  margin: 0 auto;
19  margin-top: 40px;
20  display: flex;
21}
22
23.photo + .photo {
24  margin-left: 5px;
25}