gridレイアウトを実装

レスポンシブ対応のgridレイアウトを実装したので備忘録を兼ねて掲載致します。2カラムと3カラムのレイアウトを作成しました。それと、2カラムで左のカラムに右のカラムが重なるレイアウトも実装しています。コードはコピペできるようにしていますのでご自由にお使いください。

HTML【2カラム】

<sction class="contents">
    <div class="example_left">
       <img src="images/example.jpg" alt="イメージ">
    </div>
   <div class="example_right">
	<img src="images/example.jpg" alt="イメージ">
   </div>
</sction> 

CSS

.contents {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 20px;
  margin-bottom: 60px;

}

.example_left {
  background-color: #eee;
  padding: 10px;
}
.example_left img {
  max-width: 100%;
  height: auto;
}
.example_right {
  background-color: #ddd;
  padding: 10px;
}
.example_right img {
  max-width: 100%;
  height: auto;
}
@media screen and (max-width: 999px) {
  .contents {
    grid-template-columns: 1fr;
    width: 100%;
    max-width: 100%;
    height: auto;
  }
  .example_left img {
    width: 100%;
    max-width: none;
  }
}

HTML【3カラム】

<article class="grid">
    <sction class="contents_three">
       <div class="example_left">
         <img src="images/example.jpg" alt="イメージ">
       </div>
       <div class="example_center">
         <img src="images/example.jpg" alt="イメージ">
       </div>
       <div class="example_right">
         <img src="images/example.jpg" alt="イメージ">
       </div>
    </sction>
</article>

CSS

.grid {
  display: grid;
  width: 100%;
  max-width: 100%;
}

.contents_three {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px;
}

.example_left, .example_center, .example_right {
  background-color: #eee;
  padding: 10px;
}

.example_left img, .example_center img, .example_right img {
  max-width: 100%;
  height: auto;
}

@media screen and (max-width: 999px) {
  .contents_three {
    grid-template-columns: 1fr;
    grid-row-gap: 20px;
  }

  .example_left, .example_center, .example_right {
    margin: 0;
  }
}

HTML【左カラムに右カラムが重なる】

<sction class="contents_fix">
		<div class="example_left_over">
			<img src="images/example.jpg" alt="イメージ">
		</div>
		<div class="example_right_over">
			<p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。</p>
		</div>
</sction> 

.contents_fix {
  display: grid;
  grid-template-columns: 650px 780px;
  grid-template-areas: "left right";
}

.example_left_over {
  grid-area: left;
  background-color: #eee;
  padding: 10px;
  position: relative;
}

.example_left_over img {
  max-width: 100%;
  height: auto;
}

.example_right_over {
  grid-area: right;
  background-color: #eee;
  opacity: 0.5;
  padding: 10px;
  position: relative;
  top: 100px;
  right: 150px;
  height:  200px;

}

.example_right_over img {
  max-width: 100%;
  height: auto;
}

@media (max-width: 999px) {
  .contents_fix {
    grid-template-columns: 1fr;
    grid-template-areas: "left" "right";
  }

  .example_right_over {
    position: relative;
    top: 0;
    right: 0;
    margin-top: -50px;
  }
}