O Canada

加拿大风景如画的土地以枫叶、雪山、碧绿的湖泊和多伦多为特色。欣赏这个照片库展览中的景点，看看使用一些 MDX 魔法和顺风课程复制是多么容易。

由于我们使用 mdx，我们可以创建一个简单的响应式 Flexbox 网格来使用一些 Tailwind CSS 类来显示我们的图像

画廊

Maple

Lake

Mountains

Toronto

执行

<div className="-mx-2 flex flex-wrap overflow-hidden xl:-mx-2">
  <div className="my-1 w-full overflow-hidden px-2 xl:my-1 xl:w-1/2 xl:px-2">
    ![Maple](/static/images/canada/maple.jpg)
  </div>
  <div className="my-1 w-full overflow-hidden px-2 xl:my-1 xl:w-1/2 xl:px-2">
    ![Lake](/static/images/canada/lake.jpg)
  </div>
  <div className="my-1 w-full overflow-hidden px-2 xl:my-1 xl:w-1/2 xl:px-2">
    ![Mountains](/static/images/canada/mountains.jpg)
  </div>
  <div className="my-1 w-full overflow-hidden px-2 xl:my-1 xl:w-1/2 xl:px-2">
    ![Toronto](/static/images/canada/toronto.jpg)
  </div>
</div>

With MDX v2, one can interleave markdown in jsx as shown in the example code.

照片来源

Maple photo by Guillaume Jaillet on Unsplash

Mountains photo by John Lee on Unsplash

Lake photo by Tj Holowaychuk on Unsplash

Toronto photo by Matthew Henry on Unsplash