Search code examples
htmlcsslaraveldompdf

i want to create multiple column into two column layout without using flex and grid

I need to create multiple columns into two column layout without using flex and grid. because im using dompdf plugin in laravel. dompdf doesn't support grid and flex. because it doesn't support css v3.Please give a layout design in css2(without flex and grid).I don't prefer table format, because the two column layout may or may not have the same height. thats why it has to resize the height and the empty space occupied by the next div.Thanks. enter image description here

Solution 

  • <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
</head>
<style type="text/css">
    *{
        outline: none;
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }
    .area{
        width: 100%;
        height: auto;
    }
    .container{
        max-width: 260px;
        padding-top: 1rem;
        margin: 0 auto;
    }
    .box{
        display: inline-block;
        width: 100px;
        height: 100px;
        background: lightgreen;
    }
</style>
<body>
    <div class="area">
        <div class="container">
            <div class="box">1</div>
            <div class="box">2</div>
        </div>
        <div class="container">
            <div class="box">3</div>
            <div class="box">4</div>
        </div>
        <div class="container">
            <div class="box">5</div>
            <div class="box">6</div>
        </div>
    </div>
</body>
</html>