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! Commented Aug 27, 2021 at 18:37

You must log in to answer this question.

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