LWC Layout items not getting aligned - salesforce

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.