О Канада

О Канада

Живописные пейзажи Канады с кленовыми листьями, заснеженными горами, бирюзовыми озерами и Торонто. Насладитесь видами в этой фото-галерее и убедитесь, как легко повторить это с помощью MDX и классов Tailwind.

Изображения загружаются с использованием компонента next/image. Локально сохраненные изображения находятся в папке: /static/images/canada/[имя_файла].jpg

Используя MDX, мы можем создать простую адаптивную сетку для отображения изображений с помощью нескольких классов 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">
    ![Клен](/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">
    ![Озеро](/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">
    ![Горы](/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">
    ![Торонто](/static/images/canada/toronto.jpg)
  </div>
</div>

С MDX v2 можно встраивать разметку в JSX, как показано в примере кода.

Авторы фотографий

Фото кленового листа от Гийома Жайе на Unsplash

Фото гор от Джона Ли на Unsplash

Фото озера от ТиДжея Холловечука на Unsplash

Фото Торонто от Мэтью Генри на Unsplash