0

How to split a div into children with the same height and width based on the parent's height and width when the view changes (phone, tablet, desktop etc)?

It's similar to this question but I hope there're other solutions (using bootstrap cards or material design) than using table.

E.g.

  • 2 main cols: A & B, each is half the screen width. They're the parents. Each parent has 10 children,
  • Parent height: 500px -> 10 children, height: 50px
  • Parent height: 1000px -> 10 children, height: 100px
Salman A
  • 262,204
  • 82
  • 430
  • 521
Viet
  • 6,513
  • 12
  • 42
  • 74

3 Answers3

3

You can use display: flex

Basically, this allows you to tell child elements how much height/width it can take up.

In the snippet below, we have 3 children. We can assign a flex to each child.

The flex for each child means how much of its parent should that particular child take up. In my example they all have a flex of 1 meaning that they each take up 1/3 of the parent's height.

Child1 - 1

Child2 - 1

Child3 - 1

However if we had something like this:

Child1 - 1

Child2 - 2

Child3 - 3

Then we have something different. In this case, Child1 is taking up 1/6 of the parent's height, Child2 is taking up 2/6 (1/3) of the parent's height, and Child3 is taking up 3/6 (1/2) of the parent's height. This is basically how flex works.

Lastly, flex has a default direction, meaning that it automatically will fill the width (rows) based on the flex values, not the height (columns). So to tell flex to display in columns you need to use flex-direction: column; to order/"squish" by height.

.parent {
  width: 200px;
  height: 180px;
  display: flex;
  flex-direction: column;
}

.child1 {
  background: red;
  width: 100%;
  flex: 1; /* says to take up 1/3 of the parents height (so 60px) */
}

.child2 {
  background: green;
  width: 100%;
  flex: 1; /* says to take up 1/3 of the parents height (so 60px) */
}

.child3 {
  background: blue;
  width: 100%;
  flex: 1; /* says to take up 1/3 of the parents height (so 60px) */
}
<div class="parent">
  <div class="child1"></div>
  <div class="child2"></div>
  <div class="child3"></div>
</div>
Nick Parsons
  • 45,728
  • 6
  • 46
  • 64
1

Set an explicit height (100vh) on the container and use Flexbox layout to create columns with equal-height rows:

body {
  margin: 0;
}
#wrapper {
  display: flex;
  flex-direction: row;
}
.col {
  width: 50%;
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.col > div {
  flex: 1;
}
.col > div:nth-child(odd) {
  background-color: gray;
}
<div id="wrapper">
  <div class="col">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div>10</div>
  </div>
  <div class="col">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>

  </div>

</div>
Salman A
  • 262,204
  • 82
  • 430
  • 521
-3

CSS:

.parent{
       height: 500px;
       width: 100%
        }
.parent div{
       height:height: 50px;
       width: auto;
        }

HTML:

`<div class="parent">
     <div></div>/*child*/
     <div></div>/*child*/
     <div></div>/*child*/
     <div></div>/*child*/
     <div></div>/*child*/
     <div></div>/*child*/
     <div></div>/*child*/
     <div></div>/*child*/
     <div></div>/*child*/
     <div></div>/*child*/
 <div>
`
Abdul ML
  • 1
  • 1