グリッドレイアウトについて

Question

<div class="grid">
 <div class="grid1">
   <p><h3> タイトル</h3>
   <h4>本文
   </h4></p>
 </div>
 <div class="grid2">
   <img src="images/about_dogs.jpg" class="dogpic" alt="dog">
 </div>
 <div class="grid3">
   <img src="images/takeout_pic.jpg" class="togopic" alt="togo">
 </div>
 <div class="grid4">
   <p><h3>タイトル</h3>
   <h4>本文</h4>
       </p>
 </div>
</div>
<CSS>
.grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   grid-template-rows: 500px 500px;
 }
 .grid1 {
   background-color: #a2ded0;
 }
 .grid1 p {
   display: inline-block;
 }
 .grid2 {
   background-color: #f4d03f;
 }
 .grid3 {
   background-color: #6c7a89;
 }
 .grid4 {
   background-color: #59abe3;
 }
 .grid img{
   width: 100%;
   height:100%;
   object-fit: contain;
 }

各５００px×５００pxの４マスのgrid layoutを作成しています。
こちらのサイトの写真部分ようにページ幅に合わせて５００×５００がそのまま拡大縮小していく設定にしたいのですがうまくできません。

あと画像がマスいっぱいに広がりません。
どうしたら良いでしょうか？
よろしくお願いします。`

Comments

[K_3578]

質問は編集できます。
回答者が見づらいため、ソースコードはMarkDownの<code>ブロック内に貼り付けてください。
加えて、URLは「リンクの挿入」を押して[リンク内容](URL)という形で編集して追記してください。

[Lhankor_Mhy]

ご提示のリンク先では、画像がサイズに応じて切り取られていますが、そのような形でいいですか？

[mikan23]

>ご提示のリンク先では、画像がサイズに応じて切り取られていますが、そのような形でいいですか？

はい、大丈夫です。

[m.ts10806]

質問は編集できます。

[K_3578]

＠質問者さん
<code>ブロックに入れてくれたのはナイスなのですが惜しい、これだとHTMLとCSSが1つのコードに
なってしまってるんで、

```HTML
<div class="grid">
<div class="grid1">
<p><h3> タイトル</h3>
(省略)
```
(1行空ける)
```CSS
.grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: 500px 500px;
}
(省略)
```
っていう形にしてくれると全員から見やすくてgoodです。

Answer 1

aspect-ratio はブラウザ対応がそろっていないので、marginを使ってアスペクト比を維持するのがいいかと思います。
aspect-ratio - CSS: Cascading Style Sheets | MDN

.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: 500px 500px;
  grid-template-rows: auto auto;
}
.grid1 {
  background-color: #a2ded0;
}
.grid1 p {
  display: inline-block;
}
.grid2 {
  background-color: #f4d03f;
}
.grid3 {
  background-color: #6c7a89;
}
.grid4 {
  background-color: #59abe3;
}
.grid img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-fit: cover;
}
.grid > * > * {
  position: absolute;
}
.grid > * {
  position: relative;
  display: flex;
}
.grid > *::before {
  display: block;
  content: "";
  width: 0;
  margin-top: 100%;
  position: static;
}

---

それから、p要素の子に見出し要素をつけることはできないので、気を付けてください。表示が崩れます。

許可されている内容 記述コンテンツ

<p>: 段落要素 - HTML: HyperText Markup Language | MDN

Comments

[mikan23]

ご回答ありがとうございます。
イメージ通りにできました！
ありがとうございます。

[mikan23]

すみません、文字をマスのど真ん中に起きたいのですが
position: absolute;
top: 50%とかでできるかと思うのですが
どこに入れたら良いでしょうか？
重ね重ね申し訳ございません。

[Lhankor_Mhy]

縦中央寄せをするために、top: 50% を使うのはあまりいい方法ではないと思いますが、.grid1などの子要素にスタイルを当てればいいかと思いますよ。

[mikan23]

初心者で申し訳ないのですがスタイルを当てると言うのはどう言うことでしょうか？
これからも使うと思うので、他に良い方法があれば教えていただきたいです。
お手数をおかけしますがよろしくお願いします。

[Lhankor_Mhy]

CSSは、おおむね以下のような書式です。

セレクタ{
プロパティ: 値;
}

ですので、たとえば、h1要素にcolorプロパティをredにするスタイルを当てたい場合は、

h1{
color: red;
}

と書きます。

[mikan23]

そのことですね！理解しました。
実際、https://saruwakakun.com/html-css/basic/centering#section2
こちらのサイトのその2：absoluteを活用して縦中央に配置/例：複数行の文章の場合
を参考にgrid1やgrid1 pにも試してみたのですがうまく反映されませんでした。

他に方法がありますでしょうか？
何度も申し訳ございませんがご存知でしたらどうぞよろしくお願いします。

[Lhankor_Mhy]

「grid1 pにも試してみた」とのことですが、回答にも書いた通り、p要素の子に見出し要素を入れるのは文法違反です。表示が崩れることもあるので避けた方がいいでしょう。

当方で試したところ、ご提示の方法で垂直中央寄せになりました。

[mikan23]

お礼の文が反映されていませんでした、失礼しました。
指示していただいた通り行いましたらきれいに垂直中央寄せになりました！
ありがとうございました！！