Question

我刚刚开始涉足CSS Grid。我正在尝试实现这种特殊的布局：https://imgur.com/a/gNTjodj

最初，我尝试使用行内块和百分比宽度-但不幸的是，元素无法填充由上一行的最大高度引起的间隙。

我正试图把猫和披萨堆放在报价所在的地方。我认为这将通过显式指定行来完成？但是，如果高度/宽度是动态的，怎么办？

如果有人可以提供有关如何处理图像间隙的建议，也可以。我发现了一些有关它的线程并应用了建议（字体大小：0，行高：0，显示：图像上的块等），但似乎都没有效果……

感谢我能获得的任何见解。预先非常感谢。

HTML设置

<div class="wrapper post" data-aos="fade-up">
    <div class="overlay"></div>
    <a href="<?php the_permalink(); ?>">
        <img src="<?php the_field("listing_image"); ?>" class="listing-image" alt="<?php the_title(); ?>">
        <div class="post-title">
            <h3><?php the_title(); ?></h3>
        </div>
    </a>
   </div>
</div>

CSS设置

@media only screen and (min-width: 700px) {
    .recent {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
        gap: 20px;
        grid-auto-flow: dense;
    }

    .wrapper:nth-child(1) { grid-column: span 3; }
    .wrapper:nth-child(2) { grid-column: span 2; }
    .wrapper:nth-child(3) { grid-column: span 2; }
    .wrapper:nth-child(4) { grid-column: span 3; }
    .wrapper:nth-child(5) { grid-column: span 2; }
    .wrapper:nth-child(6) { grid-column: 3 / 6; }
    .wrapper:nth-child(7) { grid-column: 1/3; }
    .wrapper:nth-child(8) { grid-column: 3/6; }
    .wrapper:nth-child(9) { grid-column: 1/3; }
    .wrapper:nth-child(10) { grid-column: 4/6; }
    .wrapper:nth-child(11) { grid-column: 1/4; }    
}

CSS网格-堆叠具有动态高度/宽度（wordpress内容）的元素？

0 个答案: