Arrange Multiple Divs in CSS/Js

Arrange multiple divs in CSS/JS?

Take a look at Bootstraps card layout card-deck.
You can fill a single div with x amount of cards. The width of each card can be declared in CSS by flex-basis.

This way there's no need for extra columns to make it responsive. Also no need to create a mapping when using CSS-grid (which is also a valid solution). No need for JavaScript solutions.

Below I've extended the card-deck layout with two-col class.
Similarly you can extend to three-col or four-col and so on.

SCSS

.card-deck {
    .card {
        flex-basis: 100%; // mobile first
    }

    /*@media (min-width: 768px)*/
    @include media-breakpoint-up(md) {
        &.two-col {
            .card {
                flex-basis: calc(50% - #{$grid-gutter-width}); // -30px
            }
        }
    }        
}

DEMO

Multiple DIVs on same row

I think you want something like this?

You can achieve this by using flexbox, Create a div in flexbox and wrap all the Div inside it. and make sure all you use flex-direction: row; to create multiple div in a row. and to make it responsive apply media query in it.

Learn media queries

Learn Flex box

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <style>
    .wrap {
      display: flex;
      flex-direction: row;

    }

    .dw {
      width: 180px;
      margin-left: 1px;
      height: 30px;
      display: flex;
      justify-content: center;
      padding-top: 14px;
      border-radius: 20px;
      background-color: #3A800D;

    }

    a {
      color: white;
      text-decoration: none;
    }

    .dropdown {
      float: left;
      overflow: hidden;
    }

    .dropdown .dropbtn {
      font-size: 16px;
      width: 180px;
      padding-top: 14px;
      border-radius: 20px;
      border: none;
      outline: none;
      color: white;
      padding: 14px 16px;
      background-color: #3A800D;
      font-family: inherit;
      margin: 0;
    }

    .navbar a:hover,
    .dropdown:hover .dropbtn {
      background-color: #3A800D;
    }

    .dropdown-content {
      display: none;
      position: absolute;
      background-color: #3A800D;
      border-radius: 30px;
      width: 180px;
      box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
      z-index: 1;
    }

    .dropdown-content a {
      float: none;
      color: white;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
      text-align: left;
    }

    .dropdown:hover .dropdown-content {
      display: block;
    }

    @media only screen and (max-width: 600px) {
       .wrap{
       display: flex;
       flex-direction: column;
       align-items: center;
       
  }
  .dw{
    margin-top: 10px;
  }
  .dropbtn , .dropdown{
    margin-top: 10px;
  }
}
  </style>

  <div class="wrap">

    <div class="dw">
      <a href="">Home</a>

    </div>

    <div class="dw">
      <a href="">Recipes</a>

    </div>

    <div class="dw">
      <a href="">Cooking Terms</a>

    </div>

    <div class="dropdown">
      <button class="dropbtn">Cooking Diet
        <i class="fa fa-caret-down"></i>
      </button>
      <div class="dropdown-content">
        
        <a href="#">Link 1</a>
        <hr>
        <a href="#">Link 2</a>
        <hr>
        <a href="#">Link 3</a>
      </div>
    </div>

    <!-- <div class="dw">
      <a href="">Contact Us</a>

    </div> -->
  </div>
</body>

</html>

Align multiple divs created with javascript

Here is a codepen sample where you can find something similar to what you try to achieve : https://codepen.io/aSH-uncover/pen/XWqWomj

If you type text on the text area, buttons will appear on the right, 2 new buttons each time you add a new line in the text area by pressing 'enter'
(I am unsure if you wanted the button count to match your text or not, anyway a better approach regarding line count is detailled in this response: How to get number of rows in <textarea > using JavaScript?)

The things to remember regarding your main question is the usage of flex box, for more information check this page: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

In your case, we give the buttons container a display of flex and we ask it to wrap elements on several rows.

.buttons {
  display: flex;
  flex-wrap: wrap;
}

Then we give the each button a width of 50% so that two buttons will completly fill one row and force the wrapping to occur.

button {
  width: 50%;
}

Note that there are other solutions to this problem ;)

How to create and arrange multiple divs in rows and columns inside a div

I think there are several ways to approach this task but I would try to solve it with css floating.
You can float a div and it loses it block behaviour so several divs can be in one row.
If you float all divs to the left for example and if you give the main div a width of 640px then exactly 8 divs should row up in the main div...

#maindiv {
    width: 640px;
}

.divcells {
    width: 80px;
    height: 75px;
    padding: 0px;
    margin: 0px;
    border: 0px;
    float: left;
    display: block;
}

$(document).ready(function() {
    for(var i = 1; i <= 40; i++) {
        $('#maindiv').append('<div id="page' + i + '" class="divcells">TESTING</ div>' )
    }
}

Then you just have to add with javascript as much cell divs as you want to the main div.
Make sure that the word "TESTING" doesnt exceed 80px otherwise you should add overflow to the div cells.

Best way to arrange multiple divs vertically one below the other

div { display: block; }

This should display all divs as block elements and take up the full width, thus the following divs should stack below.

Overlapping multiple div using CSS?

Maybe something like following snippet, with absolute positioning:

.maind {
    margin: 0px auto;
    width: 90%;
    padding: 10px;
    height: 900px;
    background-color: rgb(9, 252, 9);
    position: relative;
  }

  .fdiv {
    margin: auto;
    width: 25%;
    padding: 10px;
    height: 100px;
    background-color: rgb(10, 233, 222);
    margin-top: 30px;
    border: 2px solid red;
    position: absolute;
    top: 0;
    left: 35%;
    z-index: 22;
  }

  .sdiv {
    width: 80%;
    position: absolute;
    top: 10%;
    left: 10%;
    height: 600px;
    background-color: #ffff00ec;
    z-index: 12;
    margin: 0 auto;
  }

  .tdiv {
    margin: auto;
    width: 25%;
    padding: 10px;
    height: 100px;
    background-color: rgb(10, 233, 222);
    border: 2px solid red;
    position: absolute;
    bottom: 20%;
    left: 35%;
    z-index: 22;
  }

  p {
    text-align: center;
  }

  .wrap {
    display: flex;
    flex-direction: row;
    
  }

  .wr1 {
    width: 25%;
    height: 100px;
    background-color: rgb(10, 233, 222);
    border: 2px solid red;
    position: absolute;
    top: 35%;
    left: 0;
    z-index: 22;
  }
  .wr2 {
    width: 25%;
    height: 100px;
    background-color: rgb(10, 233, 222);
    border: 2px solid red;
    position: absolute;
    top: 35%;
    right: 0;
    z-index: 22;
  }

<div class="maind">

  <div class="fdiv">
    <p>Top...</p>
  </div>
  <div class="wrap">
    <div class="wr1">
      <p>Left..</p>
    </div>
    <div class="sdiv">
      <p>Somessss content here..</p>
    </div>
    <div class="wr2">
      <p>Right...</p>
    </div>
  </div>
  <div class="tdiv">
    <p>Bottom..</p>
  </div>

</div>

Arrange Multiple Divs in CSS/Js