'How to place 4 divs 2 on each line?

Given the following divs

<body>
    <div id="f1">{{ f1|safe }}</div>
    <div id="f2">{{ f2|safe }}</div>
    <div id="f3">{{ f3|safe }}</div>
    <div id="f4">{{ f4|safe }}</div>
</body>

I need to have 2 on each line in a way they auto-resize in both directions with a screen resize. I tried style="flex-direction: row" it's not working and even if it does, the problem arises in the 3rd div which should be below the previous 2 followed by the last on the same row again. The positions should resemble the below.

fig

html


Solution 1:[1]

.container {
  display: grid;
  grid-template-columns:auto auto;
  background-color: DodgerBlue;
}

.container > div {
height: auto;
  background-color: #f1f1f1;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
<body>
<div class="container">
    <div id="f1">{{ f1|safe }}</div>
    <div id="f2">{{ f2|safe }}</div>
    <div id="f3">{{ f3|safe }}</div>
    <div id="f4">{{ f4|safe }}</div>
</div>
</body>

You can use grid property to span across horizontally:

display: grid;
grid-template-columns:auto auto;

And you can define height to span across vertically.

Solution 2:[2]

<body>
    <table width=100% border=0 cellspacing=0 cellpadding=0><tr><td>
    <div id="f1" style="background-color:red;">{{ f1|safe }}</div>
    </td><td>
    <div id="f2" style="background-color:green;">{{ f2|safe }}</div>
    </td></tr><tr><td>
    <div id="f3" style="background-color:blue;">{{ f3|safe }}</div>
    </td><td>
    <div id="f4">{{ f4|safe }}</div>
    </td></tr></table>
</body>

Solution 3:[3]

better go with bootstrap below if you want only this for div to be placed

<style>
div{ width: 50%; display : block; float : left; }
</style>
<body>

<container>
    <div id="f1" >{{ f1|safe }}</div>
    <div id="f2">{{ f2|safe }}</div>
    <div id="f3">{{ f3|safe }}</div>
    <div id="f4">{{ f4|safe }}</div>
<container>
</body>

Solution 4:[4]

<div class="row">
        <div class="col-md-6">
            <div id="f1">{{ f1|safe }}</div>
        </div>
        <div class="col-md-6">
            <div id="f2">{{ f2|safe }}</div>
        </div>
        <div class="col-md-6">
            <div id="f3">{{ f3|safe }}</div>
        </div>
        <div class="col-md-6">
            <div id="f4">{{ f4|safe }}</div>
        </div>
    </div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Lem0nti
Solution 3 Shubham Dange
Solution 4 Tejas Gurav

Related Questions