CODEWITHSUNDEEP
htmlcss
Kenny J.
Kenny J.

Reputation: 7

how to make contents flow vertically

I am creating a dynamic site where there is a parent div and children divs (they are variable in width) inside the parent one and trying to make this : when a new div is created it is pushed downward until it the parents height is filled then start a new column and such as:

IMAGE:

enter image description here

 <style>
    .parent {
      height: 800px;
      width: 100%;
      overflow-y: hidden;
      border: 1px solid black;
    }
    .child1 {
      background-color: blue;
      height: 150px;
      width: 150px;
    }
    .child1 {
      background-color: red;
      height: 150px;
      width: 300px;
    }
    </style>

    <div class="parent">
      <div class="child1"></div>
      <div class="child1"></div>
      <div class="child1"></div>
      <div class="child2"></div>
      <div class="child1"></div>
      <div class="child1"></div>
      <div class="child2"></div>
      <div class="child1"></div>
      <div class="child1"></div>
      <div class="child1"></div>
      <div class="child2"></div>
      <div class="child1"></div>
      <div class="child1"></div>
      <div class="child2"></div>
    </div>

Upvotes: 0

Views: 105

Answers (1)

remix23
remix23

Reputation: 2994

CSS's display: grid is a solution for the layout described in the attached image: 

.parent {
    height: 800px;
    width: 100%;
    border: 1px solid black;
    display: grid;
    grid-gap: 2px;
    grid-auto-columns: 150px;
    grid-template-rows: repeat(4, 1fr);
    grid-auto-flow: column;
    color: white;
}
.child1 {
    background-color: blue;
}
.child2 {
    background-color: red;
    grid-column: span 2;
}

The grid:

display: grid; to enable grid layout on the container.
grid-gap: 2px;specifies a gap of 2px between rows and columns in the grid.
grid-auto-columns: 150px; columns in the grid should be 150px wide.
grid-template-rows: repeat(4, 1fr); the grid will contain 4 rows of equals height.
grid-auto-flow: column; a new column will be created when the content reaches the bottom of the container.

The grid elements:

Without any additional css the blue elements will each occupy a cell in the grid 1 row tall and 1 column wide.

.child2 {
    background-color: red;
    grid-column: span 2;
}

The red elements will span over 2 columns.

Working fiddle here

Upvotes: 1

Related Questions