LWC Layout items not getting aligned

Question

I need advise; from LWC Customer community form is getting displayed. The problem in facing is when I add new button, the form is not getting aligned in the centre.

The code is:

<template>
<div class="slds-align_absolute-center slds-wrap" style = "margin-left:-30px;"> 
    <template if:true={menuList.data}>
        <lightning-layout  multiple-rows vertical-align="center" >               
            <template for:each={menuList.data} for:item="menu">   
                <lightning-layout-item  key={menu} 
                                        alignment-bump="right"  
                                        flexibility="auto" 
                                        class="slds-m-bottom_large slds-m-left_large">
                  <div class={menu.MasterLabel}>                             
                  <c-tagetik-experience-menu-item
                        key={menu}  
                        masterlabel={menu.MasterLabel}
                        pageurl={menu.ImageURL__c}
                        imageurl={menu.ImageURL__c}
                        imageid={menu.Id}
                        svgdetail ={menu.SVGDetails__c}
                        menulabel ={menu.MenuLabel__c} 
                    >
                  </c-tagetik-experience-menu-item>
                  </div>
                    </lightning-layout-item>
            </template>          
    </lightning-layout>      
    </template>
</div>  
<template if:true={menuList.error}>
    {menuList.error}
</template>

enter image description here

But if I change to

<lightning-layout-item key={menu}

                                        class="slds-size_4-of-12 slds-m-top_x-large slds-p-left_x-large">
                  <div class={menu.MasterLabel}>                             
                  <c-tagetik-experience-menu-item
                        key={menu}  
                        masterlabel={menu.MasterLabel}
                        pageurl={menu.ImageURL__c}
                        imageurl={menu.ImageURL__c}
                        imageid={menu.Id}
                        svgdetail ={menu.SVGDetails__c}
                        menulabel ={menu.MenuLabel__c} 
                    >
                  </c-tagetik-experience-menu-item>
                  </div>
                    </lightning-layout-item>

I'm getting the proper result. but the screen is not responsive and displayed 3 forms in all of the screen formats.

Can anyone guide me how to make the screen responsive and the form to get aligned?

Answer 1

Have you seen https://www.lightningdesignsystem.com/utilities/grid/#Creating-Responsive-Layouts ? it contains CSS classes to use for phone/tablet/desktop. You could use these to make it occupy "1 of 3" (4 of 12, whatever you want) when large (desktop) but "1 of 1" on phone and tablet.