How to Build Grid That items are Directly Beneath Each Other?

Question

I am make dashboard layout that each block item should be aligned horizontally and stack over each other. My problem is I want the blocks that are in new row stacked directly beneath the one that is above it, but currently it does not as shown in this picture

Like above, I want block "F" directly under block "A", and similarly block "G" is directly under block "B" and "C", but current they leave much space as the height of block "E" is the longest.

Here my code:

:root {
  --p: 20px;
  --w1: 274px;
  --w2: calc(var(--w1) * 2 + (var(--p) * (2 - 1)));
  --w3: calc(var(--w1) * 3 + (var(--p) * (3 - 1)));
  --w4: calc(var(--w1) * 4 + (var(--p) * (4 - 1)));
  --h1: 100px;
  --h2: calc(var(--h1) * 2 + (var(--p) * (2 - 1)));
  --h3: calc(var(--h1) * 3 + (var(--p) * (3 - 1)));
  --h4: calc(var(--h1) * 4 + (var(--p) * (4 - 1)));
  --h5: calc(var(--h1) * 5 + (var(--p) * (5 - 1)));
  --dashboard_bg: #FFF;
}

html,
body {
  height: 100%;
  background: #BFCCD6;
}

#dashboard_layout {
  width: 100%;
  height: 100%;
  background: #BFCCD6;
  padding-top: var(--p);
}

p.dashboard_title {
  font-weight: bold;
  font-size: 20px;
}

.widget {
  border-radius: 5px;
  background: var(--dashboard_bg);
  margin: var(--p);
}

.widget:not(:first-child) {
  /*margin: var(--p);*/
}

.w1 {
  width: var(--w1);
}

.w2 {
  width: var(--w2);
}

.w3 {
  width: var(--w3);
}

.w4 {
  width: var(--w4);
}

.h1 {
  height: var(--h1);
}

.h2 {
  height: var(--h2);
}

.h3 {
  height: var(--h3);
}

.h4 {
  height: var(--h4);
}

.h5 {
  height: var(--h5);
}

.dashboard_content {
  display: flex;
  justify-content: space-between;
  padding: 15px;
}

.dashboard_flex .widget {
  float: left;
  display: flex;
  align-items: center;
  justify-content: center;
}

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script>

<div id="dashboard_layout">
  <p class="dashboard_title">Widget Height</p>
  <div class="dashboard_flex">
    <div class="widget w1 h1">A</div>
    <div class="widget w1 h2">B</div>
    <div class="widget w1 h3">C</div>
    <div class="widget w1 h4">D</div>
    <div class="widget w1 h5">E</div>
    <div class="widget w1 h3">F</div>
    <div class="widget w2 h2">G</div>
  </div>
</div>

Is there any way I can achieve that? Thanks

You'd need to use `grid` instead of `flex` but doing that sacrifices dynamic column count. — Ouroborus, Jul 27 '21 at 03:03
I answered this type of question yesterday. You have two options, one complicated which uses grids and a simple one which uses columns: [Is it possible to 'position' my blog posts this way?](https://stackoverflow.com/questions/68522281/is-it-possible-to-position-my-blog-posts-this-way) — Timothy Alexis Vass, Jul 27 '21 at 07:23

How to Build Grid That items are Directly Beneath Each Other?

0 Answers0