画面幅を広げる→ボックスの幅を広げる＆高さを縮める

前提・実現したいこと

HTML、CSSを学習中です。
参考サイトを模倣しています。
https://manablog.org/

画面幅を広げる　→　ボックスの幅を広げる＆高さを縮める
を指示するにはどのよう方法がありますでしょうか。

なお下記の構造を指示したいため、display:grid;をsectionで分けて指示を試みたのですが、二つ目のdisplay:gridは反映されませんでした。
現状は画面幅最小時の４記事目が参考サイトと同じ高さになるように設定してある状態です。

ブログ記事上から３記事目まで → 横幅100%　＆　高さ固定
ブログ記事4記事目以降　→横幅100%　＆　高さ縮小

画面幅最小時　↓

画面幅最大時　↓

この記事の部分のレスポンシブです。　
画面幅を最小にしてから767pxまでの挙動について質問しています。　↓

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

エラーメッセージ：特になし

該当のソースコード

HTML
1    <div class=container2>
2      <!-- <section> -->
3        <div class=box1>
4          <div class="pic1">
5            <img src="img/e467380e916dc58ebc01366c57a66445.jpg">
6          </div>
7          <h1>プログラミング学習の始め方
8            <br>３ヶ月で達成可能【完全初心者向け】
9          </h1>
10          <div class="readmore">
11            <a href="">READ MORE</a>
12          </div>
13        </div>
14        <div class=box2>
15          <div class="pic1">
16            <img src="img/shutterstock_1349672450.jpg">
17          </div>
18          <h1>ブログ型アフィリの完全講義
19            <br>ブログ歴６年の僕の集大成です
20          </h1>
21          <div class="readmore">
22            <a href="">READ MORE</a>
23          </div>
24        </div>
25        <div class=box3>
26          <div class="pic1">
27            <img src="img/shutterstock_1343985776-e1596358002784.jpg">
28          </div>
29          <h1>有料コミュニティを始めます
30            <br>理由・価格・内容について
31          </h1>
32          <div class="readmore">
33            <a href="">READ MORE</a>
34          </div>
35        </div>
36      <!-- </section>
37      <section> -->
38        <div class=box1>
39          <diV class="time">
40            <time>2020/08/12</time>
41          </diV>
42          <h2>８時間労働は長すぎて、人生の無駄遣いです【上限は６時間がベスト】
43          </h2>
44          <p class="category">
45            <a href="" rel="category tag">LIFE</a>
46            <a href="" rel="category tag">Work</a>
47          </p>
48          <div class="pic2">
49            <img src="img/shutterstock_1112142146-e1597149426424.jpg">
50          </div>
51          <p class="description">収入を増やしたいなら、基本的に「1日、6時間労働」を目安にするべき。というか、僕はぶっちゃけ、4〜6時間が平均だと思います。多くの人は、たぶん「毎日8〜10時間」ほど働いてそうですが、それだと勉強できないですよね。あと、思考もできないし、遊びもできない。労働上限は、6時間が良いです。
52          </p>
53          <div class="readmore">
54            <a href="">READ MORE</a>
55          </div>
56        </div>

CSS
1@charset "UTF-8";
2
3body {
4 margin: 0;
5}
6
7main{
8  /* background-color:#F7F7F7; */
9  background-color:gray;
10  font-family: Noto, Hiragino Sans,Helvetica,Arial,sans-serif;
11  text-align: center;
12}
13
14.container2>div{
15  background-color:white;
16  margin-left: 15px;
17  margin-right: 15px;
18  margin-top: 30px;
19  text-align: center;
20  /* padding-top: 30px; */
21  padding-bottom: 70px;
22}
23
24.container2{
25  display: grid;
26  grid-template-columns: 100%;
27  grid-template-rows: 478px 478px 478px 
28  1053px 1053px 1053px 1053px 1053px 1053px 1053px 1053px 1053px 1053px;
29  /* margin-left: 15px;
30  margin-right: 15px; */
31}
32
33.pic1{
34  margin-top: 30px;
35}
36
37.container2 img{
38  width: 100%;
39  height: 200px;
40  object-fit: cover;
41}
42
43.container2 h1{
44  font-size: 19px;
45  font-weight: 500;
46  color: #7b7b7b;
47  line-height: 40px;
48  margin-top: 20px;
49  margin-bottom: 10px;
50  padding-right: 5px;
51  padding-left: 5px;
52}
53
54.readmore{
55  margin-top: 40px;
56}
57
58.readmore a{
59  font-size: 14px;
60  border: 1px solid #909090;
61  color:#7b7b7b;
62  padding: 15px 33px 14px;
63}
64
65.container2 h2{
66  font-size: 25px;
67  font-weight: 600;
68  color: #7b7b7b;
69  line-height: 2;
70  margin-top: 20px;
71  margin-bottom: 10px;
72  padding-right: 40px;
73  padding-left: 40px;
74}
75
76.category a{
77  color: #4773BA;
78  /* text-decoration: none; */
79}
80
81.category{
82  margin-top: 20px;
83  font-size: 13px;
84}
85
86.time{
87  font-size: 13px;
88  color: #7b7b7b;
89  margin-top: 60px;
90  margin-bottom: 10px;
91  padding-left: 40px;
92  padding-right: 40px;
93}
94
95.pic2 img{
96  width: 100%;
97  height: 300px;
98  object-fit: cover;
99  margin-top: 30px;
100  margin-bottom: 20px;
101}
102
103.description{
104  font-size: 17px;
105  color: #7b7b7b;
106  line-height: 2;
107  padding-left: 40px;
108  padding-right: 40px;
109}

試したこと

■下記を使用しての方法を考えましたが、解決にいたりませんでした。
・flex-glow
・flex-shrink
・max-width
・min-width

■ググって確認したところ、下記の方法はありましたが、今回指示した内容とは異なりました。
・画像の縦横比を維持する方法
・高さ固定で幅を広げる方法

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

ここにより詳細な情報を記載してください。

Lhankor_Mhy

2020/08/18 07:52

ご提示のブログを拝見しましたが、ブレイクポイントで親要素の幅が広がっているだけで、高さは固定ではなくて成り行きだと思います。

kyohei_nakano

2020/08/18 21:33

コメントありがとうございます。理解できていないので質問させてください。 ■３つあるブレイクポイントのうち、１つ目までの挙動（画面幅を最小にしてから767pxまでの挙動）については、やはり下記のような動きしているのですがいかがでしょうか。（質問内容一部加筆しました）・ブログ記事上から３記事目まで → 横幅100%　＆　高さ固定・ブログ記事4記事目以降　→横幅100%　＆　高さ縮小 ■高さが成り行きというのは、height:100%;を使用しているということでしょうか。

Lhankor_Mhy

2020/08/19 00:34

■ いえ、高さは固定ではありません。成り行きですが、たまたま内容物が同じ高さなので、ブロックも同じ高さになっています。 ■ いえ、height: auto; です。

Lhankor_Mhy

2020/08/19 00:37 編集

「高さ成り行きだが、たまたま同じ高さになっている」は、デベロッパーズツールなどで、内容物の一部を消去した時に高さが縮むことで確認できます。

Lhankor_Mhy

2020/08/19 01:51

また、補足願います。ご希望の「高さ縮小」とは、成り行き高さのことですか？それとも、なにか別のロジックで縮小するものですか？

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

回答1件

ベストアンサー

不明な点が多いのですが、「高さ縮小」を「高さ成り行き」と読み、内在サイズ依存にしたいというご質問だと推測して回答します。

以下のように変更してはいかがですか？

css
1.container2{
2  display: grid;
3  grid-template-columns: 100%;
4  
5  /* grid-template-rows: 478px 478px 478px 
6  1053px 1053px 1053px 1053px 1053px 1053px 1053px 1053px 1053px 1053px; */
7  grid-template-rows: 478px 478px 478px 
8  repeat( auto-fit, minmax( 0, 1fr ) );
9  
10  /* margin-left: 15px;
11  margin-right: 15px; */
12}

投稿2020/08/19 05:20

編集2020/08/20 02:46

Lhankor_Mhy

総合スコア36156

kyohei_nakano

2020/08/19 20:34

ご迅速かつ様々なご指摘ありがとうございます！！この点に気づけていませんでした↓ 「たまたま内容物が同じ高さなので、ブロックも同じ高さになっています。」見分ける方法は？という疑問についても先回りのご回答、感謝しています。高さ成り行きでの設定が実現したいことでしたので、問題解決しました！懇切丁寧でお気遣い溢れるご回答、本当にありがとうございました。