在Xaringan中创建图像网格

---
output:
  xaringan::moon_reader:
    css: [default, metropolis, metropolis-fonts]
    lib_dir: libs
    nature:
      highlightStyle: github
---

<div class="grid-container">
  <div class="grid-item">
    <img src="image1.jpg" alt="Image 1">
  </div>
  <div class="grid-item">
    <img src="image2.jpg" alt="Image 2">
  </div>
  <div class="grid-item">
    <img src="image3.jpg" alt="Image 3">
  </div>
  <div class="grid-item">
    <img src="image4.jpg" alt="Image 4">
  </div>
  <div class="grid-item">
    <img src="image5.jpg" alt="Image 5">
  </div>
  <div class="grid-item">
    <img src="image6.jpg" alt="Image 6">
  </div>
  <div class="grid-item">
    <img src="image7.jpg" alt="Image 7">
  </div>
  <div class="grid-item">
    <img src="image8.jpg" alt="Image 8">
  </div>
  <div class="grid-item">
    <img src="image9.jpg" alt="Image 9">
  </div>
</div>

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

.grid-item {
  border: 1px solid #ccc;
  padding: 10px;
  text-align: center;
}