1

I can't seem to achieve what I am looking for.

I basically want to have a slds-grid container that will create evenly spaced child <div> containers (slds-col ?) and not shrink or grow depending upon the content inside it. Basically if I had 3 <div> inside the slds-grid container, each width should be 33.3% And if one column had a large Lorem Ipsum block and the others don't, it should wrap and not grow outside of its <div> container.

I know I can specify a size class that will limit the size, but I was hoping that something in CSS will just calculate the space evenly without specifying a size.

I have read through the Lightning Design System Grid Utility but I don't know the right combination.

EDIT:

Just want to thank @Rohit for working with me on this.

This is what ended up working:

<div class="slds-grid">
    <div class="slds-has-flexi-truncate">
    </div>
    ...N Rows of this
</div>

1 Answer 1

0

I tried this scenario. If we use slds-size_x-of-y , we can restrict the div width as needed without using the width css property.

In below example , I used slds-size_1-of-3 for restricting each div width to 1/3rd of parent div. Below is the HTML for the same :

<div class="slds-grid">
  <div class="slds-size_1-of-3 div-border">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  </div>
  <div class="slds-size_1-of-3 div-border">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  </div>
  <div class="slds-size_1-of-3 div-border">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  </div>
</div>

Here , as we can see the middle div has more content which gets wrapped around.

Also , used below border proeprty for checking the width visually :

.div-border {
  border: 1px solid red;
}

Link for slds sizing classes : https://www.lightningdesignsystem.com/utilities/sizing/

Screenshot of the UI : enter image description here

Approach 2 : Let us consider that the number of divs are dynamic. In this case we need to use flex-box properties as below. The key to having fixed width is to control 3 flex properties(Copied from MDN) :

  • flex-grow: How much of the positive free space does this item get?
  • flex-shrink: How much negative free space can be removed from this item?
  • flex-basis: What is the size of the item before growing and
    shrinking happens?

For addressing our use case , we need to prevent the content from growing or shrinking and size after growing or shrinking. Here , we will use short hand flex property & set above 3 properties as :

flex: 1 1 0;// This effectively means to keep the width fixed and do not grow or shrink.

More on flex & its siblings :

  1. https://developer.mozilla.org/en-US/docs/Web/CSS/flex
  2. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax

HTML code :(With 4 divs but we can have any number of divs now)

<div class="slds-grid">
  <div class="fixed-width">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  </div>
  <div class="fixed-width">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  </div>
  <div class="fixed-width">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  </div>
  <div class="fixed-width">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  </div>
</div>

css class :

.fixed-width {
  border: 1px solid red;
  flex: 1 1 0;
}

Screenshot : enter image description here

8
  • @Bryan , Even if you go with flex-box css , slds-size classes internally use the same. So , there is not much value in using flex-box layout since slds offers us the same output with no custom css.
    – Rohit
    Commented Mar 10, 2023 at 4:14
  • I was hoping to avoid explicitly setting a size as described in my original post Commented Mar 10, 2023 at 12:26
  • ok , somewhere you would need to set width , if not a number then using a flex-box layout.
    – Rohit
    Commented Mar 10, 2023 at 12:30
  • When you say use flex-box layout, is that not what the slds grid system is essentially? Commented Mar 10, 2023 at 12:49
  • Yes , My first comment stated the same. slds-grid is just a wrapper over flex-box.
    – Rohit
    Commented Mar 10, 2023 at 12:59

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .