0

i would like to implement a grid for kind of eCommerce presentation . For that I need that all my cells in the grid have the same size but in every cells there is an image sometimes big sometimes small . how can i set one size for every cells ?

here is my code , a simple Lightning component with a grid

<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 slds-small-size--1-of-2 slds-medium-size--1-of-4 top-buffer" hight="100">
    <lightning:card title="Bosch PRR 250ES" footer="test"  >
        <img src="https://www.ledico.com/wp-content/uploads/2017/11/hmprr003-300x151.png "/>      
        <lightning:button label="Add" class=" slds-button_brand slds-align_absolute-center" iconName="utility:add"/>
    </lightning:card>
  </div>

  <div class=" hvr-grow slds-small-size--1-of-2 slds-medium-size--1-of-4 top-buffer" hight="100" >
    <lightning:card title="Bosch PRR 250ES" footer="test"  >
        <img src="https://www.ledico.com/wp-content/uploads/2017/10/123132-300x229.png"/>
        <lightning:button label="Add" class=" slds-button_brand slds-align_absolute-center" iconName="utility:add"/>
    </lightning:card>
  </div>

  <div class="slds-col slds-small-size--1-of-2 slds-medium-size--1-of-4 top-buffer" hight="50">
    <lightning:card title="Bosch PRR 250ES" footer="test"  >
        <img src="https://www.ledico.com/wp-content/uploads/2017/10/65-179x300.png" hight="50"/>
        <lightning:button label="Add" class=" slds-button_brand slds-align_absolute-center" iconName="utility:add"/>
    </lightning:card>
  </div>

  <div class="slds-col slds-small-size--1-of-2 slds-medium-size--1-of-4 top-buffer">
    <lightning:card title="Bosch PRR 250ES"  >
        <img src="https://www.ledico.com/wp-content/uploads/2017/07/SPO3647323-300x300.jpg"/>
        <lightning:button label="Add" class=" slds-button_brand slds-align_absolute-center" iconName="utility:add"/>
    </lightning:card>
  </div>

  <div class="slds-col slds-small-size--1-of-2 slds-medium-size--1-of-4 top-buffer">
    <lightning:card title="Bosch PRR 250ES"  >
        <img src="https://www.ledico.com/wp-content/uploads/2017/08/p_k_gas_35_l_sfcplus_dynamik_v02_o_zubehoer-267x300.png"/>
        <lightning:button label="Add" class=" slds-button_brand slds-align_absolute-center" iconName="utility:add"/>
    </lightning:card>
  </div>
</div>

</lightning:layout>
</aura:component>
  • 1
    Hello Raphael, welcome to SFSE. To get a better support, please refer to the guide How do I ask a good question?. Also right now the question is quite open ended, would be nice if you could edit your question and provide proper details along with some code. – Raul Mar 11 at 16:13
-2

You can apply slds class to that cell and it will be displaying in iterative manner. Try by adding below style to your cell -

class="slds-col slds-size_1-of-12"  //Set size according to device.

All items will be take equal width.

  • 1
    -1 for not providing some solution to problem which is not clear. a lot of things are possible with CSS, start closer to standard SLDS is better. – Raul Mar 11 at 16:10

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.