कनाडा के सुंदर परिदृश्य जिनमें मेपल के पत्ते, बर्फ से ढके पहाड़, फ़िरोज़ी झीलें और टोरंटो शामिल हैं। इस फोटो गैलरी प्रदर्शनी में नज़ारों का आनंद लें और देखें कि कुछ एमडीएक्स जादू और टेलविंड क्लास के साथ इसे दोहराना कितना आसान है।

द्वारा सर्व की गई छवियां next/image घटक। स्थानीय रूप से संग्रहीत छवियां निम्नलिखित पथ वाले फ़ोल्डर में स्थित हैं: /static/images/canada/[filename].jpg

चूंकि हम एमडीएक्स का उपयोग कर रहे हैं, हम कुछ टेलविंड सीएसएस क्लास के साथ अपनी छवियों को प्रदर्शित करने के लिए एक साधारण रिस्पॉन्सिव फ्लेक्सबॉक्स ग्रिड बना सकते हैं।

गैलरी

कार्यान्वयन

<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">
    ![मेपल](/स्थिर/छवियाँ/कनाडा/मेपल.jpg)
  </डिव>
  <div className="my-1 w-full overflow-hidden px-2 xl:my-1 xl:w-1/2 xl:px-2">
    ![झील](/स्थिर/छवियाँ/कनाडा/झील.jpg)
  </डिव>
  <div className="my-1 w-full overflow-hidden px-2 xl:my-1 xl:w-1/2 xl:px-2">
    ![पहाड़](/स्थिर/छवियाँ/कनाडा/पहाड़.jpg)
  </डिव>
  <div className="my-1 w-full overflow-hidden px-2 xl:my-1 xl:w-1/2 xl:px-2">
    ![टोरंटो](/स्थिर/छवियाँ/कनाडा/टोरंटो.jpg)
  </डिव>
</डिव>

एमडीएक्स v2 के साथ, कोई भी उदाहरण कोड में दिखाए अनुसार जेएसएक्स में मार्कडाउन को इंटरलीव कर सकता है।

फोटो क्रेडिट