如何创建灵活的布局？

Question

如何进行布局，以确保没有空的地方？ 看一下图片：

也许是一些有角度的插件？或一些想法如何做布局？ 谢谢！

.wrap {
    display: block;
}

.test {
    display: inline-block;
    border: solid 1px black;
    width: 200px; // one card should be 400px
    height: 160px; // one card should be 320px
}

 <div class="wrap">
                    <div class="test">
                        1
                    </div>
                    <div class="test">
                        2
                    </div>
                    <div class="test">
                        3
                    </div>
                    <div class="test">
                        4
                    </div>
                    <div class="test">
                        5
                    </div>
                    <div class="test">
                        6
                    </div>
</div>

Answer 1

使用css display：grid来实现矩阵布局。请参考此代码，以实现您的结果。

请参考实际文档或https://gridbyexample.com/examples/example7/

.box-wrapper {
        display: grid;
    grid-gap: 10px;
        grid-template-columns: [col1-start] 100px  [col2-start] 100px  [col3-start] 100px [col4-start] 100px [col4-end];
        grid-template-rows: [row1-start] auto [row2-start] auto [row2-end];
        background-color: #fff;
        color: #444;
    }

    .box {
        background-color: #444;
        color: #fff;
        border-radius: 5px;
        padding: 20px;
        font-size: 150%;

    }

    .a {
        grid-column: col1-start / col3-start;
        grid-row: row1-start ;
    }
    .b {
        grid-column: col3-start ;
        grid-row: row1-start / row2-end;
    }
    .c {
        grid-column: col1-start;
        grid-row: row2-start ;
    }
    .d {
        grid-column: col2-start ;
        grid-row: row2-start ;
    }

<div class="box-wrapper">
  <div class="box a">A</div>
  <div class="box b">B</div>
  <div class="box c">C</div>
  <div class="box d">D</div>
  <div class="box e">E</div>
  <div class="box f">F</div>
</div>

Answer 2

您应该使用Flexbox。在线上有一些不错的练习，例如this。
对于您的情况，您可以尝试这样的操作：

.wrap{
    display: flex;
}
.test-wrapper {
    display: flex;
    flex-direction: column;
}
.test {
    display: inline-block;
    border: solid 1px black;
    width: 200px;
    height: 160px;
}

和html：

<div class="wrap">
<div class="test-wrapper">
    <div class="test">
        1
    </div>
    <div class="test">
        5
    </div>
</div>
<div class="test" style="width: 400px; height: 320px;">
    2
</div>
<div class="test-wrapper">
    <div class="test">
        3
    </div>
    <div class="test">
        6
    </div>
</div>
<div class="test">
    4
</div>

Answer 3

您最好的选择是使用CSS网格。

学习链接https://css-tricks.com/snippets/css/complete-guide-grid/