CODEWITHSUNDEEP
htmlcss
jeff
jeff

Reputation: 1020

Equal columns inside a div

Here below, I have a main DIV inside of which, three child div is present. My objective is to let the child divs equally share and fill up the height of the parent container. Additionally, I would like to add the fourth div so, that it will again occupy the equal and shared height of the parent container.

Is it possible that I could simply add a containers (children) div inside the parent with a class name, so that it dynamically choose the height.

Thanks 

.main_parent{
  background-color:red;
  height:300px;
  width: 200px;
}

.child1{
  background-color: blue;
  height: 30%;
}

.child2{
  background-color: green;
  height: 30%;
}

.child3{
  background-color: black;
  height: 30%;
}
<div class="main_parent">
  <div class = "child1"></div>
  <div class = "child2"></div>
  <div class = "child3"></div>
</div>

Upvotes: 0

Views: 57

Answers (3)

omukiguy
omukiguy

Reputation: 1437

You can use CSS Grid or flex box.

Option 1: Flexbox

.main_parent{
  box-sizing: border-box;
  display: flex;
}

.child {
  /*Flex-basis works as width percentages so for 4 use 25% and 3 -> 33% */
  flex-basis: 25%;
  /*You can remove the height when content is added./
  height: 100px;
}

.child1{
  background-color: blue;
}

.child2{
  background-color: green;
}

.child3{
  background-color: black;
}
<div class="main_parent">
  <div class="child child1"></div>
  <div class="child child2"></div>
  <div class="child child3"></div>
</div>

Option 2: CSS Grid

.main_parent{
  display: grid;
  height: 200px;
}

.child1{
  background-color: blue;
}

.child2{
  background-color: green;
}

.child3{
  background-color: black;
}

/*Sample for reponsiveness - screen above 520px*/
@media screen and (min-width: 520px) {
  .main_parent{
      /* change the value 4 to whatever amount of columns preferred. 1fr unit will always use the remaining space. On mobile the screen does a full width for each column*/
    grid-template-columns: repeat(4, 1fr);
    height: 200px;
  }
}
<div class="main_parent">
  <div class="child1"></div>
  <div class="child2"></div>
  <div class="child3"></div>
</div>

Upvotes: 2

Alexander Nied
Alexander Nied

Reputation: 13623

To accomplish this with flex you set the parent to display: flex, flex-direction: column and align-items: stretch. The it is a matter of making sure the children all have a flex-grow value of 1 (I accomplished this with the shorthand but you can be more explicit.

.main_parent{
  background-color:red;
  height:300px;
  width: 200px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.main_parent > div {
  flex: 1;
}

.child1{
  background-color: blue;
}

.child2{
  background-color: green;
}

.child3{
  background-color: black;
}
<div class="main_parent">
  <div class = "child1"></div>
  <div class = "child2"></div>
  <div class = "child3"></div>
</div>

Now you can add any number of children and they will simply continue to take up the total parent space.

.main_parent{
  background-color:red;
  height:300px;
  width: 200px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.main_parent > div {
  flex: 1;
}

.child1{
  background-color: blue;
}

.child2{
  background-color: green;
}

.child3{
  background-color: black;
}

.child4 {
  background-color: purple;
}

.child5 {
  background-color: pink;
}
<div class="main_parent">
  <div class = "child1"></div>
  <div class = "child2"></div>
  <div class = "child3"></div>
  <div class="child4"></div>
  <div child="class5"></div>
</div>

CSS-Tricks has a great introduction/cheat sheet on flexbox.

Upvotes: 1

Shrey Kejriwal
Shrey Kejriwal

Reputation: 736

Check the below working code...

<div style="height: 500px; background-color:blue; display: flex; flex-direction: column">
    <div style="background-color:yellow; flex-grow: 1"></div>
    <div style="background-color:orange; flex-grow: 1"></div>
    <div style="background-color:red; flex-grow: 1"></div>
  </div>

Upvotes: 0

Related Questions