0

In essence I am trying to achieve LDS Column Nesting but with child components inside of a parent component.

I am trying to have the child components, of the parent's, stretch out to the their size_4-of-12 three divs that stretch out across the whole screen given that the parent component is holding their size_1-of-1 so that way the component can freely stretch out across the whole grid. However when I am implementing this, I am not able to have the size_4-of-12 appear properly from the child components. It instead goes underneath one another like going down a flight of stairs with their placements. If I have the parent's component have only one size_4-of-12 on a child's component styling inside the parent's component html and no grid styling inside of the child component's html then it will go across as that given area.

Parent HTML:

<div class="slds-grid slds-wrap">
  <div class="slds-col slds-size_10-of-12">
    <span>parent component</span>
  </div>
  <div class="slds-col slds-grid slds-size_1-of-1">
    <div class="slds-col slds-size_1-of-2">
      <span>Child component 1, with 3 stretched 4 divs</span>
      <c-child-component-1>
      </c-child-component-1>
    </div>
    <div class="slds-col slds-size_1-of-1">
      <span>child component 2, with 3 stretched 4 divs</span>
      <c-child-component-2>
      </c-child-component-2>
    </div>
  </div>
</div>

Child Component 1 HTML:

<div class="slds-col slds-size_4-of-12">
    <span>4</span>
  </div>
  <div class="slds-col slds-size_4-of-12">
    <span>4</span>
  </div>
  <div class="slds-col slds-size_4-of-12">
    <span>4</span>
  </div>

Child Component 2 HTML:

<div class="slds-col slds-size_4-of-12">
    <span>4</span>
  </div>
  <div class="slds-col slds-size_4-of-12">
    <span>4</span>
  </div>
  <div class="slds-col slds-size_4-of-12">
    <span>4</span>
  </div>

1 Answer 1

1

Notice in the documentation example of Column Nesting they do the following

<div class="slds-grid slds-wrap"> <!-- slds grid wrapped around all -->
    <div class="slds-col slds-size_10-of-12">
        <span>1</span>
    </div>
    <div class="slds-col slds-grid slds-size_1-of-2"> <!-- slds grid again for nested -->
        <div class="slds-col slds-size_1-of-2">
            <span>Nested: 1</span>
        </div>
        <div class="slds-col slds-size_1-of-2">
            <span>Nested: 2</span>
        </div>
    </div>
</div>

You need to initialize another grid in each of your child components to achieve your nested functionality

<template>
  <div class="slds-grid">
    <div class="slds-col slds-size_4-of-12">
      <span>4</span>
    </div>
    <div class="slds-col slds-size_4-of-12">
      <span>4</span>
    </div>
    <div class="slds-col slds-size_4-of-12">
      <span>4</span>
    </div>
  </div>
</template>

In your parent html, you seem to have a different sizing for each child component (slds-size_1-of-2 vs. slds-size_1-of-1). I presume you wanted both to have half the space to equal the full width.

See example playground of how it looks

1
  • This was the solution, took a lot more playing around with different components and more embedding of child components. But this got me to that point, thank you! Aug 27, 2021 at 18:37

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.