使用CSS的分步式布局

有人知道如何用CSS制作这个布局吗？如果CSS是不可能的，任何其他方法也可以

下面的代码，这是一个while循环

<div class="work-column">
                <div class="featured-work" style="background-image: url('<?php the_post_thumbnail_url(); ?>');">
                    <div class="work-content">
                        <div class="top">
                            <div class="top-row">
                                <div class="top-cell"><?php echo $num_padded; ?></div>
                                <div class="top-cell"><?php the_field('category'); ?></div>
                            </div>
                        </div>
                        <div class="middle">
                            <div class="short-description"><?php the_field('short_description'); ?></div>
                            <a href="<?php the_permalink(); ?>"><?php the_field('view_case_study_link_text'); ?></a>
                        </div>
                        <div class="bottom">
                            <div class="work-title"><?php the_title(); ?></div>
                            <div class="services"><?php the_field('services'); ?></div>
                        </div>
                    </div>
                </div><!-- /featured-work -->
            </div>

您可以使用：nth child（3n+3）css3选择器每三个选择一个div

代码如下所示：

div.work-column:nth-child(3n+2) {
  transform:translateY(33%);
}
div.work-column:nth-child(3n+3) {
  transform:translateY(66%);
}


div.work{
宽度：600px；
}
分区工作列{
宽度：200px；
高度：200px；
利润率：0-4倍；
背景：#ccc；
边框：#666点2张；
框大小：边框框；
显示：内联块；
}
div.work-column:第n个子项（3n+2）{
转化：translateY（33%）；
}
分区工作列：第n个子项（3n+3）{
转化：translateY（66%）；
}

非常感谢您的回复，我刚刚尝试了您的方法，它很有效，但我发现我必须为“工作”和“工作列”添加宽度，有什么方法可以使其全屏宽度？我只是想知道如何做到这一点，哈哈，您的方法非常有效。谢谢！您可以使用比例度量（100%，33.33%）而不是像素。另一个建议是不要在它们之间放置空格，否则对象将无法按您的意愿对齐。干杯！