0

SLDS newbie here. Here's my html:

<template>
    <div class="slds-grid slds-wrap" >
        <div class="slds-col slds-card slds-size_1-of-4">
            <p>First column</p>
        </div>
        <div class="slds-col slds-card slds-size_1-of-4">
            <p>Second column</p>
        </div>
        <div class="slds-col slds-card slds-size_1-of-4">
            <p>Third column</p>
        </div>
        <div class="slds-col slds-card slds-size_1-of-4">
            <p>Fourth column</p>
        </div>
    </div>
</template>

This does nothing so the related js file is empty:

import { LightningElement } from 'lwc';

export default class SldsTest extends LightningElement {}

In Salesforce though, that first column sits higher than the others: "sldsTest" LWC showing 4 columns, the first being positioned higher that the others.

This happens with only 2 or 3 columns too. What am I doing wrong?

2 Answers 2

0

Please try to use lightning card instead of slds- card like below. It might help you to align columns horizontally in even manner.

    <template>
<div class="slds-grid slds-gutters">
    <lightning-card>
        <div class="slds-col slds-size_1-of-4 slds-align_absolute-center">
         <p>First column</p>
        </div>
    </lightning-card>

    <lightning-card>
        <div class="slds-col slds-size_1-of-4 slds-align_absolute-center">
         <p>Second column</p>
        </div>
    </lightning-card>

    <lightning-card>
        <div class="slds-col slds-size_1-of-4 slds-align_absolute-center">
         <p>Third column</p>
        </div>
    </lightning-card>

    <lightning-card>
    <div class="slds-col slds-size_1-of-4 slds-align_absolute-center">
      <p>Fourth column</p>
    </div>
    </lightning-card>
</div>
</template>

Below is the screenshot :- enter image description here

-1

Try this please, If this solves the issue please mark as best answer. Edit -- I didn't mention the reason for this, so I've added a slds-List_horizontal class which can be used to get elements in a horizontal line. Here's the ref -

<template>
<div class="slds-list_horizontal">
    <div class="slds-grid slds-wrap" >
        <div class="slds-col slds-card slds-size_1-of-4">
            <p>First column</p>
        </div>
        <div class="slds-col slds-card slds-size_1-of-4">
            <p>Second column</p>
        </div>
        <div class="slds-col slds-card slds-size_1-of-4">
            <p>Third column</p>
        </div>
        <div class="slds-col slds-card slds-size_1-of-4">
            <p>Fourth column</p>
        </div>
    </div>
</div>
</template>
1
  • A brief explanation of what changed would make this a better answer. It's not immediately obvious (at least to me) what changed.
    – sfdcfox
    Sep 28 at 11:23

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.