wordpress - 在 wordpress 中创建砌体网格

Question

我希望在我的网站主页上实现一个砖石网格，其中包含 4 个图像。

有 2 个矩形图像和 2 个正方形图像，但我想将它们放在一起，以便它们适合一个漂亮的网格。

我附上了一张图片，在下面向您展示。

我正在使用 WPBakery 页面构建器在 Wordpress 中构建我的网站，但我似乎无法找到一种方法来实现我正在寻找的东西。

还有其他插件可以帮助我吗？我实现这一目标的最佳方法是什么？

谢谢

Answer 1

试试 CSS 网格，它给你这个：

.wrapper {
    display: grid;
    grid-gap: 10px;
        grid-template-columns: 200px 200px 200px;
        grid-template-rows: 200px 200px 200px;
        background-color: #fff;
        color: #444;
}

.box {
    background: none;
    border-radius: 5px;
    padding: 20px;
    font-size: 150%;
}

.a {
    background-image: url(http://placehold.it/200x400);
    grid-column: 1;
		grid-row: 1/3;
	}

.b {
    background-image: url(http://placehold.it/400x200);
    grid-column:  2 / span 2;
    grid-row: 1;
}

.c {
    background-image: url(http://placehold.it/200x200);
    grid-column: 2;
    grid-row: 2;
 }

 .d {
    background-image: url(http://placehold.it/200x200);
    grid-column: 3;
    grid-row: 2;
}

<div class="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>