# 50: गैलरी ग्रिड का निर्माण - सीएसएस-ट्रिक्स

Anonim

हम गैलरी क्षेत्र के लेआउट में खुदाई करना शुरू करते हैं, जो कि कुछ ऐसा है जो इस रीडिज़ाइन प्रक्रिया की शुरुआत के बाद से मेरे दिमाग में है। ज्यादातर क्योंकि ... v9 थोड़े में गैलरी चूसा। हम इस बार बेहतर करने जा रहे हैं।

हम गैलरी लेआउट और कुछ नहीं बनाने जा रहे हैं, लेकिन छवियों का एक बड़ा ग्रिड। यही कारण है कि अन्य दीर्घाओं कि ब्राउज़ करने के लिए एक खुशी है तो यह इस तरह से भी होना चाहिए। दूसरे शब्दों में: कोई साइडबार, अधिक छवियां।

हम कुछ समय पहले किए गए सहज उत्तरदायी फोटो ग्रिड लेख पर लेआउट को आधार बनाते हैं। अनिवार्य रूप से हम छवियों को इनलाइन-ब्लॉक के रूप में एक माता-पिता में गिरने देते हैं जो CSS3 कॉलम का उपयोग करते हैं। सौभाग्य से, कम्पास के पास इसे और भी आसान बनाने के लिए कुछ सहायक हैं। गटर को कॉलम रिक्ति और निचले मार्जिन के माध्यम से बनाया जाता है।

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