グリッドレイアウトを中央寄せにしたい

Question

コーディング練習中の初心者です。

グリッドレイアウトを使用し画像の様なレイアウトを作成しておりました。

↓見本

↓私が現在作成しているもの

画像が違うのでわかり辛くなっていてすみません。

ものづくりとは　という所、
グリッドレイアウトを使用し、なんとかアイテムを横並びにすることに成功しました。

しかし、お手本の様に、両脇に空白が欲しいのです。

marginで左右に空間を付けてみたり
何パターンか試してみたのですが、
きれいに枠ができません。。。

初歩的な質問になり申し訳ないのですが、
ご回答の程、よろしくお願いします。

<section class="company-greeting">
   <div class="content-wrapper">
      <div class="contents">
        <img src="img/cat.jpg">
        <div class="content">
          <h2>ものづくりとは</h2>
          <p>本文が入ります本文が入ります本文が入ります本文が入ります本文が入ります本文が入ります本文が入ります本文が入ります本文が入ります本文が入ります本文が入ります本文が入ります本文が入ります本文が入ります本文が入ります本文が入ります本文が入ります本文が入ります本文が入ります本文が入ります</p>
        </div>
      </div>
  </div>
 </section>``



```CSS
.company-greeting {
margin-bottom: 120px;
}

.company-greeting .contents{
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 20px;
justify-content: center;
}

.company-greeting h2{
margin-bottom: 50px;
text-align: center;

Comments

[kei344]

（質問文は編集できます）質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
※ コードと```の間に改行が無いのでは。

Answer 1

レスポンシブレイアウトにするなら、通常は下記のような設計します。

.company-greeting .contents{
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 20px;
  justify-content: center;
  max-width: 1000px; /*最大幅を設定*/
  margin: 0 auto;    /*中央寄せ*/
}

上記だと画面幅が1000px以上の場合は左右に均等に余白がついて中央寄せになります。
1000px以下だと画面幅に合わせて縮小します。(ただし画像幅は実寸のまま)
1000px以下でも左右に余白も持たせたいなら、padding: 0 20px; というようにパディングを追加すればいいでしょう。

1000px以下で画像とテキストを50%で分割するなら、
grid-template-columns: 50% 1fr; とすればいいでしょう。

後は、メディアクエリでモバイルサイズでは１カラムレイアウトに変更するというような設計になります。

Comments

[AmanoEriko]

ご丁寧にありがとうございます。
各ご提案を試してみました。
padding: 0 auto;　指定するのは既に試していたのですが、
max-widthを1000px以上に設定することにより
イメージ通りに出来ました。

本当に助かりました。
ありがとうございます！！！

Answer 2

こんばんは。

noteでは、marginをautoに指定していました。

単に中央揃えなのでしたら、margin: 0 auto;でいいかと

Comments

[AmanoEriko]

ご回答ありがとうございます！
参考にします