human
CSSコードを教えて、グリッドを使用して画像ギャラリーを作成してください。
gpt
もちろんです！CSSの "grid "プロパティを使用して画像ギャラリーを作成するためのCSSサンプルコードです：


```
.container {
  display: grid；
  grid-template-columns: repeat(3, 1fr)；
  grid-gap: 20px；
}

.item {
  position: relative；
}

.item img {
  width: 100%；
  height: auto；
  display: block；
}

.item .overlay {
  position: absolute；
  top: 0；
  left: 0；
  width: 100%；
  height: 100%；
  background: rgba(0, 0, 0, 0, 0.5)；
  opacity: 0；
  transition: opacity 0.5s；
}

.item:hover .overlay {
  opacity: 1；
}

.item .text {
  position: absolute；
  top: 50%；
  left: 50%；
  transform: translate(-50%, -50%)；
  color: white；
  text-align: center；
  font-size: 24px；
  font-weight: bold；
}
```

この例では、"container "クラスを作成し、"grid "プロパティを使用して、3つの列と各列の間に20ピクセルのスペースを持つ画像のグリッドを作成しています。

各画像は "item "クラスの要素内に配置され、その中には画像と、ユーザーがマウスを画像の上に置いたときに表示されるオーバーレイ要素が含まれています。

また、各画像の中央には、"text "クラスを使ってテキスト要素が含まれています。

これをHTMLで試してみたい場合は、CSSを追加またはリンクした後、次のように画像を本文に追加してください：


<div class="container">
  <div class="item">
	<img src="image1.jpg" alt="画像1" />のようにします。
	<div class="overlay"></div> <div class="text">画像1.jpg。
	<div class="text">画像1</div> /> <div class="overlay"></div
  </div
  <div class="item">画像1
	<img src="image2.jpg" alt="画像2" /></img
	<div class="overlay"></div>
	<div class="text">画像2</div> </div> <div class="text">画像2</div> </div
  </div
  <div class="item">画像2
	<img src="image3.jpg" alt="画像3" /></img
	<div class="overlay"></div>
	<div class="text">画像3</div> </div> <div class="text">画像3</div> </div
  </div> </div
</div


CSS Gridを使って独自の画像ギャラリーを作成する際の参考になれば幸いです。