[SalesForce] Align lwc made with Grid – Lightning Design System

enter image description here

enter image description here

Can anyone guide me on how to align columns and rows?

<template>

<lightning-card  title="Opening hours">

    <!-- Monday -->   

    <div class="slds-grid slds-no-flex">
        <div class="slds-size_1-of-16">
            <div class="slds-box slds-box_x-small slds-text-align_center slds-m-around_x-small"> 
                <lightning-badge label="Monday   :"></lightning-badge>
            </div>
        </div>
        <div class="slds-size_1-of-16">
            <div class="slds-box slds-box_x-small slds-text-align_center slds-m-around_x-small">
                <lightning-input type="time"></lightning-input>
            </div>
        </div>
        <div class="slds-size_1-of-16">
            <div class="slds-box slds-box_x-small slds-text-align_center slds-m-around_x-small">
                <lightning-input type="time"></lightning-input>
            </div>
        </div>
        <div class="slds-size_1-of-16">
            <div class="slds-box slds-box_x-small slds-text-align_center slds-m-around_x-small">
                <lightning-input type="toggle" message-toggle-active="Open" message-toggle-inactive="Close" checked></lightning-input>
            </div>
        </div>
    </div>
    <br></br>

    <!-- Tuesday -->   

    <div class="slds-grid slds-no-flex">
        <div class="slds-size_1-of-16">
            <div class="slds-box slds-box_x-small slds-text-align_center slds-m-around_x-small">
                <lightning-badge label="Tuesday:"></lightning-badge>
            </div>
        </div>
        <div class="slds-size_1-of-16">
            <div class="slds-box slds-box_x-small slds-text-align_center slds-m-around_x-small">
                <lightning-input type="time"></lightning-input>
            </div>
        </div>
        <div class="slds-size_1-of-16">
            <div class="slds-box slds-box_x-small slds-text-align_center slds-m-around_x-small">
                <lightning-input type="time"></lightning-input>
            </div>
        </div>
        <div class="slds-size_1-of-16">
            <div class="slds-box slds-box_x-small slds-text-align_center slds-m-around_x-small">
                <lightning-input type="toggle" message-toggle-active="Open" message-toggle-inactive="Close" checked></lightning-input>
            </div>
        </div>
    </div>

Best Answer

I think you are using incorrect classes for column sizing. The slds grid is a 12 column grid, not 16. You need to divide the viewport into 4 division. It can be 3,3,3,3 or 2,4,4,2 or anything else.

Based on that you can fix the slds col classes.

Also in your lightning:input, if you do not want to show the label, use the variant="label-hidden"

<div class="slds-grid slds-no-flex">
        <div class="slds-col slds-size_2-of-12">
            <div class="slds-box slds-box_x-small slds-text-align_center slds-m-around_x-small"> 
                <lightning-badge label="Monday   :"></lightning-badge>
            </div>
        </div>
        <div class="slds-col slds-size_4-of-12">
            <div class="slds-box slds-box_x-small slds-text-align_center slds-m-around_x-small">
                <lightning-input type="time"></lightning-input>
            </div>
        </div>
        <div class="slds-col slds-size_4-of-12">
            <div class="slds-box slds-box_x-small slds-text-align_center slds-m-around_x-small">
                <lightning-input type="time"></lightning-input>
            </div>
        </div>
        <div class="slds-col slds-size_2-of-12">
            <div class="slds-box slds-box_x-small slds-text-align_center slds-m-around_x-small">
                <lightning-input type="toggle" message-toggle-active="Open" message-toggle-inactive="Close" checked></lightning-input>
            </div>
        </div>
    </div>

You can also utilize lightning:layout for this.

Related Topic