ग्रिड

Question

पर आयनिक 3 ऑटो समायोजन लेआउट मैंने आयन-ग्रिड और केवल एक आयन-पंक्ति का उपयोग करके एक डैशबोर्ड बनाया है। आयन-पंक्ति में 10-12 आयन-कोल होता है। तो मूल रूप से, जैसे ही स्क्रीन चौड़ाई मारा जाता है, कॉलम बहने लगते हैं।

यह सब अच्छा और अपेक्षित है। हालांकि, समस्या तब शुरू होती है जब ये कॉलम अलग-अलग चौड़ाई और ऊंचाई के होते हैं। मैंने 3 चौड़ाई प्रकारों के रंग को परिभाषित किया है: 200 पीएक्स, 400 पीएक्स और 600 पीएक्स। ऊंचाई 3 भिन्नता 200px, 400px और 600px भी है। तो कुल मिलाकर प्रत्येक कॉल या तो 1 * 1, 2 * 1, 1 * 2, 2 * 2, 3 * 1 और 3 * 2 आकार हो सकता है।

मैं वांछित के रूप में लेआउट समायोजित करने के लिए शीर्षक खींचने और ड्रॉप करने में सक्षम होने के लिए ड्रैगूला का उपयोग कर रहा हूं। हालांकि, प्रारंभिक लेआउट हमेशा कुछ छेदों के साथ प्रस्तुत करता है हालांकि उन्हें मैन्युअल ड्रैग ड्रॉप द्वारा भर दिया जा सकता है।

तो, क्या सही तरीके से प्रारंभिक समय में इसे संभाल करने के लिए लेआउट में छेद से बचने के लिए किया जाना चाहिए।

Answer 1

आप शायद सीएसएस फ्लेक्स बढ़ने का उपयोग कर सकते हैं। प्रत्येक स्तंभ उपयोग फ्लेक्स उनके आकार को परिभाषित करने के लिए विकसित करने के लिए के रूप में

.row { 
    display: flex; 
    justify-content: center; 
    align-items: center 
} 

प्रत्येक पंक्ति के लिए एक माता पिता div और सीएसएस सेट का उपयोग करें।

उदाहरण के लिए। फ्लेक्स बढ़ने: 1 - सामान्य के लिए, फ्लेक्स-बढ़ने: 2 बड़ा चौड़ाई के लिए।

यहां मैंने जो किया है उससे जुड़ा हुआ है। मेरे मामले में, कॉलम संख्या गतिशील होनी चाहिए, लेकिन इसके साथ ही होना चाहिए।