CODEWITHSUNDEEP
cssflexbox
Tudor Apostol
Tudor Apostol

Reputation: 131

Create space between flex children and grandchildren

Consider the following structure

<div class="parent" style="display: flex">
    <div class="child1"></div>
    <div class="child2" style="display: flex">
        <div class="grandchild1"></div>
        <div class="grandchild2"></div>
    </div>
</div>

Is it possible to create gutters ( margins ) between .child1 and .child2 and between .grandchild1 and .granchild2 ? Basically the final result should be 3 boxes next to each other with equal margins between them.

Upvotes: 1

Views: 574

Answers (2)

Danield
Danield

Reputation: 125473

So basically you want to display the grandchildren like the empty children. You can do this with the current markup with display: contents

Caniuse:

display: contents causes an element's children to appear as if they were direct children of the element's parent, ignoring the element itself. This can be useful when a wrapper element should be ignored when using CSS grid or similar layout techniques.

.parent {
  display: flex;
  justify-content: space-between;
}
.parent div {
  width: 30%;
  height: 100px;
  border: 5px solid tomato;
}
.child2 {
  display: contents;
}
<div class="parent">
  <div class="child1">child1</div>
  <div class="child2">
    <div class="grandchild1">grandchild1</div>
    <div class="grandchild2">grandchild2</div>
  </div>
</div>

NB: Currently display: contents isn't yet supported in Edge.

Upvotes: 1

Nitin Dhomse
Nitin Dhomse

Reputation: 2612

You could try with a css - margin (added common class "create-space") 

.create-space{
  margin-right : 20px;
  border: 5px solid green;
  }
<div class="parent" style="display: flex">
    <div class="child1 create-space">child1</div>
    <div class="child2" style="display: flex">
        <div class="grandchild1 create-space">grandchild1</div>
        <div class="grandchild2 create-space">grandchild2</div>
    </div>
</div>

Upvotes: 0

Related Questions