make height of the div according to the content in the css grid

Question

I want to remove the extra space above the blue div. I am using the grid. How can I remove extra space. I can replace this layout with any other layout. I am not finding any way to remove this extra space. Please suggest any other layout or modifications in the same layout.

  
        .main {
            width: 100vw;
            max-height: A4 ;
            display: grid;
            grid-template-columns: auto auto;
        }

        .f {
            height: 100px;
            background-color: red;
            width: 100%;
            /* float: left ; */
        }

        .s {
            height: 200px;
            background-color: forestgreen;
            width: 100% ;
            /* float: right ; */
        }

        .t {
            height: 300px;
            background-color: blue;
            width: 100% ;
                        /* float: left ; */

        }

        .fo {
            height: 400px;
            background-color: gray;
            width: 100% ;
                                    /* float: right  ; */

        }

<!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>

    <div class="main">
        <div class="f">dfdf</div>
        <div class="s">er</div>
        <div class="t">er</div>
        <div class="fo">er</div>

    </div>
</body>

</html>

Do you want to remove white space between red and blue divs ? — Srushti Shah, May 03 '23 at 05:17
Yes, I want to remove white space. I have a lot of div which will come dynamically. I want to use above layout. — Nikhil, May 03 '23 at 05:28

score 1 · Answer 1 · answered May 03 '23 at 05:24

If you don't want to use JavaScript, then you can reform your code using flexbox-only to achieve the masonry effect.

.wrapper {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  display: flex;
  flex-flow: row nowrap;
}

.column {
  display: flex;
  flex-flow: column nowrap;
}

.rectangle {
  width: 200px;
}

.yellow {
  height: 260px;
  background: yellow;
}

.red {
  height: 100px;
  background: red;
}

.blue {
  height: 220px;
  background: blue;
}

.purple {
  height: 120px;
  background: purple;
}

<div class="wrapper">
  <div class="column">
    <div class="rectangle yellow"></div>
    <div class="rectangle blue"></div>
  </div>
  <div class="column">
    <div class="rectangle red"></div>
    <div class="rectangle purple"></div>
    <div class="rectangle red"></div>
    <div class="rectangle purple"></div>
  </div>
</div>

make height of the div according to the content in the css grid

1 Answers1