-2

So I want to make a structure something similar to this:

<div style={{height: "100vh"}}>
  <div style={{height: "auto"}}>{content}</div>
  <div style={{height: "auto"}}>{content}</div>
  <div style={{height: "auto"}}>{content}</div>
</div>

For example, I have a 100% width and height in vh div and have 3 children inside displayed as columns, I want automatically the 3 divs to take size 33.3333% but in a perfect way.

recabos710
  • 59
  • 1
  • 8

1 Answers1

0

Grid

You can set the amount of columns and the width for each one with grid-template-columns. In this case we repeat 3 times 1fr, 1fr means one fraction of the total, in this case 1fr = 1 / 3.

.parent {
  border: 1px solid red;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  min-width: 100vh;
}

.child {
  border: 1px solid blue;
}
<div class="parent">
  <div class="child">Content</div>
  <div class="child">Content</div>
  <div class="child">Content</div>
</div>

Flex

Here, as you want to force the 1/3 width, make the child items to grow with flex-grow: 1. No style is needed to make the columns because it's the default flow for flex.

.parent {
  border: 1px solid red;
  display: flex;
  min-width: 100vh;
}

.child {
  border: 1px solid blue;
  flex-grow: 1;
}
<div class="parent">
  <div class="child">Content</div>
  <div class="child">Content</div>
  <div class="child">Content</div>
</div>
Leo
  • 849
  • 7
  • 20