कोणीय सामग्री -md ग्रिड-सूची सामग्री

Question

मैं कोणीय material.The समस्या मैं का सामना करना पड़ रहा की md-grid-tile उपयोग करने के लिए कोशिश कर रहा हूँ md-grid-tile की सामग्री के प्रारंभ

से

<md-content layout-padding> 

     <md-grid-list md-cols="6" 
      md-row-height-gt-md="1:1" md-row-height="4:3" md-gutter-gt-md="16px" 
      md-gutter-gt-sm="8px" md-gutter="4px"> 
        <md-grid-tile 
        ng-repeat="room in floorDetails.roomDetails" 
        ng-style="{'background': '#f2f2f2'}" 
        md-colspan-gt-sm="3" 
        md-rowspan-gt-sm="2"> 



           <div layout="row" layout-align="center center"> 
           <b >Room1</b> 
           </div> 
           <div class='md-padding' layout="row" layout-wrap> 
             <md-card class="md-card" ng-repeat="bed in room.bedIds"> 
              <md-card-content> 

              </md-card-content> 
             </md-card> 
            </div> 
          </div> 
       </md-grid-tile>   
     </md-grid-list> 

यह काम करने के लिए center.How बनाने के लिए गठबंधन किया है वर्तमान तस्वीर

वांछित तस्वीर

Answer 1

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

आपको angular-material layout पर पढ़ना चाहिए। आप मुख्य रूप से के अंदर <div layout="column" layout-fill> कंटेनर खो रहे हैं। layout-fill कंटेनर पूरे टाइल भरता है।

फिर आप निश्चित कार्ड्स आकारों के साथ अपने कार्ड के आकार को समायोजित कर सकते हैं या उन्हें फ्लेक्स कर सकते हैं। उदाहरण उन्हें क्षैतिज रूप से फ्लेक्स करता है जो वांछित नहीं हो सकता है।

codepen