0

In the simple bellow grid I would like to separate colons with a small blank.For this i use the class slds-gutters on the grid. The problem is that it also put a blank after the last column of the row and the grid not symetric.

enter image description here .CMP:

<aura:component implements="flexipage:availableForAllPageTypes" access="global" >
<lightning:layout class="slds-page-header ">

<div class="slds-grid  slds-gutters slds-wrap slds-size_1-of-1 ">

  <div class="slds-col hvr-grow  slds-small-size--1-of-2 slds-medium-size--1-of-3 slds-large-size--1-of-4 top-buffer" higth="200">
    <lightning:card title="" footer="Bosch PRR 250ES"  >
        <img src="{!$Resource.ledico1}"/>      
            <lightning:button label="add" class=" slds-button_brand slds-align_absolute-center" iconName="utility:add"/>
    </lightning:card>
  </div>

  <div class="slds-col hvr-grow  slds-small-size--1-of-2 slds-medium-size--1-of-3 slds-large-size--1-of-4 top-buffer"  >
        <lightning:card title="" footer="Bosch PRR 250ES"  >
            <img src="{!$Resource.ledico2}"/>
        <lightning:button label="add" class=" slds-button_brand slds-align_absolute-center" iconName="utility:add"/>
    </lightning:card>
  </div>

  <div class="slds-col hvr-grow  slds-small-size--1-of-2 slds-medium-size--1-of-3 slds-large-size--1-of-4 top-buffer">
    <lightning:card title="" footer="Bosch PRR 250ES"  >
        <img src="{!$Resource.ledico3}"/>
    <lightning:button label="add" class=" slds-button_brand slds-align_absolute-center" iconName="utility:add"/>

    </lightning:card>
  </div>

  <div class="slds-col hvr-grow  slds-small-size--1-of-2 slds-medium-size--1-of-3 slds-large-size--1-of-4 top-buffer">
    <lightning:card title="" footer="Bosch PRR 250ES"  >
        <img src="{!$Resource.ledico4}" />
       <lightning:button label="add" class=" slds-button_brand slds-align_absolute-center" iconName="utility:add"/>
    </lightning:card>
  </div>

  <div class="slds-col hvr-grow  slds-small-size--1-of-2 slds-medium-size--1-of-3 slds-large-size--1-of-4 top-buffer">
    <lightning:card title="" footer="Bosch PRR 250ES"   >
        <img src="{!$Resource.ledico5}"/>
     <lightning:button label="add" class=" slds-button_brand slds-align_absolute-center" iconName="utility:add"/>
    </lightning:card>
  </div>

  <div class="slds-col hvr-grow  slds-small-size--1-of-2 slds-medium-size--1-of-3 slds-large-size--1-of-4 top-buffer">
    <lightning:card title="" footer="Bosch PRR 250ES" >
      <img src="{!$Resource.ledico6}"/>
     <lightning:button label="add" class=" slds-button_brand slds-align_absolute-center" iconName="utility:add"/>


    </lightning:card>
      </div>

      <div class="slds-col hvr-grow  slds-small-size--1-of-2 slds-medium-size--1-of-3 slds-large-size--1-of-4 top-buffer">
        <lightning:card title="" footer="רול ליטוש בוש Bosch PRR 250ES" >
          <img src="{!$Resource.ledico7}"/>
         <lightning:button label="הוסף לסל" class=" slds-button_brand slds-align_absolute-center" iconName="utility:add"/>
        </lightning:card>
      </div>

   </div>

</lightning:layout>

What should i do to fix that ?

  • I'd recommend using lightning:layout and lightning:layoutItem instead of manual CSS as much as possible. You have several outdated styles that may be causing issues. – sfdcfox Mar 14 at 15:10

Your Answer

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

Browse other questions tagged or ask your own question.