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.
>Solution :
.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.